.globe-hero{
    min-height:100vh;
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding-bottom:0;
    background:
        radial-gradient(circle at 75% 45%,rgba(198,149,46,.18),transparent 30%),
        radial-gradient(circle at 20% 80%,rgba(14,26,46,.82),transparent 45%),
        linear-gradient(120deg,#0E1A2E,#071426 58%);
}

.globe-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(rgba(235,208,148,.025) 1px,transparent 1px);
    background-size:100% 42px;
    opacity:.35;
    pointer-events:none;
}

.globe-hero::after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:0;
    background:radial-gradient(circle at 70% 45%,rgba(220,178,90,.12),transparent 25%);
    animation:ambientLight 10s ease-in-out infinite;
    pointer-events:none;
}

.globe-copy{
    position:relative;
    z-index:10;
    width:min(50%,630px);
    max-width:560px;
    padding:70px;
    animation:heroReveal 1.2s ease both;
}

.globe-eyebrow{
    margin:0 0 18px;
    color:#dcb25a;
    font-size:12px;
    letter-spacing:5px;
    line-height:1.6;
    text-transform:uppercase;
}

.globe-copy h1{
    margin:0 0 22px;
    color:#fff;
    font-size:clamp(42px,5vw,64px);
    line-height:1.18;
    font-weight:750;
    letter-spacing:-1px;
}

.globe-copy p:not(.globe-eyebrow){
    margin:0;
    color:#b8c1cf;
    font-size:18px;
    line-height:2;
    max-width:480px;
}

.globe-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.globe-stage{
    position:absolute;
    inset-inline-end:-10%;
    top:50%;
    z-index:3;
    width:65vw;
    height:65vw;
    max-width:900px;
    max-height:900px;
    transform:translateY(-50%);
    animation:globeFloat 14s ease-in-out infinite;
}

#logistics-globe{
    width:100%;
    height:100%;
    max-width:none;
    display:block;
    filter:drop-shadow(0 0 90px rgba(198,149,46,.22));
}

.globe-stage::after{
    content:"";
    position:absolute;
    inset:15%;
    border-radius:50%;
    background:radial-gradient(circle,transparent 45%,rgba(198,149,46,.12));
    pointer-events:none;
}

.globe-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    pointer-events:none;
}

.globe-center span{
    color:#fff;
    font-size:26px;
    letter-spacing:5px;
}

.globe-center small{
    display:block;
    margin-top:8px;
    color:#dcb25a;
}

.globe-label{
    position:absolute;
    color:#dcb25a;
    font-size:12px;
    letter-spacing:2px;
    text-align:center;
    text-shadow:0 0 18px rgba(198,149,46,.5);
}


@keyframes heroReveal{
    from{opacity:0;transform:translateY(25px)}
    to{opacity:1;transform:none}
}

@keyframes globeFloat{
    0%,100%{transform:translateY(-50%) translateX(0) scale(1)}
    50%{transform:translateY(-52%) translateX(-12px) scale(1.015)}
}

@keyframes ambientLight{
    0%,100%{opacity:.6}
    50%{opacity:1}
}

@media(max-width:900px){
    .globe-hero{
        min-height:auto;
        width:100%;
        max-width:100%;
        padding-bottom:0;
        flex-direction:column;
        align-items:stretch;
        overflow:hidden;
    }

    .globe-hero::after{
        inset:0;
    }

    .globe-copy{
        width:100%;
        max-width:none;
        padding:44px 24px 28px;
    }

    .globe-copy h1{
        margin-bottom:18px;
        font-size:clamp(32px,9vw,42px);
        line-height:1.3;
    }

    .globe-copy p:not(.globe-eyebrow){
        max-width:none;
        font-size:16px;
        line-height:1.9;
    }

    .globe-eyebrow{
        margin-bottom:14px;
        font-size:11px;
        letter-spacing:3px;
    }

    .globe-actions{
        margin-top:24px;
    }

    .globe-stage{
        position:relative;
        inset:auto;
        top:auto;
        width:100%;
        height:auto;
        max-width:100%;
        max-height:none;
        aspect-ratio:4 / 3;
        margin:0 auto;
        overflow:hidden;
        opacity:.86;
        transform:none;
        animation:none;
    }

    #logistics-globe{
        width:100%;
        height:100%;
    }

    .globe-label{
        font-size:9px;
    }

}

