.service-hero-modern {
            position: relative;
            padding: clamp(3.1rem, 5vw, 4.8rem) 0 clamp(2.4rem, 4vw, 3.4rem);
            background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 54%, #f7fbff 100%);
            overflow: hidden;
        }

        .service-hero-modern::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(420px 190px at 52% 0%, rgba(105, 158, 255, 0.18), transparent 74%);
            pointer-events: none;
        }

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

        .service-hero-shell {
            width: 100%;
            display: grid;
            grid-template-columns: minmax(0, 1.16fr) minmax(290px, 0.84fr);
            gap: clamp(1rem, 2vw, 2rem);
            align-items: center;
        }

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

        .service-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-modern h1 {
            margin: 0 0 0.85rem;
            font-size: clamp(2.2rem, 4.7vw, 3.85rem);
            line-height: 1.06;
            max-width: 14.5ch;
            color: #0f1b2f;
            letter-spacing: -0.03em;
        }

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

        .hero-network {
            position: relative;
            border-radius: 1.1rem;
            overflow: hidden;
            border: 1px solid rgba(103, 129, 176, 0.34);
            background: linear-gradient(180deg, #102445 0%, #0a1a34 100%);
            box-shadow: 0 18px 38px rgba(9, 19, 34, 0.3);
            animation: hero-float 4.4s ease-in-out infinite;
        }

        .hero-network-body {
            position: relative;
            height: 258px;
            padding: 0.95rem;
            background:
                radial-gradient(150px 120px at 28% 74%, rgba(107, 168, 255, 0.12), transparent 72%),
                radial-gradient(170px 130px at 76% 18%, rgba(123, 159, 255, 0.12), transparent 74%);
        }

        .hero-network-grid {
            position: absolute;
            inset: 0.95rem;
            border-radius: 0.9rem;
            background-image:
                linear-gradient(rgba(111, 141, 190, 0.12) 1px, transparent 1px),
                linear-gradient(90deg, rgba(111, 141, 190, 0.12) 1px, transparent 1px);
            background-size: 26px 26px;
            opacity: 0.7;
        }

        .hero-network-ring {
            position: absolute;
            left: 116px;
            top: 66px;
            width: 132px;
            height: 132px;
            border-radius: 50%;
            border: 1px solid rgba(126, 181, 255, 0.35);
            box-shadow: inset 0 0 40px rgba(109, 171, 255, 0.08);
            animation: ring-rotate 8s linear infinite;
        }

        .hero-network-ring::before,
        .hero-network-ring::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            inset: 14px;
            border: 1px dashed rgba(132, 186, 255, 0.22);
        }

        .hero-network-ring::after {
            inset: 34px;
            border-style: solid;
            border-color: rgba(132, 186, 255, 0.16);
        }

        .hero-network-sweep {
            position: absolute;
            left: 181px;
            top: 130px;
            width: 120px;
            height: 2px;
            transform-origin: left center;
            background: linear-gradient(90deg, rgba(133, 189, 255, 0.9), rgba(133, 189, 255, 0));
            animation: sweep-rotate 4.8s linear infinite;
            opacity: 0.8;
        }

        .hero-link {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, rgba(95, 153, 255, 0.1), rgba(126, 181, 255, 0.92), rgba(95, 153, 255, 0.1));
            transform-origin: left center;
            filter: drop-shadow(0 0 6px rgba(108, 168, 255, 0.35));
        }

        .hero-link::after {
            content: "";
            position: absolute;
            top: -1px;
            left: -8px;
            width: 8px;
            height: 4px;
            border-radius: 999px;
            background: #9dd1ff;
            box-shadow: 0 0 10px rgba(157, 209, 255, 0.65);
            animation: packet-run 2.6s linear infinite;
        }

        .hero-link.link-a {
            width: 138px;
            left: 46px;
            top: 162px;
            transform: rotate(-27deg);
        }

        .hero-link.link-b {
            width: 126px;
            left: 169px;
            top: 102px;
            transform: rotate(12deg);
        }

        .hero-link.link-b::after {
            animation-delay: 0.72s;
        }

        .hero-link.link-c {
            width: 152px;
            left: 90px;
            top: 66px;
            transform: rotate(38deg);
        }

        .hero-link.link-c::after {
            animation-delay: 1.28s;
        }

        .hero-link.link-d {
            width: 124px;
            left: 175px;
            top: 182px;
            transform: rotate(-14deg);
        }

        .hero-link.link-d::after {
            animation-delay: 1.54s;
        }

        .hero-link.link-e {
            width: 98px;
            left: 44px;
            top: 96px;
            transform: rotate(4deg);
        }

        .hero-link.link-e::after {
            animation-delay: 1.9s;
        }

        .hero-node {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #7fb7ff;
            box-shadow: 0 0 0 4px rgba(124, 177, 255, 0.18), 0 0 14px rgba(123, 182, 255, 0.45);
            animation: node-pulse 2.4s ease-in-out infinite;
        }

        .hero-node.node-main {
            width: 20px;
            height: 20px;
            background: #a9d3ff;
            box-shadow: 0 0 0 5px rgba(137, 189, 255, 0.24), 0 0 18px rgba(157, 209, 255, 0.55);
            left: 162px;
            top: 92px;
        }

        .hero-node.node-a {
            left: 36px;
            top: 158px;
        }

        .hero-node.node-b {
            left: 298px;
            top: 126px;
            animation-delay: 0.44s;
        }

        .hero-node.node-c {
            left: 264px;
            top: 32px;
            animation-delay: 0.88s;
        }

        .hero-node.node-d {
            left: 84px;
            top: 44px;
            animation-delay: 1.16s;
        }

        .hero-node.node-e {
            left: 324px;
            top: 186px;
            animation-delay: 1.54s;
        }

        .hero-node.node-f {
            left: 36px;
            top: 94px;
            animation-delay: 1.86s;
        }

        .hero-network-chip {
            position: absolute;
            border: 1px solid rgba(120, 154, 207, 0.36);
            border-radius: 0.55rem;
            background: rgba(11, 29, 56, 0.78);
            color: rgba(219, 232, 255, 0.9);
            font-size: 0.67rem;
            line-height: 1.25;
            padding: 0.3rem 0.42rem;
            letter-spacing: 0.01em;
            backdrop-filter: blur(2px);
            animation: chip-fade 2.8s ease-in-out infinite;
        }

        .hero-network-chip strong {
            display: block;
            color: #ecf4ff;
            font-size: 0.7rem;
            margin-bottom: 0.04rem;
        }

        .hero-network-chip.chip-a {
            left: 1rem;
            top: 1rem;
        }

        .hero-network-chip.chip-b {
            right: 1rem;
            top: 1.05rem;
            animation-delay: 1.2s;
        }

        .hero-network-activity {
            position: absolute;
            left: 1rem;
            bottom: 0.9rem;
            width: 118px;
            border: 1px solid rgba(114, 139, 181, 0.28);
            border-radius: 0.58rem;
            background: rgba(13, 28, 54, 0.62);
            padding: 0.34rem 0.4rem 0.42rem;
        }

        .hero-network-activity-title {
            color: rgba(199, 216, 242, 0.8);
            font-size: 0.62rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .hero-network-activity-line {
            position: relative;
            height: 1.15rem;
            border-radius: 0.25rem;
            overflow: hidden;
        }

        .hero-network-activity-line svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        .hero-network-activity-line polyline {
            fill: none;
            stroke: #8fc0ff;
            stroke-width: 2.1;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 180;
            stroke-dashoffset: 180;
            animation: traffic-line-draw 2.4s ease-out infinite;
            filter: drop-shadow(0 0 5px rgba(143, 192, 255, 0.55));
        }

        .hero-network-ping {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #d8ecff;
            box-shadow: 0 0 0 3px rgba(168, 210, 255, 0.25), 0 0 8px rgba(156, 205, 255, 0.75);
            animation: traffic-ping 2.4s linear infinite;
            left: 0;
            top: 12px;
        }

        .hero-network-legend {
            position: absolute;
            right: 0.9rem;
            bottom: 0.85rem;
            border: 1px solid rgba(114, 139, 181, 0.3);
            border-radius: 0.68rem;
            background: rgba(13, 28, 54, 0.62);
            padding: 0.44rem 0.54rem;
            color: rgba(210, 224, 248, 0.85);
            font-size: 0.73rem;
            line-height: 1.45;
        }

        .hero-network-legend strong {
            display: block;
            color: #e7f0ff;
            font-size: 0.76rem;
            margin-bottom: 0.06rem;
        }

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

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

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

        @keyframes node-pulse {
            0%, 100% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        @keyframes packet-run {
            0% { transform: translateX(0); opacity: 0; }
            12% { opacity: 1; }
            88% { opacity: 1; }
            100% { transform: translateX(140px); opacity: 0; }
        }

        @keyframes chip-fade {
            0%, 100% { opacity: 0.7; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-2px); }
        }

        @keyframes traffic-line-draw {
            0% {
                stroke-dashoffset: 180;
                opacity: 0.65;
            }
            25% {
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 0;
                opacity: 0.95;
            }
        }

        @keyframes traffic-ping {
            0% { left: 0; top: 12px; }
            14% { top: 9px; }
            28% { top: 10px; }
            42% { top: 4px; }
            56% { top: 8px; }
            70% { top: 1px; }
            84% { top: 6px; }
            100% { left: calc(100% - 6px); top: 2px; }
        }

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

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

            .service-hero-modern .hero-content {
                padding: 0 0.2rem;
                text-align: left;
            }

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

            .hero-network {
                animation: none;
            }

            .hero-network-body {
                height: 216px;
            }
        }

        .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 1rem;
            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 .tech-expertise-block {
            margin-top: calc(var(--spacing-xl) * 0.9);
            margin-bottom: calc(var(--spacing-3xl) * 0.3);
        }

        .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;
        }

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

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