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

#hero{

    padding:50px 0 120px;

    overflow:hidden;

    background:#f8f7f5;

}


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

#hero .container-hero{

    width:100%;

    margin:0 auto;

    padding:0;

    display:flex;

    flex-direction:column;

}


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

.hero-heading{

    width:100%;

    margin-bottom:2px;

    text-align:center;

}


.hero-title{

    margin:0;

    font-size:76px;

    line-height:1;

    font-weight:800;

    letter-spacing:-4px;

    color:#111827;

}


.hero-title span{

    color:#2563eb;

}


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

.hero-slider{

    position:relative;

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}


/* ==========================================
   SLIDER VIEWPORT
========================================== */

.hero-slider-viewport{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:25px 0 35px;

}


/* ==========================================
   SLIDER TRACK
========================================== */

.hero-slider-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    margin:0 auto;

    padding:0;

    transform:translate3d(0,0,0);

    will-change:transform;

    transition:
        transform 900ms cubic-bezier(.76,0,.24,1);

}


/* ==========================================
   SLIDE
========================================== */

.hero-slide{

    position:relative;

    flex:0 0 clamp(
        680px,
        76vw,
        1080px
    );

    margin:0;

    padding:0;

    transform:scale(1);

    opacity:.38;

    filter:saturate(.85);

    transition:
        opacity 700ms ease,
        filter 700ms ease;

    will-change:
        opacity,
        filter;

}


/* ==========================================
   ACTIVE SLIDE
========================================== */

.hero-slide.is-active{

    transform:scale(1);

    opacity:1;

    filter:none;

    z-index:3;

}


/* ==========================================
   PREVIOUS / NEXT SLIDES
========================================== */

.hero-slide.is-prev,
.hero-slide.is-next{

    opacity:.55;

    filter:saturate(.9);

    z-index:1;

}


/* ==========================================
   SLIDE IMAGE
========================================== */

.hero-slide img{

    display:block;

    width:100%;

    height:auto;

    border-radius:26px;

    background:#ffffff;

}


/* ==========================================
   SLIDER GLOW
========================================== */

.hero-slider::before{

    content:"";

    position:absolute;

    width:850px;

    height:500px;

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%);

    background:
        linear-gradient(
            90deg,
            rgba(37,99,235,.10),
            rgba(124,58,237,.08)
        );

    filter:blur(120px);

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

}


/* ==========================================
   HERO ACTION ROW
========================================== */

.hero-action-row{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

    margin-top:5px;

}


/* ==========================================
   START FREE
========================================== */

.hero-start-button{

    flex:0 0 auto;

    min-width:240px;

    height:62px;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:16px;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

}


/* ==========================================
   PRIMARY BUTTON
========================================== */

.hero-action-row .btn-primary{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #7c3aed
        );

    color:#ffffff;

    box-shadow:
        0 10px 28px rgba(124,58,237,.25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.hero-action-row .btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:45%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-25deg);

    animation:
        buttonShine 5s linear infinite;

    pointer-events:none;

}


.hero-action-row .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 16px 40px rgba(124,58,237,.35);

}


/* ==========================================
   WATCH DEMO
========================================== */

.hero-demo-button{

    flex:0 0 auto;

    min-width:240px;

    height:62px;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:16px;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    background:#ffffff;

    color:#111827;

    border:1px solid #d1d5db;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.hero-demo-button:hover{

    background:#f8fafc;

    border-color:#bfc5ce;

    transform:translateY(-2px);

    box-shadow:
        0 10px 28px rgba(15,23,42,.08);

}


/* ==========================================
   SLIDER CONTROLS
========================================== */

.hero-slider-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    flex:0 0 auto;

}


/* ==========================================
   SLIDER ARROWS
========================================== */

.hero-slider-arrow{

    width:38px;

    height:38px;

    flex:0 0 38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #e5e7eb;

    border-radius:50%;

    background:#ffffff;

    color:#111827;

    cursor:pointer;

    box-shadow:
        0 5px 18px rgba(15,23,42,.06);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.hero-slider-arrow:hover{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(37,99,235,.22);

}


.hero-slider-arrow i{

    font-size:12px;

}


/* ==========================================
   SLIDER DOTS
========================================== */

.hero-slider-dots{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

}


/* ==========================================
   DOT
========================================== */

.hero-slider-dots button{

    width:7px;

    height:7px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#cbd5e1;

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;

}


/* ==========================================
   ACTIVE DOT
========================================== */

.hero-slider-dots button.active{

    width:24px;

    border-radius:999px;

    background:#2563eb;

}


/* ==========================================
   BUTTON SHINE
========================================== */

@keyframes buttonShine{

    0%,
    80%{

        left:-140%;

    }

    100%{

        left:150%;

    }

}