body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background image (use background.jpg in same folder) with fallback color */
  /* slightly darker fallback to increase contrast */
  background-color: #05060a; /* very dark navy/near-black */
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Tailwind default system sans stack site-wide */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #e6edf3; /* subtle default page text color on dark bg */
}

.logo {
  width: 200px;
  /* center inside the circular wrap */
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  top: 0;
  /* keep the slow pulse */
  animation: pulse 5.0625s ease-in-out infinite;
}

.logo-wrap {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* remove solid black circular background — keep wrap transparent */
  background: transparent;
  /* subtle outer shadow only (no inset) so the logo sits above the photo cleanly */
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1; /* sit above the dark overlay */
}

/* Tagline above the logo */
.tagline {
  margin: 0;
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  font-size: 0.8rem;
  /* wide tracking like the example */
  letter-spacing: 0.6em;
  text-transform: none;
  text-align: center;
}

/* AMBLE between logo and coming-soon */
.amble {
  margin: 0;
  color: rgba(255,255,255,0.98);
  font-weight: 800;
  font-size: 3.5rem; /* large AMBLE text */
  letter-spacing: 0.22em;
  text-align: center;
}

.coming-soon {
  margin: 0;
  /* slightly larger small text to match example */
  font-size: 0.85rem;
  /* font-medium */
  font-weight: 500;
  /* uppercase */
  text-transform: uppercase;
  /* tracking-[0.65em] */
  letter-spacing: 0.5em;
  text-align: center;
  /* text-white/75: white at 75% opacity */
  color: rgba(255,255,255,0.75);
  /* Tailwind default system sans stack (preflight/base) */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* sm:text-sm -> 0.875rem (14px) for screens >= 640px (Tailwind sm) */
@media (min-width: 640px) {
  .coming-soon { font-size: 0.875rem; }
}

/* keep the logo from overflowing on small screens */
@media (max-width: 420px) {
  .logo-wrap { width: 220px; height: 220px; }
  .logo { width: 140px; }
  .coming-soon { font-size: 0.75rem; letter-spacing: 0.4em; }
}

/* dark overlay to match the moody vignette in the example */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* darker vignette to make the background image moodier */
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.95) 100%);
  z-index: 0;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  /* increased scale to make the pulsating effect bigger */
  50% { transform: scale(1.3); opacity: 0.8; }
}