/* Buzzora Universe - Coming Soon */
:root{
  --bg:#0b0b0d;
  --card:#121216;
  --muted:#8a8a95;
  --accent:#64ffe1;
  --text:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(100,255,225,0.12), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(100,255,225,0.08), transparent 60%),
    linear-gradient(180deg, #0b0b0d, #0b0b0d);
  background-color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.container{width:100%;max-width:960px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border-radius:20px;
  padding:36px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.header{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.logo{
  width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;
  background: radial-gradient(120% 120% at 20% 20%, rgba(100,255,225,0.35), rgba(100,255,225,0.08) 60%, rgba(100,255,225,0.02));
  overflow:hidden;
}
.logo img{max-width:46px;max-height:46px;display:block;object-fit:contain;filter: drop-shadow(0 2px 6px rgba(100,255,225,0.3));}
.title{font-size:28px;line-height:1.2;letter-spacing:0.3px}
.kicker{color:var(--muted);font-size:14px;letter-spacing:2px;text-transform:uppercase}
h1{margin:16px 0 8px;font-size:42px;line-height:1.1}
p.lead{margin:0;color:#c9c9d0;font-size:18px}
.hr{margin:28px 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);border:0}
.row{display:grid;grid-template-columns: 1.4fr 1fr;gap:28px}
.module{background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px}
.badge{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(100,255,225,0.35);color:#BFFFF4;background: rgba(100,255,225,0.08);letter-spacing:1px}
.input-wrap{display:flex;gap:10px;margin-top:14px}
input[type="email"]{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:#0f0f13;color:var(--text);outline:none}
button{padding:12px 16px;border-radius:12px;border:1px solid rgba(100,255,225,0.5);color:#001712;background: linear-gradient(180deg, #64ffe1, #64d5ff);cursor:pointer;font-weight:600}
button:active{transform:translateY(1px)}
.meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:13px}
.countdown{display:flex;gap:10px;margin-top:14px}
.tile{flex:1;min-width:70px;text-align:center;padding:12px;border-radius:12px;background:#0f0f13;border:1px solid rgba(255,255,255,0.08)}
.tile .num{font-size:22px;font-weight:700}
.tile .lbl{font-size:11px;color:var(--muted);letter-spacing:1px}
.footer{margin-top:22px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.social a{margin-right:10px;text-decoration:none;color:#bfffea;border-bottom:1px dotted rgba(100,255,225,0.4)}
@media (max-width: 820px){h1{font-size:36px}.row{grid-template-columns: 1fr}}


/* Enhanced mobile responsiveness */
@media (max-width: 768px) {
  body {
    padding: 16px;
    align-items: flex-start;
  }
  .card {
    padding: 24px 20px;
  }
  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .logo {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
  }
  .title {
    font-size: 22px;
  }
  h1 {
    font-size: 30px;
    text-align: center;
  }
  p.lead {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }
  .row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .input-wrap {
    flex-direction: column;
  }
  input[type="email"] {
    width: 100%;
  }
  button {
    width: 100%;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}