*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Nunito",system-ui,sans-serif;
  color:#2b2440;
  min-height:100vh;
  background:linear-gradient(160deg,#ffe6f2 0%,#fff3d9 45%,#e3f3ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}

.wrap{width:100%;max-width:760px;text-align:center}

/* ---- header ---- */
.head{margin-bottom:40px}
.logo{
  font-family:"Baloo 2",cursive;
  font-weight:800;
  font-size:clamp(48px,12vw,86px);
  line-height:1;
  background:linear-gradient(90deg,#ff6fae,#ff9d4d,#6fb8ff);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-1px;
}
.tagline{
  font-size:clamp(16px,3.4vw,20px);
  font-weight:600;
  color:#6b6480;
  margin-top:10px;
}

/* ---- kort ---- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px;
}
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border-radius:22px;
  padding:30px 18px 26px;
  box-shadow:0 10px 26px rgba(120,90,160,.16);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 16px 34px rgba(120,90,160,.24);
}
.card-emoji{font-size:48px;line-height:1}
.card-title{font-family:"Baloo 2",cursive;font-weight:700;font-size:24px}
.card-text{font-size:15px;color:#8a8398}

/* lidt forskellige farvekanter pr. kort */
.card-selfie{border-bottom:6px solid #ff6fae}
.card-jukebox{border-bottom:6px solid #ff9d4d}
.card-soon{
  border-bottom:6px solid #c9c2db;
  opacity:.7;
  cursor:default;
}
.card-soon:hover{transform:none;box-shadow:0 10px 26px rgba(120,90,160,.16)}

/* ---- footer ---- */
.foot{margin-top:46px;color:#9a93ad;font-size:15px;font-weight:600}