body { background:#000; color:#fff; font-family: Montserrat, sans-serif}
.hero { min-height: 50vh; display:flex; align-items:center; justify-content:center;}
.tile {
    background:#0b0b0b; border:1px solid #222; border-radius:14px;
    padding:2rem; text-align:center; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover { transform: translateY(-2px); border-color:#444; box-shadow:0 .75rem 1.25rem rgba(0,0,0,.35); }
.tile .icon { font-size:56px; line-height:1; color:var(--atomic-tangerine); }
.tile .label { margin-top:.75rem; font-weight:600; letter-spacing:.2px; }
.sub { color:#aaa; font-size:.95rem; margin-top:.25rem; }
.brand-row { gap:1rem }
a.tile { text-decoration:none; color:inherit }
.muted { color:#999 }

.card { background:#0b0b0b; border:1px solid #222; border-radius:14px; }
.card .text-secondary { color:#aaa !important; }
.btn-outline-secondary { color:#ddd; border-color:#bbb; }
.btn-outline-secondary:hover { background:#ddd; color:#000; }
/* media never stretches */
.media-frame{
    aspect-ratio:16/9; width:100%;
    background:#000; display:flex; align-items:center; justify-content:center;
    overflow:hidden; border-bottom:1px solid #222;
}
.media-el{
    max-width:100%; max-height:100%;
    width:auto; height:auto; object-fit:contain; display:block; background:#000;
}
.media-placeholder{
    width:100%; height:100%;
    background:repeating-linear-gradient(45deg,#0b0b0b,#0b0b0b 10px,#000 10px,#000 20px);
}