:root{
  --ink:#0b1f24;
  --sand:#f4ede4;
  --gold:#c9a24a;
  --gold-soft:#e0c98a;
  --sea-1:#07272e;
  --sea-2:#0e4a4f;
  --sea-3:#176b64;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--sea-1);
  color:var(--sand);
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- backdrop ---------- */
.sky{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(23,107,100,.55) 0%, transparent 60%),
    radial-gradient(90% 60% at 78% 8%, rgba(224,201,138,.20) 0%, transparent 55%),
    linear-gradient(175deg,#04191e 0%,var(--sea-1) 38%,var(--sea-2) 78%,#0a3a3d 100%);
}
.sun{
  position:fixed; z-index:0;
  top:9vh; right:12vw;
  width:min(30vw,240px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,226,190,.55) 0%,rgba(201,162,74,.28) 45%,transparent 70%);
  filter:blur(6px);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

.waves{position:fixed;left:0;right:0;bottom:0;z-index:0;height:38vh;min-height:220px;pointer-events:none}
.waves svg{position:absolute;bottom:0;width:220%;height:100%}
.w1{opacity:.30;animation:drift 26s linear infinite}
.w2{opacity:.22;animation:drift 38s linear infinite reverse}
.w3{opacity:.45;animation:drift 52s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
main{
  position:relative; z-index:2;
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(2rem,6vw,4rem) 1.25rem;
  gap:clamp(1.25rem,3vw,2rem);
}

.eyebrow{
  font-size:clamp(.62rem,1.7vw,.78rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:400;
  padding-left:.42em;
}

h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:clamp(2.6rem,9vw,6.2rem);
  line-height:1.02;
  letter-spacing:.005em;
}
h1 .line2{display:block;font-style:italic;color:var(--gold-soft)}

.rule{
  width:min(180px,42vw); height:1px; border:0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.8;
}

.tagline{
  max-width:34ch;
  font-size:clamp(1rem,2.6vw,1.3rem);
  font-weight:300; line-height:1.6;
  color:rgba(244,237,228,.86);
}

.badge{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:clamp(.6rem,1.6vw,.72rem);
  letter-spacing:.3em; text-transform:uppercase;
  padding:.7rem 1.4rem;
  border:1px solid rgba(201,162,74,.45);
  border-radius:999px;
  color:var(--gold-soft);
  background:rgba(201,162,74,.06);
  backdrop-filter:blur(6px);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- notify ---------- */
form{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  width:min(460px,100%); margin-top:.25rem;
}
input[type=email]{
  flex:1 1 240px; min-width:0;
  font:inherit; font-weight:300; font-size:.95rem;
  padding:.95rem 1.2rem;
  color:var(--sand);
  background:rgba(244,237,228,.06);
  border:1px solid rgba(244,237,228,.18);
  border-radius:4px;
  transition:border-color .25s,background .25s;
}
input[type=email]::placeholder{color:rgba(244,237,228,.42)}
input[type=email]:focus{outline:none;border-color:var(--gold);background:rgba(244,237,228,.10)}
button{
  font:inherit; font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 1.7rem;
  color:var(--ink); background:var(--gold);
  border:0; border-radius:4px; cursor:pointer;
  transition:background .25s,transform .15s;
}
button:hover{background:var(--gold-soft)}
button:active{transform:translateY(1px)}
.note{
  font-size:.75rem; letter-spacing:.06em;
  color:rgba(244,237,228,.5); min-height:1.2em;
}
.note.ok{color:var(--gold-soft)}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:2;
  padding:1.5rem 1.25rem 2rem;
  text-align:center;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,237,228,.42);
}
.locales{margin-bottom:.75rem;color:rgba(244,237,228,.34);letter-spacing:.2em}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.22,.8,.3,1) forwards}
.d1{animation-delay:.10s}.d2{animation-delay:.25s}.d3{animation-delay:.40s}
.d4{animation-delay:.55s}.d5{animation-delay:.70s}.d6{animation-delay:.85s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}