/* ── Tokens ───────────────────────────────────────── */
:root {
  --blue-light: #c8dff0;
  --blue-mid:   #2b2b2b;
  --blue-base:  #296274;
  --sand:       #e8d09a;
  --sand-warm:  #000000;
  --ink:        #000000;
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  height: 100vh;
  overflow: hidden;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  color: var(--ink);
}

/* ── Background ───────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 60% at 18% -8%,  #bcd8ef 0%, transparent 58%),
    radial-gradient(ellipse 65% 52% at  4% 98%,  #9ec3dc 0%, transparent 55%),
    radial-gradient(ellipse 58% 50% at 96% 96%,  #e0cc92 0%, transparent 55%),
    linear-gradient(158deg, #c0dbee 0%, #d8ecf7 28%, #ecf3ec 54%, #f0e4c4 76%, #e4ce96 100%);
}

.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
}

/* ── Page grid ────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 7vw;
  gap: 5vw;

  @media (min-width: 1000px) {
  .left {
    padding-left: 15vw;
  }
}
}

/* ── Left column ──────────────────────────────────── */
.left {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--stone);
  opacity: 0;
  animation: rise 0.9s var(--ease-out) 0.05s forwards;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sand-warm);
  flex-shrink: 0;
}

h1 {
  font-weight: 300;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.06;
  opacity: 0;
  animation: rise 0.9s var(--ease-out) 0.15s forwards;
}

h1 em {
  font-style: italic;
  color: var(--blue-base);
}

.desc {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--stone);
  max-width: 500px;
  opacity: 0;
  animation: rise 0.9s var(--ease-out) 0.25s forwards;
}

/* ── Buttons ──────────────────────────────────────── */
.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: rise 0.9s var(--ease-out) 0.45s forwards;
}

.btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  border-radius: 13px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.4s ease;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.2) 0%, transparent 55%);
  pointer-events: none;
}

.btn:hover  { transform: translateY(-4px) scale(1.03); }
.btn:active { transform: scale(0.97); transition-duration: 0.1s; }

.btn-apple {
  background: linear-gradient(148deg, #28384a, #192736);
  color: #dceaf4;
  box-shadow: 0 5px 22px rgba(22,38,54,0.28);
}
.btn-apple:hover { box-shadow: 0 14px 38px rgba(22,38,54,0.36); }

.btn-play {
  background: linear-gradient(148deg, #dbbe7c, #c5a458);
  color: #29200a;
  box-shadow: 0 5px 22px rgba(197,164,88,0.3);
}
.btn-play:hover { box-shadow: 0 14px 38px rgba(197,164,88,0.38); }

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-text small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.58;
  margin-bottom: 1px;
}

.btn-text strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Right — Bottle ───────────────────────────────── */
.right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  animation: fade 1.1s var(--ease-out) 0.25s forwards;
}

/* Soft ambient glow */
.halo {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 42% 38%,
    rgba(170, 212, 238, 0.52),
    rgba(230, 206, 148, 0.3) 58%,
    transparent 80%
  );
  filter: blur(50px);
  animation: halo 7s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes halo {
  0%, 100% { transform: scale(1) translate(0, 0); }
  38%       { transform: scale(1.07) translate(16px, -12px); }
  68%       { transform: scale(0.95) translate(-10px, 10px); }
}

/* Floating shadow */
.shadow {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(85,140,172,0.2), transparent 70%);
  filter: blur(5px);
  animation: shadow 5s ease-in-out infinite;
  z-index: 0;
}

@keyframes shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.65; }
  38%       { transform: translateX(-50%) scaleX(0.72); opacity: 0.38; }
  68%       { transform: translateX(-50%) scaleX(0.86); opacity: 0.5;  }
}

/* Bottle float */
.bottle {
  position: relative;
  z-index: 1;
  width: clamp(155px, 21vw, 305px);
  animation: float 5.2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0)    rotate(-0.4deg); }
  36%       { transform: translateY(-18px) rotate(0.7deg); }
  66%       { transform: translateY(-9px)  rotate(-0.2deg); }
}

.bottle:hover {
  animation-play-state: paused;
  filter: brightness(1.04) saturate(1.08);
  transition: filter 0.5s ease;
}

/* ── Footer ───────────────────────────────────────── */
footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 7vw;
  border-top: 1px solid rgba(135, 181, 208, 0.2);
  background: rgba(160, 200, 222, 0.16);
  backdrop-filter: blur(14px);
}

.footer-brand {
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--blue-base);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-links a,
.footer-links span {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--blue-mid);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover { color: var(--sand-warm); }

.sep {
  width: 1px;
  height: 10px;
  background: rgba(0, 0, 0, 0.32);
}

/* ── Keyframes ────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ── Small screen fixes (<480px) ─────────────────── */
@media (max-width: 480px) {

  /* Allow page to scroll instead of clipping */
  body {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }

  .page {
    height: auto;
    min-height: 100vh;
  }

  /* Stack hero vertically */
  .hero {
    grid-template-columns: 1fr;
    padding: 36px 6vw 20px;
    gap: 28px;
  }

  /* Bottle gets full width row — never clipped */
  .right {
    min-height: 200px;
  }

  .bottle {
    width: clamp(130px, 42vw, 200px);
  }

  .halo {
    width: 85%;
  }

  /* Footer: stack so copyright never gets cut */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 6vw;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Separators look wrong when links wrap */
  .sep {
    display: none;
  }
}