/* ===== SVG ILLUSTRATION PLACEHOLDERS ===== */
/* Used instead of stock images for service cards and detail sections */

.illust {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.illust svg {
    width: 60%;
    height: 60%;
    opacity: 0.85;
}

/* Gradient backgrounds for each service */
.illust-azure {
    background: linear-gradient(135deg, #0078d4 0%, #00bcf2 50%, #50e6ff 100%);
}

.illust-support {
    background: linear-gradient(135deg, #1a5f8a 0%, #2a7ab5 50%, #3b9fd4 100%);
}

.illust-hosting {
    background: linear-gradient(135deg, #0e3f5e 0%, #1a5f8a 50%, #2a7ab5 100%);
}

.illust-hardware {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #4a7fa0 100%);
}

.illust-udvikling {
    background: linear-gradient(135deg, #1a3a4a 0%, #2a5a6a 50%, #3b9fd4 100%);
}

.illust-google {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 33%, #fbbc05 66%, #ea4335 100%);
}

.illust-nda {
    background: linear-gradient(135deg, #1a2744 0%, #2a3f5f 50%, #3b5998 100%);
}

.illust-dpa {
    background: linear-gradient(135deg, #162038 0%, #1a3a4a 50%, #2a5a6a 100%);
}

.illust-sla {
    background: linear-gradient(135deg, #0e3f5e 0%, #1a5f8a 50%, #50e6ff 100%);
}

/* Decorative floating shapes inside illustrations */
.illust::before,
.illust::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    background: white;
}

.illust::before {
    width: 120%;
    height: 120%;
    top: -60%;
    right: -30%;
}

.illust::after {
    width: 80%;
    height: 80%;
    bottom: -40%;
    left: -20%;
}

/* Detail image styling */
.service-detail-illust {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4/3;
}

/* Contract card illustration */
.contract-illust {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.contract-illust svg {
    width: 50%;
    height: 50%;
    opacity: 0.9;
}

.contract-illust::before,
.contract-illust::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    background: white;
}

.contract-illust::before {
    width: 150%;
    height: 150%;
    top: -75%;
    right: -40%;
}

.contract-illust::after {
    width: 100%;
    height: 100%;
    bottom: -50%;
    left: -25%;
}