#home{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


.hero{

    width:100%;

    display:flex;

    justify-content:center;

}


.hero-content{

    position:relative;

    overflow:hidden;

    width:1150px;

    padding:36px 42px;

    display:grid;

    grid-template-columns:

    minmax(0,1.15fr)

    minmax(280px,.85fr);

    align-items:center;

    gap:44px;

    text-align:left;

    border-radius:15px;

    background:

    rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:

    1px solid

    rgba(255,255,255,.28);

    background-image:none;

    box-shadow:

    0 15px 30px

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

}

.hero-content::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:15px;

    pointer-events:none;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.26),

        rgba(255,255,255,.12)

    );

    opacity:.75;

}

.hero-copy{

    position:relative;

    z-index:1;

    min-width:0;

}

.hero-title{

    font-size: 32pt;

    font-weight:800;

    line-height:1.2;

    color:var(--text);

}

.hero-title .hero-accent{

    display:block;

    background:

    linear-gradient(

        90deg,

        #06f7c7,

        #2196f3

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:

    transparent;

}

.hero-description{

    margin-top:20px;

    font-size:14pt;

    line-height:1.7;

    color:var(--text-secondary);

}

.hero-title .hero-name{

    display:block;

    background:none;

    -webkit-text-fill-color:var(--text);

    color:var(--text);

}

.hero-intro{

    margin-top:22px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.hero-intro span{

    padding:10px 14px;

    border-radius:14px;

    background:

    rgba(255,255,255,.14);

    border:

    1px solid

    rgba(255,255,255,.18);

    color:var(--text);

    font-size:10pt;

    font-weight:600;

}

.hero-buttons{

    margin-top:40px;

    display:flex;

    justify-content:flex-start;

    gap:25px;

}

.hero-profile{

    position:relative;

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.profile-frame{

    position:relative;

    width:min(320px,100%);

    aspect-ratio:1;

    padding:10px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        #06f7c7,

        #2196f3

    );

    box-shadow:

    0 20px 45px

    rgba(33,150,243,.16);

}

.profile-frame::after{

    content:"";

    position:absolute;

    inset:22px -12px -12px 22px;

    border-radius:28px;

    border:

    1px solid

    rgba(255,255,255,.22);

    z-index:-1;

}

.profile-frame img,
.profile-fallback{

    width:100%;

    height:100%;

    border-radius:22px;

    object-fit:cover;

    background:var(--card);

}

.profile-fallback{

    display:none;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:52pt;

    font-weight:800;

    letter-spacing:0;

    background:

    linear-gradient(

        135deg,

        #18253d,

        #22304c

    );

}

.profile-note{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:18px;

    color:var(--text);

    background:

    rgba(255,255,255,.14);

    border:

    1px solid

    rgba(255,255,255,.18);

    box-shadow:

    0 10px 25px

    rgba(0,0,0,.06);

}

.profile-note i{

    color:#14e1fc;

}

.btn-primary{

    padding:12px 20px;

    border:none;

    border-radius:18px;

    color:white;

    font-size:10pt;

    font-weight:600;

    cursor:pointer;

    background:

    linear-gradient(

        90deg,

        #05fbea,

        #2195f351,

        #7c4dff,

        #05fbea

    );

    background-size:

    300% auto;

    animation:

    gradientBtn 5s linear infinite;

    transition:

    transform .4s ease,

    box-shadow .4s ease;

}

/* animation button */
@keyframes gradientBtn{

    0%{

        background-position:

        0% center;

    }

    100%{

        background-position:

        300% center;

    }

}

.btn-secondary{

    padding:12px 20px;

    border:

    2px solid #8fd3ff;

    border-radius:18px;

    background:transparent;

    color:var(--text);

    font-size:10pt;

    font-weight:600;

    cursor:pointer;

    transition: all .5s ease;

}

.btn-primary:hover, .btn-secondary:hover{

    transform:translateY(-3px);

    background:

    linear-gradient(

        90deg,

        #05fbea,

        #2196f3

    );

    box-shadow:

    0 10px 25px

    rgba(33,150,243,.3);

}

@media(max-width:900px){

    #home{

        padding:120px 0 60px;

    }

    .hero-content{

        width:min(92%,1150px);

        grid-template-columns:1fr;

        padding:30px 22px;

        text-align:center;

    }

    .hero-buttons,
    .hero-intro{

        justify-content:center;

    }

    .hero-title{

        font-size:26pt;

    }

    .profile-frame{

        width:min(260px,100%);

    }

}

@media(max-width:520px){

    .hero-title{

        font-size:22pt;

    }

    .hero-description{

        font-size:12pt;

    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;

    }

}