:root{
  --surface-base:#F1F3F9;
  --surface-elevated:#FFFFFF;
  --accent:#6057DD;
  --accent-hover:#4D3DDB;
  --accent-soft:#F0EFFD;
  --text-primary:#1A2340;
  --text-secondary:#64748B;
  --border-base:#E2E8F0;
  --radius-xl:12px;
  --radius-card:28px;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.page{max-width:480px;margin:0 auto;}

/* Hero */
.hero{
  background:linear-gradient(to bottom right,#1A2340,#6057DD);
  color:#fff;
  border-radius:0 0 32px 32px;
  padding:48px 24px 40px;
  text-align:center;
}
.logo{
  width:88px;height:88px;margin:0 auto 16px;display:block;
  background:#fff;border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.25);
  box-shadow:var(--shadow-md);
}
.eyebrow{
  letter-spacing:.02em;
  font-size:14px;font-weight:600;
  color:rgba(255,255,255,.7);margin-bottom:12px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.01em;
}
.hero p{margin-top:14px;color:rgba(255,255,255,.82);font-size:15px;}

/* Banners */
.banners{
  list-style:none;
  display:flex;flex-direction:column;gap:16px;
  padding:28px 16px 8px;
}
.banner{
  position:relative;
  display:flex;align-items:center;gap:14px;
  aspect-ratio:27/10;
  background:var(--surface-elevated);
  border:1px solid var(--border-base);
  border-radius:var(--radius-card);
  padding:0 22px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  color:inherit;text-decoration:none;
  transition:box-shadow .15s,transform .15s;
}
.banner:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.banner:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(96,87,221,.6);}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Fallback exibido enquanto a imagem do banner não existe */
.banner-fallback{display:flex;align-items:center;gap:14px;width:100%;}
.banner-icon{
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--radius-xl);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:18px;
}
.banner-title{font-family:var(--font-display);font-size:16px;font-weight:700;line-height:1.2;}
.banner-desc{font-size:13px;color:var(--text-secondary);margin-top:2px;}
.banner-arrow{margin-left:auto;color:var(--accent);font-size:20px;}
.banner.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.banner.primary:hover{background:var(--accent-hover);}
.banner.primary .banner-icon{background:rgba(255,255,255,.15);color:#fff;}
.banner.primary .banner-desc{color:rgba(255,255,255,.82);}
.banner.primary .banner-arrow{color:#fff;}

.foot{text-align:center;color:var(--text-secondary);font-size:12px;padding:24px 16px 40px;}
.foot a{color:var(--accent);font-weight:600;text-decoration:none;}
.foot a:hover{text-decoration:underline;}

@media (max-width:480px){
  .hero h1{font-size:24px;}
}