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

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: #030508;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Background layers ── */

.bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    #152050 0%,
    #0f1a38 20%,
    #0b122c 45%,
    #060a18 75%,
    #030508 100%
  );
}

.glow-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(15, 26, 56, 0.8) 0%, transparent 70%);
  pointer-events: none;
}

.glow-lime-br {
  position: absolute;
  bottom: -20%;
  right: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(178, 244, 50, 0.08) 0%,
    rgba(178, 244, 50, 0.04) 25%,
    rgba(178, 244, 50, 0.015) 45%,
    transparent 65%
  );
  pointer-events: none;
}

.glow-lime-tl {
  position: absolute;
  top: -20%;
  left: -15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    ellipse,
    rgba(178, 244, 50, 0.05) 0%,
    rgba(178, 244, 50, 0.02) 30%,
    transparent 55%
  );
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    transparent 20%,
    rgba(3, 5, 8, 0.7) 100%
  );
  pointer-events: none;
}

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 65%);
  pointer-events: none;
}

/* ── Particles ── */

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: #B2F432;
  animation: particle-drift linear infinite;
}

@keyframes particle-drift {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(var(--drift-x, 0px));
    opacity: 0;
  }
}

/* ── Interactive canvas ── */

.interactive-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ── Content ── */

.content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 0 24px;
  text-align: center;
}

.wordmark {
  height: 56px;
}

.headlines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.headlines h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #fff;
}

.headlines p {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Social link ── */

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
  text-decoration: none;
}

.social-link:hover {
  border-color: rgba(178, 244, 50, 0.4);
  color: #B2F432;
  box-shadow: 0 0 20px rgba(178, 244, 50, 0.2);
}

/* ── Comfy Bot ── */

.comfy-bot {
  display: inline-block;
  animation: comfy-float 3s ease-in-out infinite;
  will-change: transform;
}

@keyframes comfy-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.comfy-bot__svg {
  overflow: visible;
}

.comfy-bot__antenna {
  animation: comfy-wiggle 2s ease-in-out infinite;
  will-change: transform;
}

.comfy-bot__antenna--left { transform-origin: 32px 14px; }
.comfy-bot__antenna--right { transform-origin: 68px 14px; }

@keyframes comfy-wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

.comfy-bot__eyes {
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
}

.comfy-bot__eyes--visible {
  opacity: 1;
}

.comfy-bot__logo-eyes {
  transform: scale(0.85);
  transform-origin: 50px 46px;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.comfy-bot__logo-eyes.comfy-bot__eyes--visible {
  transform: scale(1);
}

.comfy-bot__mouth {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.comfy-bot__mouth--visible {
  opacity: 1;
}

.comfy-bot__hand-left {
  transform-origin: 8px 70px;
}

.comfy-bot__hand-left--waving {
  animation: comfy-wave 1.7s ease-in-out infinite;
}

@keyframes comfy-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-20deg); }
  40% { transform: rotate(0deg); }
  60% { transform: rotate(-20deg); }
  80% { transform: rotate(0deg); }
}

/* ── Responsive ── */

@media (min-width: 640px) {
  .glow-center { width: 900px; height: 900px; }
  .glow-lime-br { right: -8%; bottom: -12%; width: 900px; height: 900px; }
  .glow-lime-tl { width: 700px; height: 700px; }
  .wordmark { height: 80px; }
  .content { gap: 80px; }
  .comfy-bot__svg { transform: scale(1.1); }
}

@media (min-width: 1024px) {
  .wordmark { height: 96px; }
}