:root{
  /* Fundo da página (degradê como a imagem) */
  --bg-top: #45A9C0;
  --bg-bottom: #071C7A;

  /* Cores e tokens */
  --text: #ffffff;
  --text-muted: #DDE8FF;
  --maxw: 760px;

  /* Glass base */
  --glass-bg1: rgba(255,255,255,.16);
  --glass-bg2: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.45);
  --glass-shadow: rgba(0,0,0,.25);
}

*{ box-sizing: border-box }
html,body{ height: 100% }
body{
    background: var(--bg-top);
    min-height: 100%;
  margin: 0;
  color: var(--text);
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.wrap{
    
  width: 100%;
  min-height: 100%;
  max-width: var(--maxw);
  padding-inline: clamp(16px, 4vw, 28px);
  padding-block: clamp(28px, 6vw, 44px);
  text-align: center;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

/* LOGO como imagem */
.logo{
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 16px;
  border: 6px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 28px var(--glass-shadow);
}

h1{
  margin: 0 0 6px;
  font-size: clamp(22px, 4.4vw, 28px);
  line-height: 1.2;
  font-weight: 700;
}

.subtitle{
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(14px, 2.8vw, 16px);
  line-height: 1.45;
}

/* LISTA DE BOTÕES */
.list{
  margin-top: clamp(18px, 4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* BOTÃO VIDRO (glassmorphism) */
.item{
  display: grid;
  place-items: center;          /* centraliza o texto no meio */
  padding: 25px 20px;
  min-height: 60px;
  width: 100%;
  color: var(--text);
  text-decoration: none;
  text-align: center;
  border-radius: 9999px;

  /* vidro: levemente translúcido + blur + borda */
  background: linear-gradient(180deg, var(--glass-bg1), var(--glass-bg2));
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  box-shadow: 0 10px 20px var(--glass-shadow);

  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.25;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.item:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  box-shadow: 0 14px 26px var(--glass-shadow);
}

.item:active{ transform: translateY(0); }

.item:focus-visible{
  outline: 3px solid #c9ddff;
  outline-offset: 3px;
}

/* Desktop */
@media (min-width: 880px){
    body {
        background: #fff;
    }

    .wrap {
        width: 100%;
        max-width: none;
        padding-inline: 33%;
    }

  .item{ padding: 20px 26px; min-height: 64px; }
  .logo{ width: 120px; height: 120px; }
}