/* Base reset and layout */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #e8f1f2;
  background:
    radial-gradient(1200px 600px at 20% 10%, #1f3b4d 0%, rgba(31,59,77,0.2) 70%, transparent 100%),
    linear-gradient(180deg, #0f2027 0%, #203a43 40%, #2c5364 100%);
  overflow: hidden;
}

/* Canvas background covers viewport */
#meteor-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -2;
}

/* Optional subtle star overlay container if used */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Content sections */
.site-header { padding: 8rem 1rem 2rem; }
.site-title { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: 0.3px; }
.site-tagline { margin: 0; opacity: 0.9; }

/* CTA */
.cta { padding: 2rem 1rem 4rem; }
.cta .btn { padding: 0.9rem 1.6rem; }

/* Footer */
.site-footer { padding: 2rem 1rem 3rem; opacity: 0.9; }

/* Shining gradient text (no blink) */
.shine {
  position: relative;
  font-weight: 800;
  letter-spacing: 0.5px;

  /* Animated gradient fill */
  --c1: #fffbea;
  --c2: #ffd27a;
  --c3: #fffbea;
  --bg-size: 200% 100%;
  background:
    linear-gradient(90deg, var(--c1), var(--c2), var(--c3)) 0 0 / var(--bg-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Soft outer glow for “shine” */
  text-shadow:
    0 0 6px rgba(255, 232, 180, 0.55),
    0 0 18px rgba(255, 200, 120, 0.35);

  animation: shine-sweep 4s linear infinite, glow-pulse 2.6s ease-in-out infinite alternate;
  will-change: background-position, text-shadow;
}

.shine::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(255, 244, 220, 0.08);
  text-shadow:
    0 0 10px rgba(255, 220, 140, 0.25),
    0 0 28px rgba(255, 190, 90, 0.18);
}

@keyframes shine-sweep {
  to { background-position: 200% 0; }
}

@keyframes glow-pulse {
  from {
    text-shadow:
      0 0 6px rgba(255, 232, 180, 0.45),
      0 0 14px rgba(255, 200, 120, 0.28);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  }
  to {
    text-shadow:
      0 0 10px rgba(255, 240, 200, 0.65),
      0 0 24px rgba(255, 210, 130, 0.42);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.28));
  }
}

/* Respect reduced motion: keep static shine */
@media (prefers-reduced-motion: reduce) {
  body { background: #0f2027; }
  .shine { animation: none; background-position: 100% 0; }
 
}