/* Screenshot cards — dark OS previews on light page */
.shot {
    background: linear-gradient(135deg, #1a1f2e, #111827);
    border: 1px solid rgba(0,0,0,0.1);
    position: relative; overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    transition: all 0.3s;
}
.shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}
.shot::before {
    content: '';
    position: absolute; top: 8px; left: 12px; right: 12px; height: 22px;
    background: linear-gradient(90deg, #22afd4, #9734c6, #e2a672);
    border-radius: 11px 11px 0 0;
    opacity: 0.7;
}

.shot-desktop {
    background:
        radial-gradient(circle at 25% 75%, rgba(34,175,212,0.2), transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(151,52,198,0.12), transparent 40%),
        linear-gradient(135deg, #1a1f2e, #111827);
}
.shot-installer {
    background:
        radial-gradient(circle at 60% 40%, rgba(151,52,198,0.15), transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(226,166,114,0.1), transparent 40%),
        linear-gradient(135deg, #1a1f2e, #111827);
}
.shot-terminal {
    background:
        radial-gradient(circle at 80% 20%, rgba(34,175,212,0.12), transparent 40%),
        linear-gradient(135deg, #1a1f2e, #111827);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 12px; color: #22afd4;
}
.shot-monitor {
    background:
        radial-gradient(circle at 70% 30%, rgba(226,166,114,0.18), transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(151,52,198,0.12), transparent 40%),
        linear-gradient(135deg, #1a1f2e, #111827);
}