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

/* ── Variables ── */
:root {
  --coral:  #f06850;
  --peach:  #f4a68c;
  --orange: #f0a040;
  --mint:   #7ee8c8;
  --teal:   #3ca8a0;
  --deep:   #2a8888;
  --bg:     #e5ddd0;
  --text:   #1a1714;
}

/* ── Body ── */
html, body {
  height: 100%;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ── Ambient glow blobs ── */
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.bg-glow--1 {
  width: 500px;
  height: 500px;
  background: var(--coral);
  top: -10%;
  left: -8%;
  animation: drift1 14s ease-in-out infinite alternate;
}

.bg-glow--2 {
  width: 420px;
  height: 420px;
  background: var(--teal);
  bottom: -12%;
  right: -6%;
  animation: drift2 16s ease-in-out infinite alternate;
}

.bg-glow--3 {
  width: 300px;
  height: 300px;
  background: var(--orange);
  top: 40%;
  left: 55%;
  animation: drift3 18s ease-in-out infinite alternate;
}

@keyframes drift1 {
  to { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes drift2 {
  to { transform: translate(-50px, -35px) scale(1.1); }
}
@keyframes drift3 {
  to { transform: translate(-40px, 30px) scale(0.92); }
}

/* ── Main container ── */
.container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  animation: fadeUp 1.2s ease-out both;
}

/* ── Logo ── */
.logo {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(240, 104, 80, 0.25));
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 40px rgba(240, 104, 80, 0.25)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 55px rgba(60, 168, 160, 0.3)); }
}

/* ── Tagline ── */
.tagline {
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--coral), var(--deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: fadeIn 1.4s 0.6s ease-out forwards;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .logo {
    width: 110px;
  }

  .tagline {
    font-size: 1.05rem;
    letter-spacing: 0.18em;
  }

  .bg-glow--1 { width: 300px; height: 300px; }
  .bg-glow--2 { width: 260px; height: 260px; }
  .bg-glow--3 { width: 180px; height: 180px; }
}