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

.hero{
    min-height:760px;

    padding:
        calc(var(--header-h) + 78px)
        0
        70px;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;
}


/* =========================================================
   HERO GRID
========================================================= */

.hero-grid{
    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:54px;

    align-items:center;
}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy{
    max-width:600px;
}


.eyebrow{
    font-size:15px;

    color:#c1d0e5;

    margin-bottom:10px;
}


.hero h1{
    margin:0;

    font-size:
        clamp(
            58px,
            7vw,
            96px
        );

    line-height:.94;

    letter-spacing:-.055em;

    overflow:visible;
}


.hero h1 span{
    display:block;
}


.gradient-text{
    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-2)
        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    padding-bottom:.16em;
}


.hero-role{
    font-size:19px;

    font-weight:800;

    margin:
        16px 0 13px;
}


.hero-lead{
    color:var(--muted);

    font-size:16px;

    line-height:1.86;

    max-width:560px;

    margin:0;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:25px;
}


/* =========================================================
   HERO TAGS
========================================================= */

.hero-tags{
    display:flex;

    gap:8px;

    flex-wrap:wrap;

    margin-top:22px;
}


.hero-tags span{
    font-size:11px;

    border:
        1px solid var(--line);

    padding:
        7px 10px;

    border-radius:999px;

    color:var(--muted);

    background:
        rgba(
            255,
            255,
            255,
            .02
        );
}


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

.hero-visual{
    position:relative;

    min-height:520px;
}


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

.hero-glow{
    position:absolute;

    width:76%;
    height:68%;

    right:3%;
    top:7%;

    border-radius:
        48% 52% 43% 57%
        /
        54% 46% 54% 46%;

    background:
        radial-gradient(
            circle at 52% 36%,
            rgba(
                var(--accent-rgb),
                .18
            ),
            rgba(
                24,
                40,
                68,
                .14
            )
            58%,
            transparent
            75%
        );

    border:
        1px solid
        rgba(
            var(--accent-rgb),
            .1
        );

    box-shadow:
        var(--shadow);
}


/* =========================================================
   HERO PERSON
========================================================= */

.hero-person{
    position:absolute;

    width:59%;

    right:0;

    bottom:15px;

    z-index:4;

    filter:
        drop-shadow(
            0 22px 36px
            rgba(
                0,
                0,
                0,
                .28
            )
        );

    animation:
        heroFloat
        6s
        ease-in-out
        infinite;
}


@keyframes heroFloat{

    50%{
        transform:
            translateY(-7px);
    }

}


/* =========================================================
   SPEECH BUBBLE
========================================================= */

.hero-bubble{
    position:absolute;

    left:7%;

    top:54px;

    z-index:6;

    max-width:330px;

    background:#fff;

    color:#101828;

    border-radius:24px;

    padding:
        15px 18px;

    font-weight:800;

    line-height:1.4;

    box-shadow:
        0 18px 38px
        rgba(
            0,
            0,
            0,
            .18
        );
}


.hero-bubble:after{
    content:"";

    position:absolute;

    width:20px;
    height:20px;

    background:#fff;

    right:54px;

    bottom:-8px;

    transform:
        rotate(45deg);

    border-radius:
        0 0 4px 0;
}


/* =========================================================
   ANYDESK CARD
========================================================= */

.anydesk-card{
    position:absolute;

    left:2%;

    top:180px;

    z-index:6;

    width:280px;

    border:
        1px solid
        rgba(
            150,
            175,
            215,
            .32
        );

    background:
        linear-gradient(
            180deg,
            #fff,
            #edf4ff
        );

    color:#121b2a;

    border-radius:22px;

    padding:16px;

    box-shadow:
        0 18px 38px
        rgba(
            0,
            0,
            0,
            .17
        );
}


/* =========================================================
   ANYDESK BRAND
========================================================= */

.anydesk-brand{
    display:flex;

    align-items:center;

    gap:10px;

    font-size:20px;
}


.anydesk-mark{
    width:24px;
    height:24px;

    position:relative;

    flex:
        0 0 auto;
}


.anydesk-mark:before,
.anydesk-mark:after{
    content:"";

    position:absolute;

    width:15px;
    height:15px;

    background:#ff4b45;

    transform:
        rotate(45deg);

    top:4px;
}


.anydesk-mark:before{
    left:0;
}


.anydesk-mark:after{
    left:9px;
}


/* =========================================================
   ANYDESK LABEL
========================================================= */

.anydesk-label{
    font-size:12px;

    color:#6a7990;

    margin:
        12px 0 6px;
}


/* =========================================================
   ANYDESK ID
========================================================= */

.anydesk-id{
    display:flex;

    align-items:center;

    justify-content:space-between;

    border:
        1px solid #c9d7e9;

    border-radius:14px;

    padding:
        8px 9px 8px 13px;

    font-size:18px;

    font-weight:800;

    direction:ltr;

    background:#fff;
}


.anydesk-id button{
    width:36px;
    height:36px;

    border:0;

    border-radius:10px;

    background:#eef4ff;

    color:#285dba;

    cursor:pointer;
}


/* =========================================================
   HERO NOTE
========================================================= */

.hero-note{
    position:absolute;

    right:10%;

    top:112px;

    z-index:5;

    color:#bdd0ea;

    font-size:11px;

    font-weight:700;

    transform:
        rotate(-5deg);

    white-space:nowrap;
}


/* =========================================================
   HERO CLOUDS
========================================================= */

.hero-cloud{
    position:absolute;

    z-index:5;

    background:
        var(--cloud-strong);

    mask-repeat:no-repeat;

    mask-position:center;

    mask-size:contain;

    -webkit-mask-repeat:no-repeat;

    -webkit-mask-position:center;

    -webkit-mask-size:contain;

    pointer-events:none;
}


.hero-cloud-left{
    width:340px;
    height:120px;

    left:-35px;

    bottom:0;

    mask-image:
        url('../images/cloud-1.svg');

    -webkit-mask-image:
        url('../images/cloud-1.svg');
}


.hero-cloud-right{
    width:370px;
    height:125px;

    right:-55px;

    bottom:-7px;

    mask-image:
        url('../images/cloud-2.svg');

    -webkit-mask-image:
        url('../images/cloud-2.svg');
}


/* =========================================================
   SCROLL CUE
========================================================= */

.scroll-cue{
    position:absolute;

    left:50%;

    bottom:24px;

    transform:
        translateX(-50%);

    display:grid;

    justify-items:center;

    gap:7px;

    color:var(--muted);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.12em;
}


.scroll-cue span{
    width:18px;
    height:28px;

    border:
        1px solid
        var(--line-strong);

    border-radius:999px;

    position:relative;
}


.scroll-cue span:after{
    content:"";

    position:absolute;

    width:3px;
    height:6px;

    border-radius:3px;

    background:
        var(--accent);

    left:50%;

    top:6px;

    transform:
        translateX(-50%);

    animation:
        scrollDot
        1.5s
        ease-in-out
        infinite;
}


@keyframes scrollDot{

    50%{
        transform:
            translate(
                -50%,
                9px
            );

        opacity:.3;
    }

}