/* =====================================================
   Hero Section
===================================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:80px 0 100px;

    background:
        radial-gradient(circle at top right,rgba(30,136,229,.12),transparent 35%),
        radial-gradient(circle at bottom left,rgba(11,61,145,.08),transparent 40%),
        #F8FAFC;

}

.hero::before{

    content:"";

    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    background-image:
        linear-gradient(rgba(11,61,145,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(11,61,145,.04) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.35;

    pointer-events:none;

}

/* =====================================================
   Layout
===================================================== */

.hero-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:620px 1fr;

    align-items:center;

    gap:70px;

}

/* =====================================================
   Left Content
===================================================== */

.hero-content{

    position:relative;

    z-index:20;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:28px;

    border-radius:999px;

    background:#EAF2FF;

    color:#0B3D91;

    font-size:15px;

    font-weight:600;

}

.hero-badge::before{

    content:"•";

    font-size:22px;

    line-height:1;

}

.hero-content h1{

    margin:0 0 30px;

    font-size:74px;

    line-height:1.02;

    font-weight:800;

    letter-spacing:-2px;

    color:#0F172A;

}

.hero-content h1 span{

    color:#0B3D91;

}

.hero-content p{

    margin:0 0 42px;

    font-size:22px;

    line-height:1.75;

    color:#64748B;

}

.hero-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:55px;

}

/* =====================================================
   Highlights
===================================================== */

.hero-highlights{

    display:grid;

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

    gap:20px;

}

.highlight{

    background:#FFFFFF;

    padding:22px;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.highlight strong{

    display:block;

    margin-bottom:10px;

    color:#0F172A;

    font-size:16px;

}

.highlight span{

    font-size:14px;

    color:#64748B;

    line-height:1.6;

}

/* =====================================================
   Right
===================================================== */

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:760px;

}

.hero-graphic{

    position:relative;

    width:760px;

    height:760px;

}

/* =====================================================
   World Map
===================================================== */

.hero-map{

    position:absolute;

    top:50%;

    left:50%;

    width:640px;

    height:340px;

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

    background:url("../images/world-map.svg") center center no-repeat;

    background-size:contain;

    opacity:.08;

}

/* =====================================================
   Orbit Rings
===================================================== */

.orbit{

    position:absolute;

    left:50%;

    top:50%;

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

    border-radius:50%;

    border:2px solid rgba(30,136,229,.16);

}

.orbit-1{

    width:360px;

    height:360px;

}

.orbit-2{

    width:560px;

    height:560px;

}

/* =====================================================
   Center Logo
===================================================== */

.hero-center{

    position:absolute;

    left:50%;

    top:50%;

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

    z-index:100;

}

.hero-logo-box{

    width:220px;

    height:220px;

    border-radius:42px;

    background:linear-gradient(135deg,#0B3D91,#2F8FFF);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:
        0 35px 80px rgba(11,61,145,.28),
        inset 0 1px 0 rgba(255,255,255,.18);

}

.hero-logo{

    width:150px;

    height:auto;

    display:block;

    filter:brightness(0) invert(1);

}

/* =====================================================
   Floating Cards
===================================================== */

.tech-card{

    position:absolute;

    width:170px;

    height:130px;

    background:#ffffff;

    border-radius:22px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-align:center;

    box-shadow:0 20px 55px rgba(15,23,42,.10);

    transition:all .35s ease;

    z-index:30;

}

.tech-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 65px rgba(15,23,42,.18);

}

.card-icon{

    font-size:34px;

}

.tech-card span{

    font-size:15px;

    font-weight:600;

    color:#0F172A;

    line-height:1.35;

}

/* ===========================
   TOP
=========================== */

.card-network{

    top:30px;

    left:50%;

    transform:translateX(-50%);

}

/* ===========================
   TOP RIGHT
=========================== */

.card-security{

    top:150px;

    right:15px;

}

/* ===========================
   RIGHT BOTTOM
=========================== */

.card-services{

    bottom:150px;

    right:15px;

}

/* ===========================
   BOTTOM
=========================== */

.card-datacenter{

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

}

/* ===========================
   BOTTOM LEFT
=========================== */

.card-cloud{

    bottom:150px;

    left:15px;

}

/* ===========================
   TOP LEFT
=========================== */

.card-managed{

    top:150px;

    left:15px;

}

/* =====================================================
   Hero Responsive
===================================================== */

@media (max-width:992px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .hero-content{

        order:2;

        text-align:center;

        max-width:100%;

    }

    .hero-badge{

        margin:0 auto 24px;

    }

    .hero-actions{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-highlights{

        grid-template-columns:1fr;

    }

    .hero-visual{

        order:1;

        min-height:500px;

    }

    .hero-graphic{

        width:430px;

        height:430px;

    }

    .orbit-1{

        width:250px;

        height:250px;

    }

    .orbit-2{

        width:390px;

        height:390px;

    }

    .hero-logo-box{

        width:170px;

        height:170px;

    }

    .hero-logo{

        width:110px;

    }

    .card-managed,
    .card-services,
    .card-datacenter{

        display:none;

    }

    .tech-card{

        width:135px;

        height:100px;

    }

    .card-network{

        top:-10px;

    }

    .card-security{

        top:120px;

        right:-10px;

    }

    .card-cloud{

        bottom:20px;

        left:-10px;

    }

}

@media (max-width:768px){

    .hero{

        padding:40px 0 60px;

    }

    .hero-content h1{

        font-size:44px;

    }

    .hero-content p{

        font-size:18px;

    }

    .hero-graphic{

        width:320px;

        height:320px;

    }

    .orbit-1{

        width:190px;

        height:190px;

    }

    .orbit-2{

        width:300px;

        height:300px;

    }

    .hero-logo-box{

        width:140px;

        height:140px;

        border-radius:30px;

    }

    .hero-logo{

        width:90px;

    }

    .tech-card{

        width:120px;

        height:90px;

    }

}