.services{

            background:#0B0B0D;

            color:#fff;

            padding:140px 0;

            position:relative;

            overflow:hidden;

        }

        .services-header{

            max-width:720px;

            margin:auto;

            text-align:center;

            margin-bottom:90px;

        }
        .section-index{

            display:inline-block;

            color:var(--orange);

            font-size:13px;

            letter-spacing:.3em;

            margin-bottom:20px;

        }
        .services-header h2{

            font-size:72px;

            line-height:.95;

            margin-bottom:30px;

        }
        .services-header p{

            font-size:20px;

            line-height:1.8;

            color:#9d9d9d;

        }
        .services-grid{

            display:grid;

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

            gap:32px;

        }
        .service-card{

            position:relative;

            background:#141416;

            border:1px solid rgba(255,255,255,.06);

            border-radius:28px;

            padding:42px;

            min-height:420px;

            transition:.45s;

            overflow:hidden;

            transition:
            transform .45s ease,
            border-color .45s ease,
            background .45s ease;
        }
        .card-number{

            color:#6c6c6c;

            font-size:13px;

            letter-spacing:.25em;

        }
        .card-diagram{

            height:140px;

            margin:40px 0;

        }
        .service-card h3{

            font-size:34px;

            margin-bottom:18px;

        }
        .service-card p{

            color:#9f9f9f;

            line-height:1.8;

            font-size:17px;

            max-width:320px;

        }
        .service-card a{

            position:absolute;
            left:42px;
            bottom:42px;
            display:inline-flex;
            align-items:center;
            gap:10px;

            color:#fff;
            text-decoration:none;

            font-size:15px;
            font-weight:500;
            letter-spacing:.08em;

            transition:.35s;
        }

        .service-card a span{

            transition:transform .35s ease;
        }

        .service-card a::after{

            content:"";

            position:absolute;

            left:0;
            bottom:-6px;

            width:0%;
            height:2px;

            background:linear-gradient(
                90deg,
                var(--orange),
                var(--blue)
            );

            transition:.35s ease;

        }
        .service-card:hover a{

            color:var(--orange);

        }

        .service-card:hover a::after{

            width:100%;

        }

        .service-card:hover a span{

            transform:translateX(8px);

        }

        .service-card a:hover{

            color:#fff;

        }

        .service-card a:hover span{

            transform:translateX(12px);

        }
        .service-card:hover{

            transform:translateY(-6px);
            background:#18181B;

            border-color:rgba(255,139,77,.28);

        }
        .service-card::before{

            content:"";

            position:absolute;

            top:0;

            left:0;

            width:0;

            height:2px;

            background:linear-gradient(
                90deg,
                var(--orange),
                var(--blue)
            );

            transition:.6s;

        }

        .service-card:hover::before{

            width:100%;

        }
        .services::before{

            content:"";

            position:absolute;

            inset:0;

            background:

            linear-gradient(
                rgba(255,255,255,.02) 1px,
                transparent 1px
            ),

            linear-gradient(
                90deg,
                rgba(255,255,255,.02) 1px,
                transparent 1px
            );

            background-size:52px 52px;

            opacity:.35;

        }
        @media(max-width:991px){

            .services-grid{

                grid-template-columns:1fr;

            }

            .services-header h2{

                font-size:52px;

            }

            .service-card{

                min-height:auto;

            }

        }

        .diagram-svg{

            width:220px;

            height:130px;

            overflow:visible;

        }

        .trace{

            fill:none;

            stroke:#6f6f6f;

            stroke-width:2;

            stroke-linecap:round;

        }

        .node{

            fill:#ffffff;

            stroke:#707070;

            stroke-width:2;

        }

        .center{

            fill:var(--orange);

            stroke:none;

        }

        .module{

            fill:none;

            stroke:#8b8b8b;

            stroke-width:2;

        }

        .module-text{

            fill:#cfcfcf;

            font-size:9px;

            letter-spacing:2px;

            font-family:Inter,sans-serif;

        }
        .chip{

            fill:none;

            stroke:#8c8c8c;

            stroke-width:2;

        }

        .pad{

            fill:var(--purple);

        }
        .gear{

            fill:none;

            stroke:#8d8d8d;

            stroke-width:2;

        }

        .gear-center{

            fill:#ffffff;

            stroke:#8d8d8d;

            stroke-width:2;

        }

        .sensor{

            fill:var(--coral);

        }

        .ai:hover .trace{

            stroke:var(--orange);

        }
        .software:hover .module{

            stroke:var(--blue);

        }

        .software:hover .trace{

            stroke:var(--blue);

        }
        .embedded:hover .chip{

            stroke:var(--purple);

        }

        .embedded:hover .pin{

            stroke:var(--purple);

        }
        .embedded:hover .pad{

            fill:var(--purple);

        }
        .automation:hover .gear{

            stroke:var(--coral);

        }
        .data-dot{
            fill:#fff;
        }

        .outer{
            transform-origin:center;
        }
        .packet{
            fill:var(--blue);
        }

        .software .module{
            transition:.35s;
        }
        .signal-dot{
            fill:var(--purple);
        }

        .pin{
            stroke:#8c8c8c;
            stroke-width:2;
        }

        .embedded .chip{
            transition:.35s;
        }

        .sensor-wave{

            fill:none;

            stroke:var(--coral);

            stroke-width:2;

            opacity:0;

            stroke-linecap:round;

        }

        .gear-tooth{

            fill:#8d8d8d;

        }

        .plc-module{

            transition:.3s;

        }