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

.product-hero{

    position:relative;

    height:100vh;

    min-height:900px;

    overflow:hidden;

    background:#fff;

    position:relative;
	
}

/*=========================*/

.hero-bg{

    position:absolute;

    inset:0;

    background-image:url("../../assets/img/news/productbg.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.hero-bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

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

        rgba(255,255,255,.12)

    );

}

.hero-bg::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    left:60%;
    top:42%;

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

    background:

    radial-gradient(circle,
    rgba(37,99,235,.15),
    transparent 70%);

    filter:blur(90px);

}

/*=========================*/

.hero-product-wrap{

    position:absolute;

    left:60%;

    top:40%;

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

    z-index:10;

}

.hero-product-wrap.switching{

    animation:

        productSwitch

        .9s

        cubic-bezier(.22,.61,.36,1)

        forwards;

}

/*=========================*/

.hero-product{

    position:relative;

}
/*====================================
PRODUCT SWITCH
====================================*/

.hero-product-motion{

    position:relative;

    width:100%;
    height:100%;

    transform:
        perspective(2200px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(0);

}

.hero-product-motion.floating{

    animation:

        productFloat 9s ease-in-out infinite;

}

@keyframes productFloat{

    0%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0px);

    }

    15%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0px);

    }

    45%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(-12px);

    }

    60%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(-12px);

    }

    90%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0px);

    }

    100%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0px);

    }

}

.hero-product-motion.enter{

    animation:

        productEntrance

        1.2s

        cubic-bezier(.22,.61,.36,1)

        forwards;

}

.hero-product-motion.switching{

    animation:

        productSwitch

        .9s

        cubic-bezier(.22,.61,.36,1)

        forwards;

}

@keyframes productSwitch{

    0%{

        opacity:1;

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0)
            scale(1);

    }

30%{

    opacity:0;

    transform:
        perspective(2200px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(70px)
        scale(1);

}

55%{

    opacity:0;

    transform:
        perspective(2200px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(70px)
        scale(1);

}

    100%{

        opacity:1;

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(0)
            scale(1);

    }

}

@keyframes productEntrance{

    0%{

        transform:
            perspective(2200px)
            rotateX(2deg)
            rotateY(-2deg)
            translateY(420px);

        opacity:0;

    }

    45%{

        opacity:1;

    }

100%{

    transform:
        perspective(2200px)
        rotateX(2deg)
        rotateY(-2deg)
        translateY(0);

}

}

.product-off{

    width:560px;

    display:block;

    filter:

        drop-shadow(0 45px 50px rgba(0,0,0,.18))
        drop-shadow(0 10px 15px rgba(0,0,0,.08));

}

.product-on{

    position:absolute;

    top:0;
    left:0;

    inset:0;

    width:560px;

    opacity:0;

    filter:
        brightness(2)
        blur(10px);

    transform:scale(.98);

    transition:

        opacity .45s ease,
        filter .6s ease,
        transform .6s ease;
}


.hero-product::before{

    content:"";

    position:absolute;

    top:-25px;
    left:50%;

    transform:translateX(-50%);

    width:260px;
    height:90px;

    background:radial-gradient(
        ellipse,
        rgba(255,255,255,.95),
        transparent 70%
    );

    filter:blur(18px);

    z-index:20;

    pointer-events:none;

}

.screen-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:120px;
    height:120px;

    border-radius:50%;

    transform:translate(-50%,-50%) scale(.2);

    background:

        radial-gradient(circle,

        rgba(255,255,255,.95),

        rgba(65,145,255,.45),

        transparent 70%);

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.3);

    transition:

        opacity .5s ease,
        transform .7s ease;

    filter:blur(40px);

    pointer-events:none;

}


@keyframes screenGlow{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        scale(.2);

    }

    25%{

        opacity:1;

    }

    100%{

        opacity:0;

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

    }

}

@keyframes screenOn{

    0%{

        opacity:0;

        filter:
            brightness(2.5)
            blur(18px);

        transform:scale(.96);

    }

    60%{

        opacity:1;

    }

    100%{

        opacity:1;

        filter:
            brightness(1)
            blur(0);

        transform:scale(1);

    }

}

/*=========================
SCREEN ACTIVE
=========================*/

.product-on.active{

    animation:screenOn .7s ease forwards;

}

.screen-glow.active{

    animation:screenGlow .6s ease forwards;

}

