body{font-family:Arial;background:#f5f7fa;margin:0}
.top{background:#0B1A2D;color:white;padding:20px}
.wrap{max-width:1400px;margin:auto;padding:20px}

.layer{margin-bottom:30px}
.layer h2{margin-bottom:10px}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
}

.tile{
border-radius:16px;
padding:18px;
cursor:pointer;
backdrop-filter:blur(10px);
box-shadow:0 10px 25px rgba(0,0,0,.1);
transition:.15s;
}

.tile:hover{transform:translateY(-2px)}

.badge{
background:white;
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:bold;
display:inline-block;
margin-bottom:10px;
}

.red{background:#f4c9c9}
.orange{background:#f6d7b2}
.yellow{background:#f7eba9}
.green{background:#cde7d0}
.purple{background:#e1d3f0}
.gray{background:#e2e8f0}