:root {
  --red: #d52b1e;
  --dark-red: #a3160b;
  --cream: #fff8ee;
  --gold: #f5c451;
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Beverage-themed background: deep, rich gradient reminiscent of soda,
   wine and berry drinks, with soft radial highlights like light through glass */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.10), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(245, 196, 81, 0.18), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.08), transparent 50%),
    linear-gradient(160deg, #7a0c0c 0%, #b4181a 35%, #d52b1e 60%, #7a0c0c 100%);
  overflow: hidden;
}

/* subtle diagonal "liquid wave" shapes */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 160%;
  height: 160%;
  left: -30%;
  border-radius: 50%;
  opacity: 0.12;
  background: var(--cream);
  filter: blur(30px);
}

.hero::before {
  top: -70%;
  transform: rotate(8deg);
}

.hero::after {
  bottom: -80%;
  background: var(--gold);
  opacity: 0.10;
  transform: rotate(-6deg);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  animation: fadeUp 1s ease-out both;
}

.cross-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  background: var(--cream);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.bottle-icon {
  width: 40px;
  height: 40px;
}

h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

h1 span {
  color: var(--gold);
}

.tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
}

.cta {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.9rem 2.4rem;
  background: var(--gold);
  color: #3a2200;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.cta[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.75);
  background: rgba(255, 255, 255, 0.15);
}

/* Rising bubbles animation to evoke carbonated drinks */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.bubbles span {
  position: absolute;
  bottom: -10%;
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  animation: rise linear infinite;
}

.bubbles span:nth-child(1) { left: 8%;  width: 14px; height: 14px; animation-duration: 12s; animation-delay: 0s; }
.bubbles span:nth-child(2) { left: 20%; width: 8px;  height: 8px;  animation-duration: 9s;  animation-delay: 2s; }
.bubbles span:nth-child(3) { left: 34%; width: 20px; height: 20px; animation-duration: 15s; animation-delay: 1s; }
.bubbles span:nth-child(4) { left: 48%; width: 10px; height: 10px; animation-duration: 10s; animation-delay: 4s; }
.bubbles span:nth-child(5) { left: 60%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: 3s; }
.bubbles span:nth-child(6) { left: 70%; width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: 5s; }
.bubbles span:nth-child(7) { left: 78%; width: 22px; height: 22px; animation-duration: 16s; animation-delay: 0.5s; }
.bubbles span:nth-child(8) { left: 88%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: 6s; }
.bubbles span:nth-child(9) { left: 92%; width: 6px;  height: 6px;  animation-duration: 7s;  animation-delay: 2.5s; }
.bubbles span:nth-child(10) { left: 55%; width: 26px; height: 26px; animation-duration: 18s; animation-delay: 3.5s; }

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120vh) scale(1.3);
    opacity: 0;
  }
}

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

@media (max-width: 480px) {
  .cta {
    padding: 0.8rem 1.8rem;
  }
}