.service-hero-cloud {
            position: relative;
            padding: clamp(3.15rem, 5.1vw, 4.9rem) 0 clamp(2.45rem, 4vw, 3.45rem);
            background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 52%, #f8fbff 100%);
            overflow: hidden;
        }

        .service-hero-cloud::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(430px 210px at 56% -2%, rgba(99, 150, 243, 0.18), transparent 74%);
            pointer-events: none;
        }

        .service-hero-cloud .container {
            position: relative;
            z-index: 1;
            width: 100vw;
            max-width: none;
            margin: 0 calc(50% - 50vw);
            padding: 0 clamp(1rem, 3.2vw, 3rem);
        }

        .cloud-hero-shell {
            width: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(315px, 0.85fr);
            gap: clamp(1rem, 2vw, 2rem);
            align-items: center;
        }

        .service-hero-cloud .hero-content {
            max-width: none;
            width: 100%;
            margin: 0;
            text-align: left;
        }

        .cloud-hero-kicker {
            display: inline-block;
            padding: 0.34rem 0.66rem;
            border-radius: 999px;
            border: 1px solid rgba(132, 163, 212, 0.45);
            background: #ffffff;
            color: #314f7e;
            font-family: var(--font-mono);
            font-size: 0.69rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 1rem;
        }

        .service-hero-cloud h1 {
            margin: 0 0 0.88rem;
            font-size: clamp(2.2rem, 4.7vw, 3.9rem);
            line-height: 1.05;
            max-width: 13ch;
            color: #0f1b2f;
            letter-spacing: -0.03em;
        }

        .service-hero-cloud .hero-subtitle {
            margin: 0;
            max-width: 56ch;
            color: #4f607a;
            font-size: 1.02rem;
            line-height: 1.7;
        }

        .cloud-lab {
            position: relative;
            border-radius: 1.22rem;
            border: 1px solid rgba(103, 129, 176, 0.32);
            background: linear-gradient(180deg, #0f2548 0%, #0a1a36 100%);
            box-shadow: 0 18px 40px rgba(7, 18, 34, 0.32);
            overflow: hidden;
            animation: cloud-lab-float 4.8s ease-in-out infinite;
        }

        .cloud-lab-canvas {
            position: relative;
            padding: 0.92rem;
            min-height: 270px;
            background:
                radial-gradient(140px 120px at 16% 28%, rgba(96, 150, 242, 0.14), transparent 76%),
                radial-gradient(170px 130px at 88% 76%, rgba(96, 150, 242, 0.12), transparent 76%);
        }

        .cloud-lab-grid {
            position: absolute;
            inset: 0.92rem;
            border-radius: 0.95rem;
            background-image:
                linear-gradient(rgba(119, 149, 197, 0.11) 1px, transparent 1px),
                linear-gradient(90deg, rgba(119, 149, 197, 0.11) 1px, transparent 1px);
            background-size: 24px 24px;
            opacity: 0.65;
        }

        .cloud-mark-wrap {
            position: absolute;
            left: 1.18rem;
            top: 1.18rem;
            width: 180px;
            height: 180px;
            animation: scene-build 10s ease-in-out infinite;
        }

        .cloud-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid rgba(131, 181, 255, 0.45);
            animation: cloud-rotate 13s linear infinite;
        }

        .cloud-ring::before,
        .cloud-ring::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(139, 191, 255, 0.3);
        }

        .cloud-ring::before {
            inset: 18px;
        }

        .cloud-ring::after {
            inset: 38px;
            border-style: solid;
            border-color: rgba(139, 191, 255, 0.18);
        }

        .cloud-mark-core {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 84px;
            height: 84px;
            border-radius: 1.3rem;
            transform: translate(-50%, -50%) rotate(45deg);
            background: linear-gradient(135deg, #9cccff 0%, #699ef2 56%, #4f84de 100%);
            box-shadow: 0 0 0 8px rgba(139, 190, 255, 0.16), 0 0 22px rgba(124, 176, 255, 0.48);
        }

        .cloud-mark-core::before,
        .cloud-mark-core::after {
            content: "";
            position: absolute;
            background: rgba(236, 246, 255, 0.88);
            border-radius: 0.35rem;
        }

        .cloud-mark-core::before {
            width: 10px;
            height: 54px;
            left: 37px;
            top: 15px;
            transform: rotate(0deg);
        }

        .cloud-mark-core::after {
            width: 54px;
            height: 10px;
            left: 15px;
            top: 37px;
        }

        .cloud-guides span {
            position: absolute;
            background: rgba(149, 193, 255, 0.3);
        }

        .cloud-guides span:nth-child(1),
        .cloud-guides span:nth-child(2) {
            width: 100%;
            height: 1px;
            left: 0;
        }

        .cloud-guides span:nth-child(1) { top: 50%; }
        .cloud-guides span:nth-child(2) { top: 35%; }

        .cloud-guides span:nth-child(3),
        .cloud-guides span:nth-child(4) {
            width: 1px;
            height: 100%;
            top: 0;
        }

        .cloud-guides span:nth-child(3) { left: 50%; }
        .cloud-guides span:nth-child(4) { left: 65%; }

        .cloud-swatches {
            position: absolute;
            right: 1.06rem;
            top: 1.08rem;
            width: 126px;
            border: 1px solid rgba(119, 149, 197, 0.34);
            border-radius: 0.65rem;
            background: rgba(14, 30, 57, 0.72);
            padding: 0.45rem;
            backdrop-filter: blur(2px);
            animation: panel-build 10s ease-in-out infinite;
        }

        .cloud-swatches-title {
            color: rgba(199, 216, 242, 0.84);
            font-size: 0.61rem;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 0.34rem;
        }

        .cloud-swatch-row {
            display: grid;
            grid-template-columns: 14px 1fr;
            gap: 0.34rem;
            align-items: center;
            margin-bottom: 0.32rem;
        }

        .cloud-swatch-row:last-child {
            margin-bottom: 0;
        }

        .cloud-swatch-dot {
            width: 14px;
            height: 14px;
            border-radius: 0.3rem;
            border: 1px solid rgba(228, 239, 255, 0.45);
        }

        .cloud-swatch-row:nth-child(2) .cloud-swatch-dot { background: #699ef2; }
        .cloud-swatch-row:nth-child(3) .cloud-swatch-dot { background: #9cccff; }
        .cloud-swatch-row:nth-child(4) .cloud-swatch-dot { background: #e8f2ff; }

        .cloud-swatch-code {
            color: rgba(223, 235, 253, 0.88);
            font-family: var(--font-mono);
            font-size: 0.63rem;
            letter-spacing: 0.02em;
        }

        .cloud-type-card {
            position: absolute;
            right: 1.06rem;
            bottom: 1.06rem;
            width: 150px;
            border: 1px solid rgba(119, 149, 197, 0.34);
            border-radius: 0.65rem;
            background: rgba(14, 30, 57, 0.72);
            padding: 0.44rem 0.5rem;
            backdrop-filter: blur(2px);
            animation: panel-build 10s ease-in-out infinite;
        }

        .cloud-type-label {
            color: rgba(199, 216, 242, 0.82);
            font-size: 0.58rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.26rem;
        }

        .cloud-type-main {
            color: #e8f2ff;
            font-family: var(--font-heading);
            font-size: 0.96rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 0.18rem;
        }

        .cloud-type-sub {
            color: rgba(201, 217, 240, 0.77);
            font-size: 0.67rem;
        }

        .cloud-variants {
            position: absolute;
            left: 1.18rem;
            bottom: 1.08rem;
            display: flex;
            gap: 0.48rem;
            animation: panel-build 10s ease-in-out infinite;
        }

        .cloud-variant {
            width: 48px;
            height: 48px;
            border-radius: 0.75rem;
            border: 1px solid rgba(119, 149, 197, 0.32);
            background: rgba(14, 30, 57, 0.72);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .cloud-variant::before {
            content: "";
            width: 22px;
            height: 22px;
            border-radius: 0.5rem;
            transform: rotate(45deg);
        }

        .cloud-variant:nth-child(1)::before {
            background: linear-gradient(135deg, #9cccff 0%, #699ef2 100%);
        }

        .cloud-variant:nth-child(2)::before {
            background: #e8f2ff;
        }

        .cloud-variant:nth-child(3)::before {
            background: transparent;
            border: 2px solid #9cccff;
        }

        .cloud-flow {
            position: absolute;
            inset: 0.92rem;
            border-radius: 0.95rem;
            pointer-events: none;
            overflow: hidden;
            opacity: 0.55;
        }

        .cloud-flow::before,
        .cloud-flow::after {
            content: "";
            position: absolute;
            left: -25%;
            width: 70%;
            height: 2px;
            background: linear-gradient(90deg, rgba(149, 201, 255, 0), rgba(149, 201, 255, 0.95), rgba(149, 201, 255, 0));
            filter: drop-shadow(0 0 6px rgba(130, 188, 255, 0.55));
        }

        .cloud-flow::before {
            top: 38%;
            animation: flow-line 5.2s linear infinite;
        }

        .cloud-flow::after {
            top: 64%;
            animation: flow-line 5.2s linear infinite 1.6s;
        }

        .cloud-application {
            position: absolute;
            inset: 0.92rem;
            border-radius: 0.95rem;
            pointer-events: none;
            opacity: 0;
            transform: translateY(10px) scale(0.98);
            animation: scene-apply 10s ease-in-out infinite;
        }

        .cloud-card-mockup {
            position: absolute;
            right: 1rem;
            top: 50%;
            width: 208px;
            height: 124px;
            border-radius: 0.88rem;
            transform: translateY(-50%) rotate(-8deg);
            background:
                linear-gradient(145deg, rgba(18, 39, 74, 0.96) 0%, rgba(13, 30, 58, 0.98) 56%, rgba(11, 25, 49, 0.98) 100%);
            border: 1px solid rgba(133, 182, 255, 0.34);
            box-shadow: 0 16px 30px rgba(7, 14, 28, 0.42);
            padding: 0.76rem 0.84rem;
            overflow: hidden;
        }

        .cloud-card-mockup::before {
            content: "";
            position: absolute;
            right: -32px;
            top: -36px;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(128, 184, 255, 0.32) 0%, rgba(128, 184, 255, 0) 72%);
        }

        .cloud-card-mark {
            width: 31px;
            height: 31px;
            border-radius: 0.55rem;
            transform: rotate(45deg);
            background: linear-gradient(135deg, #a7d4ff 0%, #6da4f7 100%);
            margin-bottom: 0.66rem;
            box-shadow: 0 0 16px rgba(125, 183, 255, 0.45);
        }

        .cloud-card-title {
            color: #ebf4ff;
            font-family: var(--font-heading);
            font-size: 0.87rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
            letter-spacing: 0.01em;
        }

        .cloud-card-subtitle {
            color: rgba(206, 222, 247, 0.8);
            font-size: 0.66rem;
            margin-bottom: 0.72rem;
        }

        .cloud-card-lines span {
            display: block;
            height: 4px;
            border-radius: 999px;
            margin-bottom: 0.3rem;
            background: linear-gradient(90deg, rgba(157, 203, 255, 0.75), rgba(157, 203, 255, 0.28));
        }

        .cloud-card-lines span:nth-child(1) { width: 72%; }
        .cloud-card-lines span:nth-child(2) { width: 58%; }
        .cloud-card-lines span:nth-child(3) { width: 66%; margin-bottom: 0; }

        .cloud-orbit-tag {
            position: absolute;
            left: 1.15rem;
            bottom: 1.15rem;
            border: 1px solid rgba(133, 182, 255, 0.34);
            border-radius: 999px;
            background: rgba(14, 30, 57, 0.78);
            color: rgba(223, 236, 255, 0.9);
            font-size: 0.63rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.28rem 0.54rem;
        }

        @keyframes cloud-lab-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @keyframes cloud-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes flow-line {
            0% { transform: translateX(-36%); opacity: 0; }
            18% { opacity: 1; }
            82% { opacity: 1; }
            100% { transform: translateX(160%); opacity: 0; }
        }

        @keyframes scene-build {
            0%, 44% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            52%, 100% {
                opacity: 0.15;
                transform: translateY(-7px) scale(0.96);
            }
        }

        @keyframes panel-build {
            0%, 42% { opacity: 1; transform: translateY(0); }
            52%, 100% { opacity: 0.18; transform: translateY(-4px); }
        }

        @keyframes scene-apply {
            0%, 46% {
                opacity: 0;
                transform: translateY(10px) scale(0.98);
            }
            58%, 90% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(6px) scale(0.98);
            }
        }

        @media (max-width: 768px) {
            .service-hero-cloud {
                padding: 2.2rem 0 1.9rem;
            }

            .cloud-hero-shell {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .service-hero-cloud .hero-content {
                padding: 0 0.2rem;
            }

            .service-hero-cloud .hero-subtitle {
                font-size: 0.98rem;
            }

            .cloud-lab {
                animation: none;
            }

            .cloud-lab-canvas {
                min-height: 245px;
            }

            .cloud-mark-wrap {
                width: 154px;
                height: 154px;
                left: 0.9rem;
                top: 1rem;
            }

            .cloud-swatches,
            .cloud-type-card {
                right: 0.8rem;
            }

            .cloud-variants {
                left: 0.9rem;
            }

            .cloud-card-mockup {
                width: 172px;
                height: 108px;
                right: 0.8rem;
            }
        }

        .service-content {
            padding-top: calc(var(--spacing-3xl) * 0.5);
            padding-bottom: 0;
        }

        .service-overlay {
            background: linear-gradient(270deg, #eaf0fa 0%, #f1f5fc 46%, #f5f7fb 100%);
            border-radius: 0;
            padding: 2.85rem 1.25rem 3.25rem;
            width: 100vw;
            margin: 0 calc(50% - 50vw) 0;
        }

        .service-overlay .content-section > h2 {
            text-align: center;
            font-size: clamp(1.75rem, 2.3vw, 2.25rem);
            margin-bottom: 1.1rem;
        }

        .service-overlay .content-section.included-wide {
            max-width: 100%;
            margin-bottom: 0;
        }

        .service-overlay .content-section.included-wide + .content-section.included-wide {
            margin-top: 3.1rem;
        }

        .cloud-services-digital-solutions-overlay .content-section.included-wide:last-child > h2 {
            margin-top: 0.275rem;
            margin-bottom: 0.55rem;
        }


        .included-wide .deliverables-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.2rem;
        }

        .included-wide .deliverable-item {
            background: #ffffff;
            border: 1px solid #dbe2ea;
            border-left: 4px solid var(--light-blue);
            border-radius: 14px;
            padding: 2rem 2.1rem;
            min-height: 160px;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .included-wide .deliverable-item h3 {
            margin-bottom: 0.8rem;
            font-size: 1.05rem;
            line-height: 1.35;
        }

        .included-wide .deliverable-item p {
            margin: 0;
            font-size: 0.98rem;
            line-height: 1.7;
            color: var(--gray-600);
            max-width: none;
        }

        .included-wide .deliverable-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            border-color: #cfd8e3;
        }

        .cloud-process {
            position: relative;
            margin-top: 0.75rem;
            border: 0;
            border-radius: 0;
            background: transparent;
            padding: 0;
            box-shadow: none;
            overflow: hidden;
        }

        .cloud-process::before {
            content: "";
            position: absolute;
            left: 1.2rem;
            top: 0.6rem;
            bottom: 0.6rem;
            width: 2px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(118, 163, 234, 0.15), rgba(118, 163, 234, 0.78), rgba(118, 163, 234, 0.15));
        }

        .cloud-process .process-steps {
            display: grid;
            gap: 0.85rem;
        }

        .cloud-process .step {
            position: relative;
            margin: 0;
            background: linear-gradient(160deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid #d3e0f1;
            border-radius: 0.95rem;
            padding: 1.05rem 1.05rem 1.05rem 2.85rem;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            overflow: hidden;
        }

        .cloud-process .step::before {
            content: "";
            position: absolute;
            left: 0.86rem;
            top: 1.18rem;
            width: 0.92rem;
            height: 0.92rem;
            border-radius: 50%;
            border: 0;
            background: linear-gradient(135deg, #8fbefc 0%, #5e92e3 100%);
            box-shadow: 0 4px 10px rgba(82, 137, 217, 0.35);
            pointer-events: none;
        }

        .cloud-process .step-number {
            position: absolute;
            left: 1rem;
            top: 1.32rem;
            transform: none;
            width: 0.64rem;
            height: 0.64rem;
            border-radius: 50%;
            border: 0;
            background: transparent;
            color: #ffffff;
            font-family: var(--font-heading);
            font-size: 0.44rem;
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .cloud-process .step-content h3 {
            margin: 0 0 0.38rem;
            font-size: 1rem;
            line-height: 1.3;
            color: #14263f;
            letter-spacing: 0;
        }

        .cloud-process .step-content p {
            margin: 0;
            font-size: 0.93rem;
            line-height: 1.58;
            color: #516279;
        }

        .cloud-process .step:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
            border-color: #cfd8e3;
        }

        @media (max-width: 768px) {
            .service-overlay {
                padding: 2.25rem 0.9rem 2.35rem;
                border-radius: 0;
            }

            .included-wide .deliverables-grid {
                grid-template-columns: 1fr;
            }

            .cloud-process {
                padding: 0;
            }

            .cloud-process::before {
                left: 0.95rem;
            }

            .cloud-process .step {
                padding: 0.95rem 0.9rem 0.95rem 2.45rem;
            }

            .cloud-process .step-number {
                left: 0.79rem;
                top: 1.15rem;
                width: 0.58rem;
                height: 0.58rem;
                font-size: 0.4rem;
            }

            .cloud-process .step::before {
                left: 0.66rem;
                top: 1.01rem;
                width: 0.8rem;
                height: 0.8rem;
            }

            .service-overlay .content-section.included-wide + .content-section.included-wide {
                margin-top: 2.2rem;
            }

            .cloud-services-digital-solutions-overlay .content-section.included-wide:last-child > h2 {
                margin-top: 0.22rem;
                margin-bottom: 0.55rem;
            }

        }