:root {
  --ink: #191716;
  --muted: #6f625c;
  --gold: #b9904f;
  --gold-dark: #96713c;
  --cream: #fff7f0;
  --blush: #f3ddd7;
  --green: #17492e;
  --footer: #171717;
  --line: rgba(185, 144, 79, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  padding-bottom: 128px;
}

.page {
  min-height: 100vh;
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 34px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.96), rgba(255,246,239,.78) 28%, rgba(242,215,209,.7) 60%, rgba(211,187,177,.62) 100%),
    linear-gradient(135deg, #fffaf5 0%, #f5ded8 52%, #fff5ed 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: -3vh;
  width: 38vw;
  height: 68vh;
  background: linear-gradient(120deg, rgba(255,255,255,.62), rgba(203,179,170,.18));
  filter: blur(.2px);
  opacity: .7;
  z-index: -1;
  animation: curtainFloat 9s ease-in-out infinite alternate;
}

.hero::before {
  left: -11vw;
  transform: rotate(-12deg) skewX(-9deg);
  border-bottom-right-radius: 55%;
}

.hero::after {
  right: -11vw;
  transform: rotate(12deg) skewX(9deg);
  border-bottom-left-radius: 55%;
  animation-delay: -3s;
}

.ambient {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}
.ambient-one { width: 300px; height: 300px; background: rgba(255, 255, 255, .72); top: 22%; left: 9%; }
.ambient-two { width: 360px; height: 360px; background: rgba(228, 190, 174, .34); bottom: 20%; right: 8%; }

.brand-header {
  text-align: center;
  width: min(520px, 92vw);
  margin-inline: auto;
  z-index: 2;
}
.logo {
  display: block;
  max-width: 260px;
  width: 72vw;
  margin: 0 auto 8px;
  filter: drop-shadow(0 12px 22px rgba(60, 42, 34, .1));
}
.tagline {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 2.2vw, 27px);
  letter-spacing: .04em;
  color: #3f332d;
}

.hero-content {
  width: min(1080px, 100%);
  margin: 10px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reveal-stage {
  position: relative;
  width: min(420px, 78vw);
  height: min(240px, 68vw);
  margin: 6px auto -4px;
}
.bottle {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  width: 42%;
  height: 66%;
  opacity: .38;
  animation: bottleGlow 5s ease-in-out infinite alternate;
}
.bottle-cap,
.bottle-neck,
.bottle-body { position: absolute; left: 50%; transform: translateX(-50%); }
.bottle-cap { top: 0; width: 32%; height: 12%; border-radius: 8px 8px 2px 2px; background: rgba(185,144,79,.28); }
.bottle-neck { top: 11%; width: 22%; height: 18%; background: rgba(255,255,255,.55); border: 1px solid rgba(185,144,79,.24); }
.bottle-body {
  bottom: 0;
  width: 100%;
  height: 74%;
  border-radius: 44% 44% 18% 18%;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(185,144,79,.16));
  border: 1px solid rgba(185,144,79,.28);
  box-shadow: inset 0 0 26px rgba(255,255,255,.7), 0 22px 60px rgba(124,89,70,.2);
}
.cloth-main {
  position: absolute;
  inset: 7% 4% 2%;
  background:
    linear-gradient(94deg, transparent 0 7%, rgba(255,255,255,.72) 12%, transparent 18% 22%, rgba(210,184,173,.38) 30%, transparent 38%),
    linear-gradient(120deg, rgba(255,255,255,.88), rgba(224,199,188,.82) 48%, rgba(255,246,240,.74));
  clip-path: polygon(45% 0, 56% 0, 72% 94%, 100% 98%, 74% 100%, 52% 94%, 29% 100%, 0 98%, 26% 94%);
  border-radius: 48% 48% 24% 24%;
  box-shadow: 0 45px 70px rgba(98,72,61,.24);
  animation: clothReveal 4.8s ease-in-out infinite alternate;
}
.cloth-shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 34px;
  border-radius: 50%;
  background: rgba(70, 50, 43, .16);
  filter: blur(14px);
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(45px, 7vw, 82px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 600;
}
.subtitle {
  margin: 18px auto 0;
  max-width: 700px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  color: #3d332f;
}

.features {
  width: min(840px, 96vw);
  margin: 30px auto 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
}
.feature {
  min-height: 92px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.55;
  font-weight: 600;
}
.feature + .feature { border-left: 1px solid var(--line); }
.icon { color: var(--gold); font-size: 32px; line-height: 1; }

