*{box-sizing:border-box}
:root{
  --blue:#dfefff;
  --beige:#f7f3ea;
  --ink:#1f3a4a;
  --mint:#9fd3c7;
  --card:#ffffff;
}
html,body{height:100%}
body{ margin:0; font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,var(--blue),var(--beige)); color:var(--ink); display:flex; flex-direction:column }
header{ padding:14px 12px; background:#ffffff88; backdrop-filter: blur(4px); border-bottom:1px solid #e3e8ee }
.brand{ display:flex; align-items:center; gap:12px; justify-content:center }
.cube{ font-size:2rem }
.title h1{ margin:0; font-size:1.6rem }
.subtitle{ margin:.2rem 0 0; opacity:.8 }

main{ flex:1; max-width:1200px; width:100%; margin:0 auto; padding:16px }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px }
.card{
  display:block; text-decoration:none; color:inherit; background:var(--card);
  padding:16px; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.08);
  border:2px solid transparent; transition: transform .12s, border-color .12s, box-shadow .12s
}
.card:hover{ transform: translateY(-2px); border-color: var(--mint); box-shadow:0 10px 28px rgba(0,0,0,.12) }
.card-icon{ font-size:2.2rem; margin-bottom:6px }
.card h2{ margin:.2rem 0 .2rem }
.card p{ margin:.2rem 0 .4rem; opacity:.9 }
.card ul{ padding-left:1.1rem; margin:.2rem 0; text-align:left }
footer{ text-align:center; padding:12px; color:#556 }