:root{
  --bg: #070A12;
  --fg: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --glass: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(86, 255, 214, .07), transparent 60%),
              radial-gradient(900px 600px at 20% 80%, rgba(130, 135, 255, .06), transparent 55%),
              var(--bg);
  color: var(--fg);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Canvas a pantalla completa */
#bg{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Contenido centrado */
.wrap{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* Tarjeta elegante */
.card{
  width: min(640px, 92vw);
  text-align: center;
  padding: 34px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.logo{
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

h1{
  margin: 0 0 10px;
  letter-spacing: 0.18em;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
}

p{
  margin: 0;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-size: clamp(12px, 1.8vw, 14px);
  line-height: 1.6;
}

/* Pequeño “glow” sutil alrededor del bloque */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 24px;
  background: radial-gradient(500px 220px at 50% 0%, rgba(86,255,214,.12), transparent 60%),
              radial-gradient(420px 240px at 100% 100%, rgba(130,135,255,.10), transparent 60%);
  z-index: -1;
  filter: blur(18px);
  opacity: .9;
}