/* ==========================================================
   CUSTOM CURSOR
========================================================== */

.cursor,
.cursor-dot{

    position:fixed;
    top:0;
    left:0;

    translate:-50% -50%;

    border-radius:50%;

    pointer-events:none;

    z-index:9999;

    mix-blend-mode:difference;

}

.cursor{

    width:36px;
    height:36px;

    border:1.5px solid #fff;

    transition:
        width .3s,
        height .3s,
        background .3s;

}

.cursor-dot{

    width:5px;
    height:5px;

    background:#fff;

}

.cursor.grow{

    width:64px;
    height:64px;

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

    border-color:transparent;

}

@media (hover:none), (pointer:coarse){

    .cursor,
    .cursor-dot{
        display:none;
    }

}



/* ==========================================================
   SCROLL PROGRESS BAR
========================================================== */

.progress{

    position:fixed;

    top:0;
    left:0;

    width:0;
    height:2px;

    z-index:1000;

    background:linear-gradient(
        90deg,
        var(--azure),
        var(--electric)
    );

    box-shadow:0 0 12px var(--azure);

}



/* ==========================================================
   NAVIGATION
========================================================== */

.nav{

    position:fixed;
    inset:0 0 auto 0;
    z-index:900;
    padding:20px 0;
    border-bottom:1px solid transparent;
    transition:
        background .4s,
        backdrop-filter .4s,
        border-color .4s,
        padding .4s;

}

.nav.scrolled{

    padding:13px 0;
    background:rgba(8,9,12,.72);
    backdrop-filter:blur(18px) saturate(140%);
    border-color:var(--line);

}



/* ==========================================================
   NAVIGATION LAYOUT
========================================================== */

.nav .wrap{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

}

.brand{

    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--display);
    font-size:18px;
    font-weight:900;
    letter-spacing:.02em;

}

.brand .logo-mark{

    flex:0 0 auto;

}

.brand b{

    color:var(--azure);

}



/* ==========================================================
   NAVIGATION LINKS
========================================================== */

.nav-links{

    display:flex;
    align-items:center;
    gap:30px;

}

.nav-links a{

    position:relative;
    color:var(--muted);

    font-size:14px;
    font-weight:500;
    transition:color .25s;

}

.nav-links a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;

    width:0;
    height:1px;
    background:var(--azure);
    transition:width .3s var(--ease);

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-cta{

    display:flex;
    align-items:center;
    gap:14px;

}



/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.burger{

    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
    z-index:910;

}

.burger span{

    width:24px;
    height:2px;
    background:#fff;
    transition:.35s var(--ease);

}

.burger.open span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.burger.open span:nth-child(2){

    opacity:0;

}

.burger.open span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}



/* ==========================================================
   NAVIGATION RESPONSIVE
========================================================== */

@media (max-width:880px){

    .nav-links{
        display:none;
    }

    .burger{
        display:flex;
    }

    .nav .wrap{
        gap:14px;
    }

}

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

.drawer{

    position:fixed;
    inset:0;
    z-index:905;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;

    padding:var(--pad);
    background:rgba(6,7,10,.96);
    backdrop-filter:blur(20px);
    transform:translateX(100%);
    transition:transform .5s var(--ease);

}

.drawer.open{

    transform:translateX(0);

}

.drawer a{

    padding:10px 0;
    border-bottom:1px solid var(--line);
    color:#fff;
    font-family:var(--display);
    font-size:clamp(28px,8vw,44px);
    font-weight:700;

}

.drawer a span{

    margin-right:16px;
    color:var(--azure);
    font-family:var(--mono);
    font-size:13px;
    font-weight:400;

}

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

.hero{

    min-height:100svh;

    display:flex;
    align-items:flex-end;
    padding-bottom:clamp(40px,6vw,90px);

    overflow:hidden;
    isolation:isolate;

}

.hero-photo{

    position:absolute;
    inset:0;

    z-index:-3;
    background:
        linear-gradient(
            rgba(5,5,7,.5),
            rgba(5,5,7,.82) 70%,
            var(--void)
        ),
        var(--img-hero)
        center/cover
        no-repeat;

    transform:scale(1.05);

}

#atmos{

    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;

}

.hero::after{

    content:"";
    position:absolute;
    inset:0;
    z-index:-1;

    background:
        radial-gradient(
            120% 90% at 75% 30%,
            rgba(30,134,214,.16),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(5,5,7,.4) 0%,
            rgba(5,5,7,.1) 40%,
            var(--void) 96%
        );

}

