:root{
  --ink:#5C59E8;          /* lilás suave */
  --text:#1d1c2b;         /* texto principal */
  --muted:#6b6a84;        /* texto secundário */
  --surface:#ffffff;      /* cartões/fundo branco */
  --radius:18px;
  --shadow: 0 12px 40px rgba(17,16,31,.10);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  color: var(--text);
  background: #f6f4ff;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:74vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding: clamp(24px, 5vw, 64px);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(19,18,35,.35), rgba(19,18,35,.55)),
    url("./assets/banner-hero.jpg") center/cover no-repeat;
  z-index:-2;
  filter:saturate(1.05) contrast(1.02);
}
.glow{
  position:absolute; inset:-20% -10%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(92,89,232,.35), transparent 70%);
  z-index:-1; filter: blur(20px);
}
.hero-inner{ max-width:1100px; margin:auto; }
.logo{
  width: clamp(260px, 40vw, 480px);  /* << maior */
  height:auto; margin:0 auto 18px auto; display:block;
  filter: drop-shadow(0 12px 36px rgba(92,89,232,.45));
}

/* Badges das lojas */
.badges{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:18px 0 8px; }
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  color:#fff; font-weight:600; font-size:15px;
}
.badge img{
  width:20px; height:20px; display:block; filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.note{ font-size:13px; opacity:.9; }

/* ---------- SECTION ---------- */
.section{
  position: relative;
  background:#fff;
  margin: 0 auto 64px;           /* remove o negativo e dá espaçamento natural */
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  max-width: 1040px;
  box-shadow: var(--shadow);
  z-index: 1;
}

.hero {
  margin-bottom: -60px;          /* cria uma leve fusão visual sem sobrepor conteúdo */
}

body {
  background: linear-gradient(#eae7ff, #f6f4ff 120%);
}

.grid{ display:grid; gap:22px; grid-template-columns:1fr; }
.card{
  padding:20px 22px; border:1px solid #eee; border-radius:16px; background:#fff;
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
}
.card .icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(92,89,232,.08);
  border:1px solid rgba(92,89,232,.18);
}
.card .icon img{
  width:22px; height:22px; display:block;
}
.card h3{ margin:0 0 6px; font-size:18px; }
.card p{ margin:0; color:#4b4960; line-height:1.65; }

/* ---------- FOOTER ---------- */
.footer{ padding:28px 18px 42px; text-align:center; color:var(--muted); font-size:14px; }
.footer a{ color:var(--ink); text-decoration:none; }

/* ---------- RESPONSIVO ---------- */
@media (min-width:820px){
  .grid{ grid-template-columns:repeat(3,1fr); }
  .section{ padding:42px; }
}

/* --- Store badges lado a lado --- */
.store-badges{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin: 12px 0 8px;
}
.store-badges img{
  height: 48px;           /* tamanho menor */
  width: auto;
  border-radius:10px;     /* suaviza as quinas do PNG */
  box-shadow: 0 6px 18px rgba(17,16,31,.18);
}
@media (min-width:820px){
  .store-badges img{ height: 56px; } /* um pouco maior no desktop */
}