body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1477346611705-65d1883cee1e?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
    background-size: cover;
}

.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(15px); /* Her skabes det slørede look */
}

.launchpad {
    position: relative; z-index: 10;
    height: 100vh; display: flex; align-items: center; justify-content: center;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 120px));
    gap: 40px; justify-content: center; width: 80%; max-width: 1000px;
}

.app-card {
    text-decoration: none; display: flex; flex-direction: column;
    align-items: center; transition: transform 0.2s ease;
}

.app-card:hover { transform: scale(1.1); }

.icon-container {
    width: 80px; height: 80px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; color: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.app-name { color: white; font-size: 14px; font-weight: 500; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* Farver til ikoner */
.color-blue { background: linear-gradient(135deg, #007aff, #0051af); }
.color-purple { background: linear-gradient(135deg, #af52de, #7a28a9); }
.color-orange { background: linear-gradient(135deg, #ff9500, #ff5e00); }