/* /css/band-landing.css */
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; color: white; background: #0b0d12; overflow-x: hidden; }

.container { max-width: 1100px; margin: auto; padding: 20px; text-align: center; }
.back { display: inline-block; margin-bottom: 20px; color: #ccc; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.back:hover { color: white; }

.logo { display: block; margin: 10px auto 20px; max-width: 160px; height: auto; }
h1 { font-size: 48px; margin-bottom: 10px; letter-spacing: -1px; }
.subtitle { color: #aaa; margin-bottom: 30px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; text-align: left; }
.card { background: rgba(23, 27, 34, 0.8); border-radius: 14px; overflow: hidden; transition: transform 0.2s ease, background 0.2s; border: 1px solid #222; }
.card:hover { transform: translateY(-5px); background: rgba(35, 41, 52, 1); border-color: #444; }

.card-body { padding: 20px; }
.card-body h3 { margin: 0 0 6px; font-size: 1.4rem; }
.meta { color: #888; font-size: 14px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }

a { text-decoration: none; color: white; }

@media (max-width: 700px) {
    .logo { display: none; }
    h1 { font-size: 32px; }
    /* Your logo watermark effect */
    body::before {
        content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: url("../images/cs-logo.png") no-repeat center 80px;
        background-size: 90vw auto; opacity: 0.15; pointer-events: none; z-index: 0;
    }
    .container { position: relative; z-index: 1; }
}