/*====================================
SIDEBAR
====================================*/

.hero-sidebar{

    position:absolute;

    left:3%;

    top:50%;

    transform:translateY(-50%);

    width:340px;

    z-index:20;

}

.sidebar-badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:#edf4ff;

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:45px;

}

.product-menu{

    margin:0;
    padding:0;

    list-style:none;

}

.product-menu li{

    display:flex;

    gap:24px;

    margin-bottom:34px;

    cursor:pointer;

transition:all .45s cubic-bezier(.22,.61,.36,1);

}

.menu-number{

    font-size:36px;

    font-weight:200;

    color:#c5ccd8;

    min-width:48px;

    transition:
        color .45s ease,
        transform .45s cubic-bezier(.22,.61,.36,1);

}

.menu-content{

    flex:1;

}

.menu-content h3{

    font-family:"Manrope", sans-serif;

    font-size:22px;

    font-weight:700;

    letter-spacing:-0.3px;

    color:#6c7482;

    margin-bottom:16px;

transition:
    color .45s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}

.product-menu li.active .menu-number{

    color:#2563eb;

    transform:translateX(6px);

}

.product-menu li.active h3{

    color:#111827;

    transform:translateX(6px);

}

.menu-line{

    position:relative;

    width:100%;

    height:2px;

    background:#edf2f8;

    overflow:hidden;

}

.menu-line::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:#2563eb;

    transform:scaleX(0);

    transform-origin:left;

    transition:

        transform .55s cubic-bezier(.22,.61,.36,1);

}
.product-menu li:hover .menu-number{

    color:#2563eb;

}

.product-menu li:hover h3{

    color:#111827;

}

.product-menu li:hover .menu-line::before{

    width:100%;

}

.product-menu li.active .menu-number{

    color:#2563eb;

}

.product-menu li.active h3{

    color:#111827;

}

.product-menu li.active .menu-line::before{

    width:100%;

    transform:scaleX(1);

}

.product-menu li{

    display:flex;

    gap:24px;

    margin-bottom:34px;

    cursor:pointer;

    transition:.35s ease;

    opacity:0;

    transform:translateX(-35px);

}

.product-menu li.show{

    opacity:1;

    transform:translateX(0);

    transition:

        opacity .65s cubic-bezier(.22,.61,.36,1),

        transform .65s cubic-bezier(.22,.61,.36,1);

}


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

.hero-info{

    position:absolute;

    right:7%;

    top:57%;

    transform:translateY(-50%);

    width:360px;

    z-index:20;

}

.hero-category{

    display:inline-block;

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:20px;

    text-transform:uppercase;

}

.hero-info h1{

    font-family:"Manrope", sans-serif;

    font-size:48px;

    font-weight:800;

    line-height:1;

    letter-spacing:-1.6px;

    color:#111827;

    margin-bottom:20px;

}

.hero-info p{

    font-size:20px;

    line-height:1.8;

    color:#667085;

    margin-bottom:18px

}

#productDescription{

    margin-top:28px;

    margin-bottom:40px;

	max-width:340px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

    margin-top:16px;

}

.hero-btn:hover{

    transform:translateY(-3px);

}


/*====================================
SPEC SUMMARY
====================================*/

