/* PixFlex – styles.css */
:root{
  --bg: #0f1115;
  --card: #141823;
  --text: #9aa5b1;
  --muted: #9aa5b1;
  --radius: 16px;

  /* Cores de marca (aprox.) */
  --bradesco: #CC092F;
  --caixa: #0C79C1;
  --bb: #FFCC00;
  --bb-accent: #1A3C8A;
  --nubank: #820AD1;
  --pagseguro: #00C34E;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol', sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2030 0%, #0e1016 50%, #0a0c10 100%);
  color:var(--text);
}

.container{width:min(1080px, 92%); margin-inline:auto}

.header{
  display:flex; align-items:center; justify-content:flex-start;
  padding:60px 0 8px;
}
.brand{display:flex; align-items:center; gap:16px}
.logo{width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); border-radius:50%}
h1{margin:0; font-weight:800; letter-spacing:.2px; font-size: clamp(28px, 5vw, 40px)}
h1 span{font-weight:800; opacity:.9}

.subtitle{margin:.125rem 0 0; color:var(--muted); font-weight:600}

.hero{
  margin: 28px 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.hero h2{margin: 0 0 8px}
.hero p{color:var(--text); opacity:.95; margin:0 0 8px; line-height:1.6}
.hero .bullets{margin:12px 0 0; padding-left:18px; color:var(--muted)}

.buttons-wrap{margin: 18px 0 32px}
.buttons-wrap h2{margin-bottom:12px}

.grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
  gap: 18px;
}

.btn{
  position:relative;
  isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  height:84px;
  border-radius: 999px;
  text-decoration:none;
  background: var(--card);
  border:1px solid rgba(255,255,255,.06);
  color: var(--text);
  overflow:hidden;
  padding:0 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.btn__label{display:flex; flex-direction:column; align-items:center; text-align:center}
.btn strong{font-size:18px; letter-spacing:.2px}
.btn small{color:var(--muted)}

.btn:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.14) }

/* Pulse ring (efeito hover) */
.pulse .btn__ring{
  position:absolute; inset:0;
  border-radius:inherit;
  z-index:-1;
  background: radial-gradient(60% 60% at 50% 50%, var(--ring, #22d3ee) 0%, transparent 70%);
  opacity:.0;
  transform: scale(.9);
  transition: opacity .25s ease, transform .25s ease;
  filter: blur(12px);
}
.pulse::after, .pulse::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-2;
  background: conic-gradient(from 180deg, transparent, var(--ring, #22d3ee), transparent 60%);
  opacity:.0; transform: rotate(0deg);
  transition: opacity .25s ease;
}
.pulse:hover .btn__ring{ opacity:.8; transform: scale(1) }
.pulse:hover::after{ animation: spin 1.8s linear infinite; opacity:.25 }
.pulse:hover::before{ animation: spin 2.4s linear infinite reverse; opacity:.15 }

@keyframes spin { to { transform: rotate(360deg) } }

/* Bancos: cores e gradientes */
.bank-bradesco{ --ring: var(--bradesco); background:
  linear-gradient(180deg, rgba(204,9,47,.18), rgba(204,9,47,.04)) , var(--card);
}
.bank-caixa{ --ring: var(--caixa); background:
  linear-gradient(180deg, rgba(12,121,193,.18), rgba(12,121,193,.04)) , var(--card);
}
.bank-bb{ --ring: var(--bb); background:
  linear-gradient(180deg, rgba(255,204,0,.22), rgba(26,60,138,.05)) , var(--card);
}
.bank-nu{ --ring: var(--nubank); background:
  linear-gradient(180deg, rgba(130,10,209,.22), rgba(130,10,209,.05)) , var(--card);
}
.bank-pags{ --ring: var(--pagseguro); background:
  linear-gradient(180deg, rgba(0,195,78,.22), rgba(0,195,78,.05)) , var(--card);
}

.hint{
  margin-top:10px; color:var(--muted);
  font-size:.95rem;
}
code{background: rgba(255,255,255,.06); padding:.15rem .4rem; border-radius:6px}

/* Footer */
.footer{ padding: 22px 0 40px; color:var(--muted) }