:root {
  --bg-0: #05060f;
  --bg-1: #0a1230;
  --blue: #5b8cff;
  --blue-soft: #9db8ff;
  --ice: #e8f0ff;
  --text: #eaf0ff;
  --muted: #9aa6c9;
}

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

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background: radial-gradient(120% 90% at 50% -10%, #12235e 0%, var(--bg-1) 38%, var(--bg-0) 75%);
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 2rem;
}

/* ---------- ambient backdrop ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.rays {
  position: absolute;
  top: -10vmin; left: 50%;
  width: 160vmax; height: 160vmax;
  transform: translateX(-50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(91,140,255,.16) 3deg, transparent 7deg,
    transparent 22deg, rgba(91,140,255,.10) 25deg, transparent 30deg,
    transparent 47deg, rgba(157,184,255,.14) 50deg, transparent 56deg,
    transparent 80deg, rgba(91,140,255,.12) 84deg, transparent 90deg,
    transparent 120deg, rgba(91,140,255,.10) 124deg, transparent 130deg,
    transparent 160deg, rgba(157,184,255,.13) 164deg, transparent 170deg,
    transparent 200deg, rgba(91,140,255,.11) 205deg, transparent 211deg,
    transparent 250deg, rgba(91,140,255,.13) 254deg, transparent 260deg,
    transparent 300deg, rgba(157,184,255,.10) 305deg, transparent 312deg,
    transparent 340deg, rgba(91,140,255,.12) 344deg, transparent 350deg
  );
  filter: blur(2px);
  opacity: .85;
  animation: spin 90s linear infinite;
}

.discoball {
  position: absolute;
  top: 9vmin; left: 50%;
  transform: translateX(-50%);
  width: 132px; height: 132px;
}

.ball {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #cfe0ff 14%, transparent 38%),
    repeating-conic-gradient(from 0deg, #a9c2ff 0deg 12deg, #5e7fd6 12deg 24deg),
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px);
  box-shadow:
    inset -10px -12px 26px rgba(2,8,30,.7),
    inset 10px 10px 24px rgba(255,255,255,.35);
  animation: shimmer 6s ease-in-out infinite;
}

.glow {
  position: absolute;
  inset: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150,185,255,.55) 0%, rgba(91,140,255,.22) 35%, transparent 70%);
  filter: blur(6px);
  animation: pulse 6s ease-in-out infinite;
}

/* ---------- content ---------- */
.stage { position: relative; z-index: 2; max-width: 680px; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 1.6rem;
  margin-top: 16vmin;
}

.wordmark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: .92;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 6.6rem);
  text-shadow: 0 0 40px rgba(120,160,255,.45), 0 0 90px rgba(91,140,255,.25);
}
.wordmark span { display: block; }

.tagline {
  margin-top: 1.4rem;
  font-weight: 300;
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- socials ---------- */
.socials {
  margin-top: 2.6rem;
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.2rem;
  border: 1px solid rgba(157,184,255,.28);
  border-radius: 999px;
  color: var(--ice);
  text-decoration: none;
  font-size: .9rem;
  letter-spacing: .04em;
  background: rgba(20,35,94,.28);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.social:hover {
  transform: translateY(-2px);
  border-color: rgba(157,184,255,.7);
  background: rgba(40,65,150,.38);
  box-shadow: 0 8px 30px rgba(91,140,255,.25);
}

.contact {
  margin-top: 2.4rem;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--muted);
}
.contact a { color: var(--blue-soft); text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 3rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(154,166,201,.6);
}

/* ---------- motion ---------- */
@keyframes spin   { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes shimmer{ 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes pulse  { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rays, .ball, .glow { animation: none; }
}

@media (max-width: 520px) {
  .discoball { width: 96px; height: 96px; top: 7vmin; }
  .eyebrow { margin-top: 22vmin; }
}