* { box-sizing: border-box; }
:root {
  --green: #173d34;
  --gold: #e8c766;
  --sage: #dce8df;
  --ink-soft: #65736d;
  --paper: #fbfbf8;
}
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--green);
  background: var(--paper);
  font-family: "Nunito", "Avenir Next", Arial, sans-serif;
}
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 22px 24px;
  position: relative;
  overflow: hidden;
}
.page::before, .page::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .24;
  pointer-events: none;
}
.page::before { background: var(--gold); top: -145px; right: -75px; }
.page::after { background: var(--sage); bottom: -155px; left: -75px; }
.content {
  width: min(100%, 680px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.logo {
  display: block;
  width: min(100%, 560px);
  height: auto;
  mix-blend-mode: multiply;
  margin-bottom: 20px;
}
.intro {
  font-size: clamp(1.05rem, 2.7vw, 1.3rem);
  color: var(--ink-soft);
  margin: 8px 0 24px;
}
.divider { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; }
.divider span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.divider span:nth-child(2) { background: #b9cfc2; }
.divider span:nth-child(3) { background: var(--green); }
.coming {
  color: var(--ink-soft);
  font-size: 1rem;
  letter-spacing: .06em;
  margin: 0 0 4px;
}
h1 {
  font-size: clamp(2.8rem, 9vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 0;
  font-weight: 800;
}
.motto {
  margin: 18px 0 30px;
  color: var(--ink-soft);
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.motto span { color: var(--gold); padding: 0 5px; }
.facebook {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
  border: 1px solid #cbd8cf;
  border-radius: 999px;
  padding: 12px 21px;
  text-decoration: none;
  font-weight: 700;
  transition: background .2s, transform .2s;
}
.facebook:hover { background: #edf2ed; transform: translateY(-2px); }
footer {
  position: absolute;
  bottom: 18px;
  z-index: 1;
  color: #8b9790;
  font-size: .8rem;
}
@media (max-width: 480px) {
  .page { padding-top: 28px; padding-bottom: 55px; }
  .logo { margin-bottom: 12px; }
  .intro { margin-top: 4px; }
  .motto { font-size: .78rem; letter-spacing: .08em; }
}