:root{
  --color-bg-top:#eafbff;
  --color-bg-bottom:#bdeef5;
  --color-text-title:#0a0a0a;
  --color-text-tagline:#00404d;
  --color-text-subtitle:#3d6169;
  --color-text-footer:#2d5a62;
  --color-primary-bg:#007f9b;
  --color-primary-bg-strong:#00647a;
  --color-primary-text:#ffffff;
  --color-secondary-bg:#ffffff;
  --color-secondary-text:#0a0a0a;
  --color-card-border:#bfe9ef;
  --color-divider:#9fdce6;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  padding:28px 16px 40px;
  background:linear-gradient(180deg,var(--color-bg-top) 0%,var(--color-bg-bottom) 100%);
  color:var(--color-text-title);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  overflow-x:hidden;
}
.header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:440px;
  position:relative;
  z-index:1;
}
.logo{
  display:block;
}
.title{
  margin:0;
  font-size:1.5rem;
  color:var(--color-text-title);
}
.tagline{
  margin:2px 0 0;
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.35;
  color:var(--color-text-tagline);
}
.subtitle{
  margin:0;
  font-size:0.875rem;
  line-height:1.5;
  color:var(--color-text-subtitle);
}
.mascot-wrap{
  display:flex;
  justify-content:center;
  margin:8px 0 -18px;
  position:relative;
  z-index:1;
}
.mascot{
  width:132px;
  height:auto;
  filter:drop-shadow(0 14px 18px rgba(0,63,77,0.25));
}
.stage{
  position:relative;
  width:100%;
  max-width:420px;
  display:flex;
  justify-content:center;
  padding-top:36px;
  margin-top:16px;
}
.buttons{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
  max-width:420px;
  position:relative;
  z-index:1;
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:48px;
  padding:14px 20px;
  border-radius:14px;
  font-size:1.0625rem;
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
  border-bottom:3px solid transparent;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active{
  transform:translateY(2px);
}
.btn-whatsapp,
.btn-secondary{
  background:var(--color-secondary-bg);
  color:var(--color-secondary-text);
  border:1px solid var(--color-card-border);
  border-bottom:3px solid var(--color-card-border);
  box-shadow:0 6px 14px rgba(0,63,77,0.12);
}
.btn-whatsapp:active,
.btn-secondary:active{
  box-shadow:0 2px 6px rgba(0,63,77,0.12);
  border-bottom-width:1px;
}
.btn-primary{
  background:linear-gradient(180deg,var(--color-primary-bg) 0%,var(--color-primary-bg-strong) 100%);
  color:var(--color-primary-text);
  border-bottom:3px solid #004552;
  box-shadow:0 10px 22px rgba(0,100,122,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:active{
  box-shadow:0 4px 10px rgba(0,100,122,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  border-bottom-width:1px;
}
.footer{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  max-width:340px;
  padding-top:20px;
  border-top:1px solid var(--color-divider);
  font-size:0.8125rem;
  color:var(--color-text-footer);
  position:relative;
  z-index:1;
}
.footer-copy{
  margin:0;
}
.footer-links{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-links a{
  color:var(--color-text-footer);
}

@media (min-width:480px){
  .mascot{
    width:150px;
  }
}