/* ─────────────────────────────────────────────────────────
   Waine Bean & Brew — Coming Soon
   Brand tokens from WBB Site.html / Brand Brief.html
   ───────────────────────────────────────────────────────── */

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

:root {
  --brown:  #3e3025;
  --orange: #d77d32;
  --peach:  #fff5e0;
  --cream:  #fffef6;
  --gold:   #fccb6c;
  --green:  #1b3a2a;
  --text:   #21150b;
  --whatsapp: #25D366;
}

html, body { height: 100%; }

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(1100px 760px at 50% 26%, #4b3b2c 0%, var(--brown) 58%, #34281e 100%);
  color: var(--peach);
  display: flex; flex-direction: column;
  min-height: 100vh; overflow-x: hidden;
}

/* ── Watermark bean, bottom-right ── */
.watermark {
  position: fixed; right: -180px; bottom: -200px; width: 620px; height: 620px;
  opacity: 0.055; filter: brightness(0) invert(1);
  pointer-events: none; user-select: none;
}

/* ── Layout ── */
main {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 64px 24px 40px; position: relative; z-index: 2;
}

.logo {
  width: 128px; height: 128px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: 0.92;
  margin-bottom: 34px;
}

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 22px;
}

h1 {
  font-family: 'Gravitas One', serif;
  font-size: clamp(52px, 9vw, 96px); line-height: 1.02;
  color: var(--peach); margin-bottom: 24px;
}

.sub {
  font-size: 17px; line-height: 1.75; color: rgba(255,245,224,0.72);
  max-width: 470px; margin: 0 auto 40px;
}
.sub strong { color: var(--peach); font-weight: 600; }

/* ── Buttons (brand pill style, radius 40px) ── */
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 52px; }

.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--whatsapp); color: #fff;
  font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 40px; text-decoration: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  transition: background 0.2s, transform 0.15s;
}
.btn-whatsapp:hover { background: #1ebe58; transform: translateY(-2px); }
.btn-whatsapp svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }

.btn-peach-outline {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--peach);
  border: 2px solid rgba(255,245,224,0.4);
  font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px;
  padding: 12px 26px; border-radius: 40px; text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.btn-peach-outline:hover { border-color: var(--peach); background: rgba(255,245,224,0.08); }
.btn-peach-outline svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; }

/* ── Gold 5.0★ Google badge ── */
.badge { display: flex; align-items: center; gap: 14px; justify-content: center; }
.badge-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gold); color: var(--brown);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.badge-num { font-family: 'Gravitas One', serif; font-size: 18px; line-height: 1; }
.badge-stars { font-size: 9px; letter-spacing: 1px; margin-top: 2px; }
.badge-text { color: rgba(255,245,224,0.65); font-size: 13px; line-height: 1.5; text-align: left; }
.badge-text strong { color: var(--peach); display: block; font-size: 14px; }

/* ── Footer ── */
footer {
  position: relative; z-index: 2;
  padding: 22px 24px 26px; text-align: center;
  font-size: 12px; letter-spacing: 0.06em; color: rgba(255,245,224,0.42);
  border-top: 1px solid rgba(255,245,224,0.07);
}
footer .brand { color: rgba(255,245,224,0.6); }

/* ── Entrance animation (pure CSS, no JS dependency) ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
main > * { animation: fadeUp 0.7s ease both; }
main > *:nth-child(1) { animation-delay: 0.05s; }
main > *:nth-child(2) { animation-delay: 0.15s; }
main > *:nth-child(3) { animation-delay: 0.25s; }
main > *:nth-child(4) { animation-delay: 0.35s; }
main > *:nth-child(5) { animation-delay: 0.45s; }
main > *:nth-child(6) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  main > * { animation: none; }
}

/* ── Small screens ── */
@media (max-width: 520px) {
  .logo { width: 104px; height: 104px; margin-bottom: 28px; }
  .badge-text { font-size: 12px; }
}