.spec-summary{

    margin-top:45px;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.spec-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:16px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.spec-label{

    font-size:14px;

    color:#98A2B3;

    letter-spacing:.5px;

    text-transform:uppercase;

    font-weight:600;

}

.spec-value{

    font-size:17px;

    font-weight:600;

    color:#101828;

}

/*====================================
BEZEL SELECTOR
====================================*/

.bezel-selector{

    position:absolute;

    top:205px;

    left:50%;

    transform:translateX(-50%);

    z-index:50;

    text-align:center;

}

.bezel-title{

    display:block;

    margin-bottom:12px;

    font-size:13px;

    font-weight:600;

    color:#98A2B3;

    text-transform:uppercase;

    letter-spacing:1px;

}

.bezel-options{

    display:flex;

    gap:10px;

    justify-content:center;

}

.bezel-btn{

    border:none;

    background:#fff;

    border:1px solid rgba(0,0,0,.08);

    border-radius:999px;

    padding:10px 22px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.bezel-btn.active{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}

.hero-brand{

    position:absolute;

    left:46%;
    top:190px;

    transform:translateX(-50%);

    z-index:50;

    pointer-events:none;

    opacity:1;

    transform:translateX(-50%) translateY(0);

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.hero-brand img{

    width:180px;

    height:auto;

}


@keyframes brandReveal{

    from{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(-20px);

    }

    to{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}


.hero-brand.switching{

    animation:

        brandSwitch

        .9s

        cubic-bezier(.22,.61,.36,1)

        forwards;

}

@keyframes brandSwitch{

    0%{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);

    }

    35%{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(-18px);

    }

    65%{

        opacity:0;

        transform:
            translateX(-50%)
            translateY(-18px);

    }

    100%{

        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}

.hero-reveal{

    transition:
        opacity .6s cubic-bezier(.22,.61,.36,1),
        transform .6s cubic-bezier(.22,.61,.36,1);

}

.hero-reveal.show{

    animation:

        revealUp

        .8s

        cubic-bezier(.22,.61,.36,1)

        forwards;

}

@keyframes revealUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.sidebar-badge{

    opacity:0;

    transform:translateX(-25px);

}

.sidebar-badge.show{

    opacity:1;

    transform:translateX(0);

    transition:

        opacity .6s cubic-bezier(.22,.61,.36,1),

        transform .6s cubic-bezier(.22,.61,.36,1);

}

/*====================================
PRODUCT INTRO
====================================*/

.product-intro{

    padding:60px 0;

    background:#fff;

    position:relative;

}

.product-intro .container{

    max-width:1100px;

    margin:auto;

}

.intro-text{

    margin:0;

    font-family:"Manrope",sans-serif;

    font-size:18px;

    font-weight:400;

    line-height:1.65;

    color:#1E293B;

    text-align:center;

    letter-spacing:-0.4px;

}

.intro-text{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.intro-text.show{

    opacity:1;

    transform:translateY(0);

}

/*====================================
APPLICATION SECTION
====================================*/

.application-section{

    position:relative;

    height:460px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:url("../../assets/img/icons/meetingroom.jpg") center center / cover no-repeat;

}

.application-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at left center,

        rgba(10,18,35,.88) 0%,

        rgba(10,18,35,.72) 28%,

        rgba(10,18,35,.45) 45%,

        rgba(10,18,35,.15) 62%,

        transparent 80%

    );

}

.application-content{

    position:relative;

    z-index:2;

    max-width:460px;

    color:#fff;

}

.section-label{

    display:inline-block;

    margin-bottom:24px;

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    text-transform:uppercase;

    color:#ffffffcc;

}

.application-content h2{

    font-family:"Manrope",sans-serif;

    font-size:48px;

    line-height:1.05;

    font-weight:700;

    margin-bottom:30px;

    letter-spacing:-2px;

}

.application-content p{

    font-size:18px;

    line-height:1.8;

    max-width:560px;

    color:rgba(255,255,255,.88);

}

/*====================================
APPLICATION ANIMATION
====================================*/

.application-content > *{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

}

.application-content.show .section-label{

    opacity:1;
    transform:translateY(0);

}

.application-content.show h2{

    opacity:1;
    transform:translateY(0);

    transition-delay:.15s;

}

.application-content.show p{

    opacity:1;
    transform:translateY(0);

    transition-delay:.30s;

}

.application-content.show .application-btn{

    opacity:1;
    transform:translateY(0);

    transition-delay:.45s;

}

.application-section{

    animation:kenBurns 20s ease-in-out infinite alternate;

}

@keyframes kenBurns{

    from{

        background-size:100%;

    }

    to{

        background-size:106%;

    }

}

/*====================================
FEATURE SECTION
====================================*/

.feature-section{

    padding:140px 0;

    background:#fff;

}

.feature-grid{

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:50px;

}

.feature-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.feature-image img{

    width:100%;

    max-width:760px;

}
.feature-label{

    display:inline-block;

    margin-bottom:18px;

    font-size:13px;

    font-weight:700;

    letter-spacing:3px;

    color:#2563eb;

    text-transform:uppercase;

}

.feature-content h2{

    font-family:"Manrope",sans-serif;

    font-size:52px;

    line-height:1.08;

    letter-spacing:-1.2px;

    font-weight:700;

    margin-bottom:28px;

}

.feature-content p{

    max-width:620px;

    font-size:21px;

    line-height:1.8;

}

.feature-content{

    padding-right:40px;

}

.feature-content.show{

    opacity:1;

    transform:translateX(0);

}

.feature-image{

    opacity:0;

    transform:translateX(-80px);

    transition:

        .9s cubic-bezier(.22,.61,.36,1);

}

.feature-content{

    opacity:0;

    transform:translateX(80px);

    transition:

        .9s cubic-bezier(.22,.61,.36,1);

}

.feature-image.show{

    opacity:1;

    transform:translateX(0);

}

/*====================================
FEATURE REVERSE
====================================*/

.feature-reverse .feature-grid{

    grid-template-columns:45% 55%;

}

.feature-reverse .feature-content{

    order:1;

    padding-right:60px;

}

.feature-reverse .feature-image{

    order:2;

    display:flex;

    justify-content:center;

}

.feature-reverse .feature-image img{

    width:100%;

    max-width:760px;

}

.feature-reverse .feature-content{

    opacity:0;

    transform:translateX(-80px);

    transition:.9s cubic-bezier(.22,.61,.36,1);

}

.feature-reverse .feature-image{

    opacity:0;

    transform:translateX(80px);

    transition:.9s cubic-bezier(.22,.61,.36,1);

}

.feature-reverse .feature-content.show{

    opacity:1;

    transform:translateX(0);

}

.feature-reverse .feature-image.show{

    opacity:1;

    transform:translateX(0);

}

/*====================================
FEATURE CENTER
====================================*/

.feature-center{

    padding:140px 0;

    background:#fff;

}

.feature-center-content{

    max-width:980px;

    margin:auto;

    text-align:center;

}

.feature-center-content h2{

    font-family:"Manrope",sans-serif;

    font-size:60px;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-1.6px;

    color:#1E293B;

    margin-bottom:24px;

}

.feature-center-content p{

    max-width:900px;

    margin:auto;

    font-size:22px;

    line-height:1.8;

    color:#64748B;

}

.feature-center-image{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

.feature-center-image img{

    width:100%;

    max-width:1200px;

    display:block;

    border-radius:34px;

    box-shadow:

        0 30px 70px rgba(15,23,42,.12);

    transition:.5s ease;

}

.feature-center-image img:hover{

    transform:translateY(-8px);

    box-shadow:

        0 40px 90px rgba(15,23,42,.16);

}

.feature-center-content{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .9s cubic-bezier(.22,.61,.36,1),

        transform .9s cubic-bezier(.22,.61,.36,1);

}

.feature-center-image{

    opacity:0;

    transform:scale(.94);

    transition:

        opacity 1s cubic-bezier(.22,.61,.36,1),

        transform 1s cubic-bezier(.22,.61,.36,1);

}

.feature-center-content.show{

    opacity:1;

    transform:translateY(0);

}

.feature-center-image.show{

    opacity:1;

    transform:scale(1);

}

/*====================================
FEATURE 04
====================================*/

.feature-fhd{

    padding:140px 0;

    background:

        radial-gradient(

            circle at right center,

            rgba(37,99,235,.08),

            transparent 45%

        ),

        #fff;

}

.feature-fhd .feature-image img{

    max-width:760px;

}

.feature-fhd .feature-content h2{

    max-width:700px;

}

/*====================================
FEATURE 05
====================================*/

.feature-operation{

    padding:140px 0;

    background:#fff;

}

.feature-operation .feature-image img{

    width:100%;

    max-width:760px;

}

/*====================================
FEATURE 06
====================================*/

.feature-splicing{

    padding:140px 0;

    background:#fff;

}

.feature-splicing .feature-center-content{

    max-width:1100px;

}

.feature-splicing .feature-center-content h2{

    max-width:900px;

    margin:auto;

    margin-bottom:24px;

}

.feature-splicing .feature-center-content p{

    max-width:980px;

    margin:auto;

}

.feature-splicing .feature-center-image{

    margin-top:60px;

}

.feature-splicing .feature-center-image img{

    width:100%;

    max-width:1200px;

    border-radius:32px;

    display:block;

    margin:auto;
}

/*====================================
FEATURE 07
====================================*/

.feature-heat{

    padding:140px 0;

    background:#fff;

}

.feature-heat .feature-image img{

    width:100%;

    max-width:760px;

    display:block;

    margin:auto;

}

.feature-heat .feature-content h2{

    max-width:650px;

}