@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Reset & Base ────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr-bg: #080810;
  --clr-text: #f1f5f9;
  --clr-text-muted: #94a3b8;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Animated gradient background ────────────── */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 35%, rgba(255, 60, 120, .3) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 25%, rgba(120, 40, 255, .28) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0, 200, 255, .22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 70% 60%, rgba(255, 170, 0, .18) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 25% 75%, rgba(0, 255, 160, .15) 0%, transparent 50%);
  animation: bgShift 16s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0%   { transform: scale(1) translate(0, 0) rotate(0deg); }
  25%  { transform: scale(1.06) translate(-3%, 2%) rotate(.5deg); }
  50%  { transform: scale(1.03) translate(2%, -3%) rotate(-.3deg); }
  75%  { transform: scale(1.08) translate(-1%, 4%) rotate(.2deg); }
  100% { transform: scale(1) translate(1%, -1%) rotate(0deg); }
}

/* ── Grid overlay ────────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 10%, transparent 65%);
}

/* ── Floating orbs ───────────────────────────── */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 50, 100, .35) 0%, transparent 70%);
  top: -10%;
  left: -5%;
  animation: orbFloat1 20s ease-in-out infinite;
}

.orb-2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(100, 50, 255, .35) 0%, transparent 70%);
  top: 10%;
  right: -8%;
  animation: orbFloat2 18s ease-in-out infinite;
}

.orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 220, 255, .3) 0%, transparent 70%);
  bottom: -5%;
  left: 30%;
  animation: orbFloat3 22s ease-in-out infinite;
}

.orb-4 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(255, 180, 0, .25) 0%, transparent 70%);
  bottom: 20%;
  right: 15%;
  animation: orbFloat4 25s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(8vw, 6vh) scale(1.15); }
  50%  { transform: translate(3vw, 12vh) scale(.9); }
  75%  { transform: translate(-4vw, 5vh) scale(1.1); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-6vw, 8vh) scale(1.1); }
  50%  { transform: translate(-10vw, 3vh) scale(.95); }
  75%  { transform: translate(-3vw, 10vh) scale(1.12); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-5vw, -8vh) scale(1.2); }
  60%  { transform: translate(8vw, -4vh) scale(.9); }
}

@keyframes orbFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%  { transform: translate(-8vw, -6vh) scale(1.15); }
  65%  { transform: translate(4vw, 8vh) scale(.85); }
}

/* ── Floating particles ──────────────────────── */
.particles {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat linear infinite;
}

.particle:nth-child(1)  { width: 4px; height: 4px; background: #ff3c78; left: 10%; animation-duration: 18s; animation-delay: 0s; }
.particle:nth-child(2)  { width: 3px; height: 3px; background: #7828ff; left: 25%; animation-duration: 22s; animation-delay: 2s; }
.particle:nth-child(3)  { width: 5px; height: 5px; background: #00dcff; left: 40%; animation-duration: 16s; animation-delay: 4s; }
.particle:nth-child(4)  { width: 3px; height: 3px; background: #ffb400; left: 55%; animation-duration: 20s; animation-delay: 1s; }
.particle:nth-child(5)  { width: 4px; height: 4px; background: #00ffa0; left: 70%; animation-duration: 24s; animation-delay: 3s; }
.particle:nth-child(6)  { width: 3px; height: 3px; background: #ff3c78; left: 85%; animation-duration: 19s; animation-delay: 5s; }
.particle:nth-child(7)  { width: 5px; height: 5px; background: #7828ff; left: 15%; animation-duration: 21s; animation-delay: 6s; }
.particle:nth-child(8)  { width: 3px; height: 3px; background: #00dcff; left: 60%; animation-duration: 17s; animation-delay: 7s; }
.particle:nth-child(9)  { width: 4px; height: 4px; background: #ffb400; left: 35%; animation-duration: 23s; animation-delay: 8s; }
.particle:nth-child(10) { width: 3px; height: 3px; background: #00ffa0; left: 80%; animation-duration: 15s; animation-delay: 2s; }

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  8% {
    opacity: .7;
  }
  92% {
    opacity: .7;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

/* ── Main container ──────────────────────────── */
.container {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  animation: fadeInUp 1s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Brand name ──────────────────────────────── */
.brand-name {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    135deg,
    #ff3c78 0%,
    #ff6b3c 15%,
    #ffb400 30%,
    #00ffa0 50%,
    #00dcff 65%,
    #7828ff 80%,
    #ff3c78 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 6s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(120, 40, 255, .3));
}

@keyframes gradientText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Tagline ─────────────────────────────────── */
.tagline {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  animation: fadeInUp 1s ease-out .4s both;
  position: relative;
}

.tagline::before,
.tagline::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: clamp(30px, 6vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
  margin: 0 1rem;
}

/* ── Footer ──────────────────────────────────── */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 1.5rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .2);
  z-index: 10;
  letter-spacing: .05em;
  animation: fadeInUp .8s ease-out 1s both;
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .tagline::before,
  .tagline::after {
    width: 20px;
    margin: 0 .6rem;
  }

  .orb { filter: blur(60px); }
  .orb-1 { width: 300px; height: 300px; }
  .orb-2 { width: 280px; height: 280px; }
  .orb-3 { width: 250px; height: 250px; }
  .orb-4 { width: 220px; height: 220px; }
}