@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:'Manrope', sans-serif;
  background:#f5f3ff;
  color:#4f46e5;
}

nav {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

nav a {
  text-decoration:none;
  padding:12px 18px;
  border-radius:14px;
  background:#ec4899;
  color:white;
  font-weight:700;
}

.hero {
  padding:86px 8%;
}

.hero h1 {
  font-size:54px;
  line-height:1;
  max-width:700px;
}

section {
  margin:24px auto;
  max-width:1280px;
}

.card {
  padding:30px;
  border-radius:24px;
}


.bento {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:40px;
}
.card {
min-height:220px;
background:white;
}
.card:first-child {
grid-column:span 2;
grid-row:span 2;
background:#4f46e5;
color:white;
}