:root{
  --bg-start:#f7ecd7;
  --bg-end:#efe0c1;
  --card:#bfa27a; /* Castanho claro elegante */
  --text:#2a1b0e; /* Castanho escuro para texto */
  --accent:#2a1b0e;
}

*{box-sizing:border-box}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1000px 600px at 20% 10%, var(--bg-end), transparent 60%),
              radial-gradient(900px 500px at 80% 80%, var(--bg-end), transparent 60%),
              linear-gradient(180deg, var(--bg-start), var(--bg-end));
  display:grid;
  place-items:center;
  overflow:hidden;
}

.container{
  width:min(680px, 92vw);
  background:var(--card);
  border-radius:24px;
  padding:40px 28px 48px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .9s ease-out both, float 6s ease-in-out 1.5s infinite;
}

.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:22px;
}

.logo{
  max-width:min(440px, 86vw);
  width:100%;
  height:auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.2));
  animation: slideUp .7s ease-out both;
}

.title{
  text-align:center;
  font-weight:600;
  letter-spacing:.2px;
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 4px 0 10px;
  animation: fadeIn .9s .15s ease-out both;
}

.subtitle{
  text-align:center;
  font-size: clamp(16px, 1.8vw, 18px);
  opacity:.85;
  animation: fadeIn .9s .3s ease-out both;
}

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin: 14px auto 0;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background: #c9a981; /* Castanho claro */
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  font-size:14px;
  animation: pop .6s .45s ease-out both;
}

.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}

.footer{
  position:fixed;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  opacity:.7;
  color:var(--text);
}

@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
@keyframes slideUp{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{opacity:.3; transform:scale(.9)}50%{opacity:1; transform:scale(1)}}