@media(max-width:560px){
    .globe-copy{
        padding:36px 20px 24px;
    }

    .globe-copy h1{
        font-size:clamp(30px,10vw,38px);
    }

    .globe-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .globe-actions .btn{
        width:100%;
        min-height:48px;
    }

    .globe-stage{
        aspect-ratio:1 / 1;
    }

}

@media(prefers-reduced-motion:reduce){
    .globe-copy,
    .globe-stage,
    .globe-hero::after{
        animation:none;
    }
}

/* DESKTOP HERO CALIBRATION */
@media (min-width:901px){
  .globe-hero{
    min-height:calc(100vh - 78px);
    min-height:calc(100svh - 78px);
    padding-bottom:0;
  }
  .globe-copy{width:48%;max-width:720px;padding:54px clamp(34px,4.5vw,88px)}
  .globe-eyebrow{margin-bottom:16px;letter-spacing:4px}
  .globe-copy h1{max-width:680px;margin-bottom:20px;font-size:clamp(40px,3.5vw,58px);line-height:1.3}
  .globe-copy p:not(.globe-eyebrow){max-width:620px;font-size:17px;line-height:1.95}
  .globe-actions{margin-top:26px}
  .globe-stage{
    inset:0 0 0 auto;
    width:58%;
    height:auto;
    max-width:none;
    max-height:none;
    overflow:hidden;
    opacity:.97;
    transform:none;
    animation:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 25%,#000 100%);
  }
  [dir="rtl"] .globe-stage{
    inset:0 auto 0 0;
    -webkit-mask-image:linear-gradient(to left,transparent 0%,#000 25%,#000 100%);
    mask-image:linear-gradient(to left,transparent 0%,#000 25%,#000 100%);
  }
  .globe-stage::after{inset:10%}
}

/* IMPORTANT IRAN BORDER CROSSINGS */
.globe-label-border{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  letter-spacing:.35px !important;
  text-shadow:
    0 1px 4px rgba(0,0,0,.98),
    0 0 10px rgba(0,0,0,.95),
    0 0 16px rgba(255,201,77,.20) !important;
}


/* RESPONSIVE MAP DETAIL */
@media (max-width:900px){
  .globe-stage{
    aspect-ratio:5 / 4;
    min-height:280px;
    max-height:580px;
  }

  .globe-label{
    display:none !important;
  }

  .globe-label[data-node="incheh"],
  .globe-label[data-node="gorgan"],
  .globe-label[data-node="bereket"],
  .globe-label[data-node="qyzylqaya"],
  .globe-label[data-node="uzen"],
  .globe-label[data-node="almaty"],
  .globe-label[data-node="urumqi"],
  .globe-label[data-node="tehran"],
  .globe-label[data-node="razi"],
  .globe-label[data-node="istanbul"],
  .globe-label[data-node="bandar"],
  .globe-label[data-node="chabahar"],
  .globe-label[data-node="aktau"]{
    display:block !important;
  }

  .globe-label-border{
    padding:0;
    font-size:8.5px !important;
  }
}

@media (max-width:560px){
  .globe-stage{
    aspect-ratio:5 / 4;
    min-height:270px;
    max-height:430px;
  }

  .globe-label[data-node="qyzylqaya"],
  .globe-label[data-node="almaty"],
  .globe-label[data-node="aktau"],
  .globe-label[data-node="chabahar"]{
    display:none !important;
  }

  .globe-label[data-node="incheh"]{
    display:block !important;
    font-size:11px !important;
    font-weight:700 !important;
    transform:translate(-70%,-230%) !important;
  }

  .globe-label[data-node="gorgan"]{
    transform:translate(-115%,-55%) !important;
  }

  .globe-label[data-node="bereket"]{
    transform:translate(10%,-220%) !important;
  }

  .globe-label[data-node="uzen"]{
    transform:translate(-20%,-220%) !important;
  }

  .globe-label[data-node="razi"]{
    transform:translate(0%,-230%) !important;
  }

  .globe-label[data-node="bandar"]{
    transform:translate(-70%,-210%) !important;
  }
}