.hero-grid{

    position:absolute;
    inset:0;
    z-index:-1;

    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);

    background-size:64px 64px;
    mask-image:radial-gradient(
        circle at 50% 40%,
        #000,
        transparent 80%
    );

    opacity:.5;

}

.hero .wrap{

    width:100%;

}

@media (max-width:880px){

    .hero{

        min-height:auto;
        align-items:flex-start;
        padding-top:120px;
        padding-bottom:64px;

    }

}



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

.hero-eyebrow{

    margin-bottom:26px;

}

.hero h1{

    font-size:clamp(42px,8.2vw,104px);
    letter-spacing:-.03em;

}

.hero h1 .line{

    display:block;
    overflow:hidden;

}

.hero h1 .line span{

    display:block;
    transform:translateY(110%);
    animation:rise .9s var(--ease) forwards;

}

.hero h1 .line:nth-child(2) span{

    animation-delay:.12s;

}

.hero h1 em{

    font-style:normal;
    color:transparent;
    -webkit-text-stroke:1.5px var(--azure);

}

.hero-sub{

    max-width:38ch;
    margin:26px 0 34px;
    color:var(--muted);
    font-size:clamp(15px,2vw,20px);
    font-weight:500;
    opacity:0;
    animation:fade .8s .5s var(--ease) forwards;

}

.hero-sub b{

    color:var(--ink);
    font-weight:600;

}

.hero-cta{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

    opacity:0;
    animation:fade .8s .65s var(--ease) forwards;

}



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

.stats{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

    margin-top:clamp(46px,6vw,80px);
    padding-top:34px;

    border-top:1px solid var(--line);
    opacity:0;
    animation:fade .8s .8s var(--ease) forwards;

}

.stat .num{

    font-family:var(--display);
    font-size:clamp(32px,5vw,58px);
    font-weight:900;

    line-height:1;
    letter-spacing:-.03em;

    color:transparent;
    background:linear-gradient(
        120deg,
        #fff,
        var(--electric)
    );

    -webkit-background-clip:text;
    background-clip:text;

}

.stat .lbl{

    margin-top:10px;
    color:var(--faint);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;

}

@media (max-width:680px){

    .stats{

        grid-template-columns:repeat(2,1fr);
        gap:28px 18px;

    }

}



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

@keyframes rise{

    to{

        transform:translateY(0);

    }

}

@keyframes fade{

    to{

        opacity:1;

    }

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    padding-block:clamp(48px,6vw,80px) 36px;
    border-top:1px solid var(--line);
    background:var(--void);

}

.foot-grid{

    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;

}

@media (max-width:820px){

    .foot-grid{

        grid-template-columns:1fr 1fr;
        gap:34px;

    }

}

@media (max-width:480px){

    .foot-grid{
        grid-template-columns:1fr;

    }

}



/* ==========================================================
   FOOTER CONTENT
========================================================== */

.foot-brand p{

    max-width:32ch;
    color:var(--muted);
    font-size:14px;

}

.foot-col h5{

    margin-bottom:16px;
    color:var(--azure);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;

}

.foot-col a{

    display:block;
    padding:5px 0;
    color:var(--muted);
    font-size:14px;
    transition:color .2s;

}

.foot-col a:hover{

    color:#fff;

}



/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.foot-bottom{

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;

    margin-top:50px;
    padding-top:26px;
    border-top:1px solid var(--line);
    color:var(--faint);
    font-size:13px;

}

.foot-bottom .by{

    font-family:var(--mono);
    font-size:11px;

}

.foot-bottom .by a{

    color:var(--azure);

}



/* ==========================================================
   FLOATING ACTION BUTTONS
========================================================== */

.fab{

    position:fixed;
    right:20px;
    bottom:20px;

    z-index:850;
    display:flex;
    flex-direction:column;
    gap:12px;

}

.fab a{

    display:grid;
    place-items:center;

    width:54px;
    height:54px;

    border-radius:50%;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    transition:transform .3s;

}

.fab a:hover{

    transform:scale(1.08);

}

.fab .wa{

    background:#25d366;
    color:#fff;

}

.fab .call{

    background:var(--azure);
    color:#fff;

}

.fab svg{

    width:24px;
    height:24px;

}



/* ==========================================================
   ACCESSIBILITY
========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

    outline:2px solid var(--electric);
    outline-offset:3px;

}