:root {
  --azul: #1e63d3;
  --vermelho: #e53935;
  --cinza: #e9ecef;
  --fundo-escuro: #0f1218;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background: radial-gradient(1200px 600px at 20% 30%, rgba(30, 99, 211, .25), transparent 60%),
              radial-gradient(1100px 600px at 80% 70%, rgba(229, 57, 53, .25), transparent 60%),
              linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 20%, #eef1f5 45%, #eaedf2 100%);
  color: #101113;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 0,
    rgba(0,0,0,0.04) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity: .35;
}

.wrapper {
  min-height: 100%;
  padding: clamp(16px, 4vw, 40px);
  display: grid;
  place-items: center;
}

.card {
  width: min(1100px, 92vw);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 28px;
  padding: clamp(20px, 4vw, 40px);
}

.logo {
  width: min(900px, 88vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.25));
}