/* =========================================
   QUANTUM WEB LABS
   SERVICE PAGE STYLES
========================================= */


/* =========================================
   SERVICE HERO
========================================= */

.service-hero {

    min-height: 100svh;

    max-width: 1240px;

    margin: auto;

    padding:
        150px
        24px
        90px;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;
}


/* =========================================
   SERVICE NUMBER
========================================= */

.service-number {

    position: absolute;

    top: 125px;

    left: 24px;

    font:
        10px
        "Space Grotesk";

    letter-spacing: 0.18em;

    color: #686575;
}


/* =========================================
   SERVICE CONTENT
========================================= */

.service-content {

    position: relative;

    z-index: 2;

    max-width: 760px;
}


/* =========================================
   BACK LINK
========================================= */

.back {

    display: inline-block;

    color: #898696;

    font-size: 12px;

    margin-bottom: 35px;

    transition:
        color 0.3s ease;
}


.back:hover {

    color: white;

}


/* =========================================
   SERVICE TITLE
========================================= */

.service-content h1 {

    font:
        500
        clamp(65px, 10vw, 145px)
        / 0.85
        "Space Grotesk";

    letter-spacing: -0.07em;

    margin: 0 0 32px;

    max-width: 950px;
}


/* =========================================
   SERVICE TAGLINE
========================================= */

.service-content .lead {

    font:
        500
        clamp(24px, 3vw, 42px)
        / 1.12
        "Space Grotesk";

    letter-spacing: -0.035em;

    max-width: 700px;

    color: #e8e5f2;
}


/* =========================================
   SERVICE DESCRIPTION
========================================= */

.service-content .desc {

    color: #858291;

    line-height: 1.8;

    max-width: 580px;

    font-size: 16px;

    margin:
        25px
        0
        35px;
}


/* =========================================
   SERVICE QUANTUM ORB
========================================= */

.service-orb {

    position: absolute;

    width: 650px;
    height: 650px;

    right: -8%;

    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(150, 120, 255, 0.18);

    box-shadow:

        inset
        0 0 100px
        rgba(112, 70, 255, 0.08),

        0 0 100px
        rgba(89, 54, 255, 0.08);

    animation:
        serviceOrbit
        14s
        linear
        infinite;
}


/* outer orbit */

.service-orb::before {

    content: "";

    position: absolute;

    inset: 12%;

    border:
        1px solid
        rgba(77, 231, 255, 0.22);

    border-radius: 50%;

    transform:
        rotateX(68deg)
        rotateZ(30deg);
}


/* second orbit */

.service-orb::after {

    content: "";

    position: absolute;

    inset: 25%;

    border:
        1px solid
        rgba(255, 79, 216, 0.18);

    border-radius: 50%;

    transform:
        rotateY(65deg)
        rotateZ(-20deg);
}


/* =========================================
   ORB CORE
========================================= */

.service-orb div {

    position: absolute;

    width: 130px;
    height: 130px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            #ffffff,

            #9c7aff 10%,

            #5521e9 35%,

            transparent 70%
        );

    box-shadow:

        0 0 80px
        #6535ff,

        0 0 160px
        rgba(101, 53, 255, 0.35);

    animation:
        servicePulse
        4s
        ease-in-out
        infinite;
}


/* =========================================
   SERVICE DETAILS
========================================= */

.service-details {

    max-width: 1240px;

    margin: auto;

    padding:
        140px
        24px;
}


/* =========================================
   DETAIL GRID
========================================= */

.detail-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 0;

    margin-top: 65px;

    border-top:
        1px solid
        var(--line);

    border-left:
        1px solid
        var(--line);
}


.detail-grid > div {

    min-height: 320px;

    padding: 30px;

    border-right:
        1px solid
        var(--line);

    border-bottom:
        1px solid
        var(--line);

    transition:
        background 0.4s ease,

        transform 0.4s ease;
}


.detail-grid > div:hover {

    background:
        rgba(255, 255, 255, 0.025);

    transform:
        translateY(-4px);
}


.detail-grid span {

    font:
        11px
        "Space Grotesk";

    color: #696576;
}


.detail-grid h2 {

    font:
        500
        35px
        "Space Grotesk";

    margin:
        80px
        0
        12px;
}


.detail-grid p {

    color: #858291;

    line-height: 1.7;

    font-size: 14px;

    max-width: 330px;
}


/* =========================================
   SERVICE CTA
========================================= */

.service-cta {

    max-width: 1240px;

    margin: auto;

    padding:
        120px
        24px
        160px;

    border-top:
        1px solid
        var(--line);
}


.service-cta h2 {

    font:
        500
        clamp(60px, 8vw, 115px)
        / 0.88
        "Space Grotesk";

    letter-spacing: -0.065em;

    margin:
        30px
        0;
}


.service-cta h2 em {

    font-style: normal;

    background:
        linear-gradient(
            100deg,

            #ffffff,

            #a77cff,

            #56e9ff
        );

    -webkit-background-clip: text;

    color: transparent;
}


/* =========================================
   SERVICE CTA BUTTON
========================================= */

.service-cta .big {

    margin-top: 20px;
}


/* =========================================
   CYBERSECURITY SPECIAL ELEMENT
========================================= */

.security-grid {

    margin-top: 80px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;
}


.security-box {

    border:
        1px solid
        var(--line);

    padding: 30px;

    min-height: 180px;

    background:
        rgba(255,255,255,0.015);

    transition:
        transform 0.3s ease,

        background 0.3s ease;
}


.security-box:hover {

    transform:
        translateY(-5px);

    background:
        rgba(139,92,255,0.05);
}


.security-box span {

    font:
        10px
        "Space Grotesk";

    letter-spacing: 0.15em;

    color: var(--cyan);
}


.security-box h3 {

    font:
        500
        25px
        "Space Grotesk";

    margin:
        30px
        0
        10px;
}


.security-box p {

    color: #858291;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes serviceOrbit {

    0% {

        transform:
            translateY(-50%)
            rotate(0deg);

    }

    100% {

        transform:
            translateY(-50%)
            rotate(360deg);

    }

}


@keyframes servicePulse {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.12);

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {


    .service-hero {

        padding:
            140px
            20px
            80px;

        min-height: 900px;

        display: block;
    }


    .service-number {

        left: 20px;

        top: 105px;
    }


    .service-content {

        padding-top: 45px;
    }


    .service-content h1 {

        font-size:
            clamp(
                60px,
                17vw,
                100px
            );
    }


    .service-content .lead {

        font-size: 27px;
    }


    .service-content .desc {

        font-size: 15px;
    }


    .service-orb {

        width: 430px;

        height: 430px;

        right: -190px;

        top: auto;

        bottom: -80px;
    }


    .service-details {

        padding:
            90px
            20px;
    }


    .detail-grid {

        grid-template-columns: 1fr;
    }


    .detail-grid > div {

        min-height: 250px;
    }


    .detail-grid h2 {

        margin-top: 55px;
    }


    .security-grid {

        grid-template-columns: 1fr;

        margin-top: 50px;
    }


    .service-cta {

        padding:
            90px
            20px
            120px;
    }


    .service-cta h2 {

        font-size: 60px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .service-orb,
    .service-orb div {

        animation: none;
    }

}

/* =========================================
   SERVICE TITLE — MOBILE WIDTH FIX
========================================= */

@media (max-width: 600px) {

    .service-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .service-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.6rem, 11vw, 4rem);
        line-height: 0.95;
        letter-spacing: -0.045em;

        overflow-wrap: normal;
        word-break: normal;
    }

    .service-content h1 em {
        display: inline;
    }

}