.lead-card {
  width: min(760px, 96vw);
  padding: 28px;
  border: 1px solid rgba(124, 99, 88, .22);
  border-radius: 18px;
  background: rgba(255,255,255,.38);
  box-shadow: 0 25px 70px rgba(92, 62, 50, .1);
  backdrop-filter: blur(14px);
}
.lead-card h2 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(31px, 4vw, 44px);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.lead-card p {
  margin: 0 auto 22px;
  max-width: 520px;
  color: #443935;
  line-height: 1.55;
}
.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
input {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(80, 63, 56, .2);
  border-radius: 12px;
  background: rgba(255,255,255,.52);
  color: var(--ink);
  font: inherit;
  outline: none;
}
input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(185,144,79,.13); }
button,
.whatsapp {
  border-radius: 12px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
}
button {
  width: min(460px, 100%);
  margin-top: 18px;
  border: 0;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 14px 34px rgba(150,113,60,.24);
}
.whatsapp {
  width: min(760px, 96vw);
  margin: 20px auto 0;
  color: var(--green);
  border: 2px solid var(--green);
  background: rgba(255,255,255,.32);
}

.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 32px max(24px, 7vw) 24px;
  background: var(--footer);
  color: white;
  border-top: 4px solid var(--gold);
}
.contact { display: flex; flex-direction: column; gap: 12px; }
.contact a { color: white; text-decoration: none; }
.social { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.social a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
}
.copyright {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  text-align: center;
  color: var(--gold);
  font-size: 13px;
}

.petals span {
  position: absolute;
  width: 14px;
  height: 9px;
  border-radius: 100% 0 100% 0;
  background: rgba(226, 158, 151, .45);
  animation: petal 11s linear infinite;
  z-index: 0;
}
.petals span:nth-child(1) { left: 16%; top: 22%; animation-delay: -1s; }
.petals span:nth-child(2) { left: 78%; top: 18%; animation-delay: -3s; }
.petals span:nth-child(3) { left: 88%; top: 48%; animation-delay: -6s; }
.petals span:nth-child(4) { left: 7%; top: 62%; animation-delay: -8s; }
.petals span:nth-child(5) { left: 67%; top: 72%; animation-delay: -4s; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes curtainFloat {
  from { translate: 0 0; opacity: .58; }
  to { translate: 0 18px; opacity: .82; }
}
@keyframes clothReveal {
  from { transform: translateY(0) scale(1); filter: brightness(1); }
  to { transform: translateY(-8px) scale(1.015); filter: brightness(1.05); }
}
@keyframes bottleGlow {
  from { opacity: .25; }
  to { opacity: .48; }
}
@keyframes petal {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(280px) translateX(90px) rotate(280deg); opacity: 0; }
}

@media (max-width: 720px) {
  .hero { padding-top: 24px; }
  .logo { width: 82vw; }
  .features { grid-template-columns: 1fr; }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
  .input-grid { grid-template-columns: 1fr; }
  .lead-card { padding: 22px 16px; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .social { justify-content: center; }
}

/* --- V2 adjustments: preserve original layout, replace CSS-drawn bottle with generated reveal artwork, sticky footer --- */
body {
  padding-bottom: 128px;
}
.reveal-stage {
  position: relative;
  width: min(470px, 82vw);
  height: min(240px, 68vw);
  margin: 0 auto -10px;
  border-radius: 0 0 42% 42%;
  overflow: visible;
  isolation: isolate;
}
.reveal-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 126%;
  height: 126%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center 42%;
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(1.02);
  opacity: .92;
  clip-path: ellipse(42% 48% at 50% 50%);
  animation: softFloat 6s ease-in-out infinite alternate;
}
.stage-glow {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 5%;
  height: 42px;
  border-radius: 50%;
  background: rgba(70, 50, 43, .14);
  filter: blur(15px);
  z-index: -1;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, auto);
  padding: 22px max(24px, 7vw) 18px;
  box-shadow: 0 -18px 45px rgba(0,0,0,.16);
}
.contact {
  text-align: left;
}
.social {
  justify-content: flex-end;
  text-align: right;
  direction: ltr;
}
@keyframes softFloat {
  from { transform: translate(-50%, -50%) scale(1); filter: saturate(.9) contrast(1.02) brightness(1); }
  to { transform: translate(-50%, -52%) scale(1.015); filter: saturate(.95) contrast(1.04) brightness(1.03); }
}
@media (max-width: 720px) {
  body { padding-bottom: 190px; }
  .footer {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 18px 20px 14px;
  }
  .contact { text-align: center; }
  .social { justify-content: center; }
}