:root {
    color-scheme: light;
    --brand: #1e64d7;
    --text: #1f2937;
    --page-inline: clamp(1.5rem, 9.5vw, 8.875rem);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100svh;
    color: var(--text);
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    background: #ffffff;
}

img {
    display: block;
    max-width: 100%;
}

.status-page {
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 32%, rgba(239, 248, 255, 0.68) 100%),
        url("/assets/fondMaintenance.jpg") center / cover no-repeat;
}

.status-shell {
    min-height: 100svh;
    position: relative;
    isolation: isolate;
}

.status-logo {
    position: absolute;
    z-index: 2;
    top: clamp(2rem, 7.8vh, 4.6rem);
    left: var(--page-inline);
    width: clamp(5.25rem, 7.5vw, 6.6rem);
}

.status-copy {
    position: absolute;
    z-index: 2;
    left: var(--page-inline);
    top: clamp(14rem, 35.5vh, 19rem);
    width: min(31rem, calc(100vw - (var(--page-inline) * 2)));
}

.status-title {
    margin: 0 0 1.2rem;
    max-width: 15ch;
    color: #1f2937;
    font-size: clamp(2rem, 2.35vw, 2.45rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0;
}

.status-title strong {
    color: var(--accent, var(--brand));
    font-weight: 700;
}

.status-message {
    display: grid;
    gap: 0.9rem;
    max-width: 27rem;
    color: #1f2937;
    font-size: clamp(0.95rem, 1.1vw, 1rem);
    line-height: 1.28;
    letter-spacing: 0;
}

.status-message p {
    margin: 0;
}

.status-message strong {
    color: inherit;
    font-weight: 700;
}

.status-message .accent {
    color: var(--accent, var(--brand));
    font-weight: 700;
}

.status-visual {
    position: absolute;
    z-index: 1;
    right: clamp(-18rem, -9vw, -5rem);
    top: clamp(8rem, 18vh, 11rem);
    width: min(65vw, 58rem);
    pointer-events: none;
}

.status-illustration {
    width: 100%;
}

.status-ok,
.status-maintenance {
    --accent: #1e64d7;
}

.status-operational-incident {
    --accent: #c2410c;
}

.status-security-incident {
    --accent: #b91c1c;
}

@media (max-width: 1100px) {
    .status-visual {
        right: -18rem;
        width: 58rem;
        opacity: 0.58;
    }
}

@media (max-width: 760px) {
    .status-page {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 248, 255, 0.72) 100%),
            url("/assets/fondMaintenance.jpg") center / cover no-repeat;
    }

    .status-shell {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        min-height: 100svh;
        padding: 2rem 1.5rem 2.5rem;
    }

    .status-logo,
    .status-copy,
    .status-visual {
        position: relative;
        inset: auto;
        width: auto;
    }

    .status-logo {
        width: 5.75rem;
    }

    .status-copy {
        margin-top: 10vh;
    }

    .status-title {
        max-width: 16ch;
    }

    .status-visual {
        width: min(48rem, 145vw);
        margin-inline: -18vw -42vw;
        opacity: 0.72;
    }
}

@media (max-width: 460px) {
    .status-shell {
        padding-inline: 1.25rem;
    }

    .status-copy {
        margin-top: 6vh;
    }

    .status-title {
        font-size: clamp(1.75rem, 10vw, 2.25rem);
    }
}

.exact-status-page {
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.92) 0%, rgba(255, 255, 255, 0.96) 100%),
        url("/assets/fondMaintenance.jpg") center / cover no-repeat;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.exact-status-stage {
    --design-width: min(100vw, calc(100svh * 1440 / 860));
    --design-height: calc(var(--design-width) * 860 / 1440);
    --design-left: calc((100vw - var(--design-width)) / 2);
    --design-top: calc((100svh - var(--design-height)) / 2);

    width: 100vw;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
}

.exact-status-stage::before {
    content: "";
    position: absolute;
    width: calc(var(--design-width) * 0.482);
    aspect-ratio: 1;
    left: calc(var(--design-left) + var(--design-width) * 0.473);
    top: calc(var(--design-top) + var(--design-height) * 0.0965);
    border-radius: 9999px;
    background: #eff8ff;
}

.exact-status-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(9.28% - 4.6%),
        rgba(59, 59, 59, 0.09) calc(9.28% - 4.6%),
        transparent 9.28%
    );
    mix-blend-mode: overlay;
    backdrop-filter: blur(95.94px);
    pointer-events: none;
}

.exact-status-logo {
    position: absolute;
    z-index: 2;
    left: calc(var(--design-left) + var(--design-width) * 0.0986);
    top: calc(var(--design-top) + var(--design-height) * 0.0849);
    width: calc(var(--design-width) * 0.0746);
}

.exact-status-copy {
    position: absolute;
    z-index: 2;
    left: calc(var(--design-left) + var(--design-width) * 0.0986);
    top: calc(var(--design-top) + var(--design-height) * 0.3558);
    width: calc(var(--design-width) * 0.3111);
    color: #1f2937;
}

.exact-status-title {
    margin: 0 0 1.65em;
    max-width: 28rem;
    font-size: clamp(1rem, calc(var(--design-width) * 0.0222), 2rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: 0;
}

.exact-status-title .regular {
    font-weight: 400;
}

.exact-status-title .accent,
.exact-status-message .accent {
    color: #1e64d7;
    font-weight: 600;
}

.exact-status-title .line {
    display: block;
    white-space: nowrap;
}

.exact-status-message {
    display: grid;
    gap: 1.48em;
    font-size: clamp(0.72rem, calc(var(--design-width) * 0.0111), 1rem);
    line-height: 1.2;
    letter-spacing: 0;
}

.exact-status-message p {
    margin: 0;
}

.exact-status-message strong {
    font-weight: 600;
}

.exact-status-illustration {
    position: absolute;
    z-index: 1;
    right: clamp(-18rem, -14vw, -7rem);
    top: calc(var(--design-top) + var(--design-height) * 0.1825);
    width: clamp(64rem, 74vw, calc(var(--design-width) * 0.88));
    pointer-events: none;
}

@media (max-width: 760px) {
    .exact-status-stage {
        --design-width: 100vw;
        --design-height: 100svh;
        --design-left: 0px;
        --design-top: 0px;
    }

    .exact-status-stage::after {
        opacity: 0.45;
    }

    .exact-status-logo {
        left: 8%;
        top: 3rem;
        width: 6.8rem;
    }

    .exact-status-copy {
        left: 8%;
        top: 28vh;
        width: 84%;
    }

    .exact-status-title {
        max-width: 28rem;
        font-size: clamp(2rem, 8.5vw, 2.8rem);
    }

    .exact-status-message {
        font-size: 1rem;
    }

    .exact-status-illustration {
        left: 28%;
        top: 58vh;
        width: 105%;
        opacity: 0.62;
    }
}