/* =========================================
   VRChatCustom 2.0
   Hero Section Styles
========================================= */



/* ===============================
   HERO CONTAINER
================================ */


.hero {

    min-height:

    100vh;


    padding-top:

    180px;


    display:

    flex;


    align-items:

    center;


    justify-content:

    space-between;


    gap:

    80px;


    position:

    relative;


    overflow:

    hidden;


}






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


.hero-content {


    max-width:

    700px;



}





/* ===============================
   HERO TAG
================================ */


.hero-tag {


    display:

    inline-flex;


    align-items:

    center;


    gap:

    8px;



    padding:

    10px 18px;



    border-radius:

    var(--radius-full);



    background:

    rgba(0,245,212,.08);



    border:

    1px solid rgba(0,245,212,.25);



    color:

    var(--primary);



    font-size:

    13px;



    font-weight:

    700;



    letter-spacing:

    1px;



    margin-bottom:

    30px;



}






/* ===============================
   HERO TITLE
================================ */


.hero h1 {


    font-family:

    var(--font-title);



    font-size:

    clamp(
        45px,
        6vw,
        78px
    );



    line-height:

    1.1;



    letter-spacing:

    -2px;



    color:

    var(--text-primary);



    margin-bottom:

    30px;



}






.hero h1 span {


    display:

    block;



    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );



    -webkit-background-clip:

    text;



    -webkit-text-fill-color:

    transparent;



    filter:

    drop-shadow(
        0 0 25px
        rgba(0,245,212,.35)
    );



}







/* ===============================
   HERO DESCRIPTION
================================ */


.hero p {


    max-width:

    560px;



    color:

    var(--text-secondary);



    font-size:

    19px;



    line-height:

    1.8;



    margin-bottom:

    40px;



}







/* ===============================
   HERO BUTTONS
================================ */


.hero-buttons {


    display:

    flex;



    align-items:

    center;



    gap:

    20px;



}







/* ===============================
   HERO PREVIEW AREA
================================ */


.hero-preview {


    position:

    relative;



    width:

    450px;



    height:

    450px;



}







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


.floating-card {


    position:

    absolute;



    width:

    300px;



    padding:

    30px;



    border-radius:

    var(--radius-large);



    background:

    var(--card-bg);



    border:

    1px solid var(--glass-border);



    backdrop-filter:

    blur(20px);



    box-shadow:

    var(--shadow-medium);



    animation:

    float 5s ease-in-out infinite;



}







.floating-card:first-child {


    top:

    60px;


    left:

    40px;



}





.floating-card.second {


    bottom:

    60px;



    right:

    10px;



    animation-delay:

    2s;



}







/* ===============================
   CARD ICON
================================ */


.card-icon {


    width:

    55px;



    height:

    55px;



    display:

    flex;



    align-items:

    center;



    justify-content:

    center;



    border-radius:

    18px;



    background:

    rgba(0,245,212,.1);



    color:

    var(--primary);



    font-size:

    25px;



    margin-bottom:

    20px;



}







.floating-card h3 {


    font-size:

    22px;



    margin-bottom:

    10px;



}







.floating-card p {


    font-size:

    14px;



    color:

    var(--text-secondary);



    margin:

    0;



}







/* ===============================
   HERO GLOW CIRCLE
================================ */


.hero::before {


    content:"";


    position:

    absolute;



    width:

    600px;



    height:

    600px;



    right:

    -200px;



    top:

    100px;



    background:

    radial-gradient(
        circle,
        rgba(0,245,212,.18),
        transparent 70%
    );



    filter:

    blur(50px);



    z-index:

    -1;



}







/* ===============================
   FLOAT ANIMATION
================================ */


@keyframes float {


    0% {


        transform:

        translateY(0);



    }



    50% {


        transform:

        translateY(-20px);



    }



    100% {


        transform:

        translateY(0);



    }


}