/* =====================================================
   INK & SNOW
   PREMIUM HERO SECTION
===================================================== */



.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

padding-top:140px;

background:

linear-gradient(
135deg,
#1C2533 0%,
#111821 100%
);

overflow:hidden;

position:relative;


}





/* =========================
   BACKGROUND EFFECTS
========================= */


.hero::before{


content:"";

position:absolute;

width:700px;

height:700px;

right:-200px;

top:-150px;


background:

radial-gradient(
circle,
rgba(198,155,60,.35),
transparent 65%
);


filter:blur(30px);


}





.hero::after{


content:"";

position:absolute;

width:500px;

height:500px;

left:-200px;

bottom:-200px;


background:

radial-gradient(
circle,
rgba(232,237,242,.15),
transparent 65%
);


filter:blur(50px);


}






/* =========================
   HERO CONTENT
========================= */


.hero-content{


width:55%;

position:relative;

z-index:10;


}





.hero-small{


color:var(--gold);

font-size:.9rem;

letter-spacing:5px;

font-weight:700;

margin-bottom:25px;


}




.hero h1{


font-size:

var(--title-size);


line-height:

1.04;


font-weight:

700;

font-family: var(--font-display);

color:white;

letter-spacing: -.02em;


margin-bottom:35px;


}




.hero h1 span{


background:

var(--gold-gradient);


-webkit-background-clip:text;

background-clip:text;


color:transparent;

-webkit-text-fill-color: transparent;


}






.hero-description{


max-width:600px;


font-size:1.1rem;


color:#D5D9DE;


margin-bottom:45px;


}







.hero-buttons{


display:flex;

gap:20px;

flex-wrap:wrap;


}








/* =========================
   HERO VISUAL
========================= */



.hero-visual{


width:45%;

height:600px;

position:relative;

display:flex;

align-items:center;

justify-content:center;


z-index:1;


}






/* =========================
   3D GLOBE
========================= */


.globe{


width:350px;

height:350px;


border-radius:50%;


background:


radial-gradient(
circle at 30% 30%,
#ffffff,
#E8EDF2 20%,
#BFC1C2 45%,
#6d7480 100%
);



box-shadow:


0 0 80px rgba(198,155,60,.4),

inset -40px -40px 80px rgba(0,0,0,.3);



position:relative;


animation:

float 6s ease-in-out infinite;


}




/* China location point */


.china-dot{


position:absolute;


width:18px;

height:18px;


background:var(--gold);


border-radius:50%;


right:80px;

top:130px;


box-shadow:

0 0 30px var(--gold);


animation:

pulse 2s infinite;


}





/* =========================
   FLOATING CARDS
========================= */



.floating-card{


position:absolute;


background:

rgba(255,255,255,.12);


backdrop-filter:

blur(20px);


border:

1px solid rgba(255,255,255,.25);


padding:20px 30px;


border-radius:

20px;


color:white;


box-shadow:

0 20px 50px rgba(0,0,0,.25);


animation:

float 5s ease-in-out infinite;

z-index: 3;

pointer-events: none;

}





.floating-card h3{


font-size:2rem;

color:var(--gold);


}





.floating-card p{


color:white;

font-size:.85rem;


}





.card-one{


top:90px;

right:30px;


}



.card-two{


bottom:150px;

left:20px;


animation-delay:1s;


}



.card-three{


bottom:40px;

right:80px;


animation-delay:2s;


}







/* =========================
   ANIMATIONS
========================= */


@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}




@keyframes pulse{


0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(198,155,60,.7);


}



70%{

transform:scale(1.2);

box-shadow:0 0 0 25px rgba(198,155,60,0);


}


100%{

transform:scale(1);

}


}







/* =========================
   SCROLL INDICATOR
========================= */


.scroll{


position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);


display:flex;

flex-direction:column;

align-items:center;


color:white;


}



.scroll span{


width:2px;

height:60px;


background:

var(--gold);


animation:

scrollMove 2s infinite;


}





.scroll p{


font-size:.8rem;

margin-top:10px;

letter-spacing:3px;


}






@keyframes scrollMove{


0%{

height:20px;

opacity:0;

}


50%{

height:60px;

opacity:1;

}


100%{

height:20px;

opacity:0;

}


}







/* =========================
   MOBILE
========================= */


@media(max-width:900px){



.hero {
    position: relative;
    overflow: hidden;
}


/* THREE JS GLOBE */
.hero-visual {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
    pointer-events: none;
}




.hero-content{

position:relative;

z-index:5;

}   



.hero-description{


margin-left:auto;

margin-right:auto;


}






.globe{


width:260px;

height:260px;


}



.floating-card{


padding:15px;


}



.card-one{

right:0;

}



.card-two{

left:0;

}


}
/* Three.js canvas */

.hero-visual canvas{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:1;

}



.globe{

opacity:0;

}