:root{
  --bg1: #0f1724;
  --bg2: #0b3a2e;
  --accent: #f5b642;
  --muted: #cbd5e1;
  --card: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg1), var(--bg2));
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.bubbles span{position:absolute;bottom:-120px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.03);animation:rise 12s infinite ease-in;}
.bubbles span:nth-child(1){left:10%;width:90px;height:90px;animation-duration:16s}
.bubbles span:nth-child(2){left:30%;width:40px;height:40px;animation-duration:10s;animation-delay:2s}
.bubbles span:nth-child(3){left:50%;width:70px;height:70px;animation-duration:14s;animation-delay:4s}
.bubbles span:nth-child(4){left:70%;width:50px;height:50px;animation-duration:11s;animation-delay:1s}
.bubbles span:nth-child(5){left:85%;width:30px;height:30px;animation-duration:9s;animation-delay:3s}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.6}100%{transform:translateY(-130vh) scale(1.5);opacity:0}}
.card{position:relative;z-index:1;max-width:980px;width:100%;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:14px;padding:2.2rem;box-shadow:0 10px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px)}
.brand{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.logo{width:100%; height: 200px;display:flex;align-items:center;justify-content:center;color:#071321;font-weight:700;font-size:18px;overflow:hidden;padding:0}
/* background logo: fallback gradient + image centered */
.logo{background-repeat:no-repeat;background-position:center;background-size:70% 70%}

/* Retina: SVG é vetorial, mas manter fallback caso queira usar outra versão */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .logo{background-image: url("assets/logo.png")}
}
.brand-text h1{margin:0;font-size:1.1rem;color:#fff}
.brand-text .tag{margin:0;font-size:.9rem;color:var(--muted)}
.hero h2{font-size:2rem;margin:.4rem 0;color:#fff}
.lead{margin:0 0 1rem 0;color:var(--muted)}
.lead{margin:0 0 1rem 0;color:var(--muted)}
.social{display:flex;gap:.6rem;margin-top:1.2rem}
.social a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:.4rem;border-radius:8px;background:rgba(255,255,255,0.02)}
.foot{margin-top:1.6rem;color:rgba(203,213,225,0.6);font-size:.85rem}
@media (max-width:640px){
  .card{padding:1.4rem}
  .hero h2{font-size:1.4rem}
  .countdown{gap:.5rem}
  .countdown div{min-width:56px;padding:.6rem}
}