:root{
  --ink:#f4efe6;
  --ink-dim:#cabf9f;
  --bg-deep:#0e1a17;
  --bg-mid:#16281f;
  --gold:#d3a94f;
  --gold-soft:#e9cd8e;
  --line:rgba(211,169,79,0.25);
  --whatsapp:#3fae63;
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Poppins', sans-serif;
}

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

html,body{height:100%;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(ellipse at top, #1c3327 0%, var(--bg-deep) 55%, #08110e 100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}

.sunrise-glow{
  position:fixed;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:70vw;
  max-width:820px;
  height:60vw;
  max-height:700px;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(233,205,142,0.16) 0%, rgba(211,169,79,0.07) 40%, transparent 70%);
  animation:sunriseBreathe 10s ease-in-out infinite;
}

@keyframes sunriseBreathe{
  0%,100%{opacity:0.7; transform:translateX(-50%) scale(1);}
  50%{opacity:1; transform:translateX(-50%) scale(1.06);}
}

.bg-pattern{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 15% 20%, var(--line) 0, transparent 2px),
    radial-gradient(circle at 85% 15%, var(--line) 0, transparent 2px),
    radial-gradient(circle at 75% 80%, var(--line) 0, transparent 2px),
    radial-gradient(circle at 10% 85%, var(--line) 0, transparent 2px),
    radial-gradient(circle at 50% 8%, rgba(211,169,79,0.12) 0%, transparent 3%),
    radial-gradient(circle at 50% 8%, rgba(211,169,79,0.08) 0%, transparent 6%),
    radial-gradient(circle at 50% 8%, rgba(211,169,79,0.05) 0%, transparent 9%);
  background-size:100% 100%;
  opacity:0.6;
}

.wrapper{
  position:relative;
  z-index:1;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:4.5rem 1.75rem 3rem;
  text-align:center;
}

.gateway-motif{
  position:absolute;
  top:0.5rem;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  height:auto;
  color:var(--gold);
  opacity:0.16;
  pointer-events:none;
}

.brand{
  margin-bottom:2rem;
  position:relative;
  z-index:2;
}

.brand-mark{
  display:block;
  height:64px;
  width:auto;
  margin:0 auto 0.85rem;
}

.brand-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.2rem, 5.6vw, 3.1rem);
  letter-spacing:0.02em;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero{
  margin-bottom:2.25rem;
}

.eyebrow{
  display:inline-block;
  font-size:0.7rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--bg-deep);
  background:var(--gold);
  padding:0.45rem 1.1rem;
  border-radius:999px;
  margin-bottom:1.4rem;
  font-weight:500;
}

.headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.9rem, 4.6vw, 2.8rem);
  line-height:1.2;
  color:var(--ink);
  margin-bottom:1.1rem;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.lede{
  font-size:0.98rem;
  color:var(--ink-dim);
  max-width:480px;
  margin:0 auto;
}

.identifier{
  margin-bottom:2rem;
}

.identifier-main{
  display:inline-block;
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:0.6rem 0;
}

.notify{
  margin-bottom:1.75rem;
}

.notify-form{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  max-width:400px;
  margin:0 auto;
}

.notify-form input{
  width:100%;
  padding:0.85rem 1.1rem;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(244,239,230,0.05);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:0.92rem;
  outline:none;
  transition:border-color 0.2s ease;
}

.notify-form input::placeholder{
  color:var(--ink-dim);
}

.notify-form input:focus{
  border-color:var(--gold);
}

.notify-form button{
  margin-top:0.3rem;
  padding:0.9rem 1.5rem;
  border-radius:8px;
  border:none;
  background:var(--gold);
  color:var(--bg-deep);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s ease, transform 0.15s ease;
}

.notify-form button:hover{
  background:var(--gold-soft);
  transform:translateY(-1px);
}

.consent{
  margin-top:0.85rem;
  font-size:0.76rem;
  color:var(--ink-dim);
  opacity:0.8;
  max-width:380px;
  margin-left:auto;
  margin-right:auto;
}

.form-status{
  margin-top:0.75rem;
  font-size:0.85rem;
  color:var(--gold-soft);
  min-height:1.2em;
}

.cta-row{
  display:flex;
  justify-content:center;
  gap:0.75rem;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.7rem 1.3rem;
  border-radius:999px;
  border:1px solid var(--whatsapp);
  color:var(--whatsapp);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cta-btn:hover{
  background:var(--whatsapp);
  color:var(--ink);
  transform:translateY(-1px);
}

.cta-btn-ghost{
  border-color:var(--line);
  color:var(--ink-dim);
}

.cta-btn-ghost:hover{
  background:transparent;
  border-color:var(--gold);
  color:var(--gold-soft);
}

.microcopy{
  font-size:0.82rem;
  color:var(--ink-dim);
  opacity:0.85;
  margin-bottom:2.25rem;
}

.contact{
  margin-bottom:1.75rem;
  font-size:0.88rem;
}

.contact-label{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0.75;
  margin-bottom:0.5rem;
}

.contact-item{
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}

.contact-item:hover{
  color:var(--gold-soft);
  border-color:var(--gold-soft);
}

.dot{
  margin:0 0.6rem;
  color:var(--line);
}

.social{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-bottom:2.5rem;
}

.social-link{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-dim);
  transition:color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.social-link svg{
  width:17px;
  height:17px;
}

.social-link:hover{
  color:var(--gold-soft);
  border-color:var(--gold);
  transform:translateY(-2px);
}

.footer{
  font-size:0.75rem;
  color:rgba(202,191,159,0.55);
  letter-spacing:0.02em;
}

.disclaimer{
  max-width:480px;
  margin:0 auto 0.9rem;
  font-size:0.72rem;
  line-height:1.6;
  color:rgba(202,191,159,0.5);
}

.legal-links{
  margin-bottom:0.75rem;
  font-size:0.75rem;
}

.legal-links a{
  color:var(--ink-dim);
  text-decoration:none;
}

.legal-links a:hover{
  color:var(--gold-soft);
}

.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 fadeInUp{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}

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

@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(211,169,79,0.45);}
  50%{box-shadow:0 0 0 8px rgba(211,169,79,0);}
}

.brand,.identifier,.notify,.cta-row,.microcopy,.contact,.social,.footer{
  animation:fadeInUp 0.8s ease both;
}

.headline{
  animation:revealHeadline 1.3s ease both;
}

.lede{
  animation:fadeInUp 0.9s ease both;
  animation-delay:0.3s;
}

.brand{animation-delay:0.05s;}
.headline{animation-delay:0.25s;}
.identifier{animation-delay:0.45s;}
.notify{animation-delay:0.55s;}
.cta-row{animation-delay:0.65s;}
.microcopy{animation-delay:0.75s;}
.contact{animation-delay:0.85s;}
.social{animation-delay:0.95s;}
.footer{animation-delay:1.05s;}

.eyebrow{
  animation:pulseGlow 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .brand,.identifier,.notify,.cta-row,.microcopy,.contact,.social,.footer,.headline,.lede{animation:none;}
  .eyebrow,.sunrise-glow{animation:none;}
}

@media (max-width:480px){
  .wrapper{
    padding:3.5rem 1.25rem 2.5rem;
  }
  .gateway-motif{
    width:160px;
  }
}