/* =====================================================
   CORE COMPUTER
   MAIN STYLESHEET
===================================================== */


/* =====================================================
   VARIABLES
===================================================== */

:root{

    --yellow:#FFD21F;

    --yellow-light:#FFE978;

    --yellow-dark:#E7B900;

    --orange:#FF9F1C;

    --black:#111111;

    --black-soft:#171717;

    --gray:#E7E7E7;

    --gray-dark:#A0A0A0;

    --white:#FFFFFF;

    --border:rgba(17,17,17,.14);

    --container:1180px;

}


/* =====================================================
   RESET
===================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    background:var(--yellow);

    color:var(--black);

    overflow-x:hidden;

}


body,
button,
a{

    -webkit-font-smoothing:antialiased;

}


img{

    max-width:100%;

}


a{

    text-decoration:none;

    color:inherit;

}


button{

    border:0;

    background:none;

    cursor:pointer;

}


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

.container{

    width:
        min(
            var(--container),
            calc(100% - 60px)
        );

    margin:auto;

}


/* =====================================================
   BACKGROUND
===================================================== */

.background-effects{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-1;

}


.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.25;

}


.glow-yellow{

    width:500px;

    height:500px;

    background:#FFE86A;

    top:-180px;

    right:-100px;

}


.glow-orange{

    width:400px;

    height:400px;

    background:#FF9F1C;

    bottom:-180px;

    left:-100px;

}


.glow-gray{

    width:350px;

    height:350px;

    background:#FFFFFF;

    top:45%;

    right:15%;

    opacity:.12;

}


/* =====================================================
   HEADER
===================================================== */

.site-header{

    position:relative;

    z-index:100;

    background:rgba(255,210,31,.88);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(17,17,17,.15);

}


.navbar{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/* =====================================================
   LOGO
===================================================== */

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-image {
    width: 145px;
    height: 48px;
    display: block;
    object-fit: contain;
    object-position: left center;
}


/* =====================================================
   DESKTOP MENU
===================================================== */

.desktop-menu{

    display:flex;

    align-items:center;

    gap:32px;

    font-size:13px;

    font-weight:800;

}


.desktop-menu a{

    transition:.2s;

}


.desktop-menu a:hover{

    opacity:.55;

}


.nav-contact{

    background:var(--black);

    color:var(--yellow);

    padding:13px 17px;

    border-radius:10px;

    font-size:12px;

    font-weight:900;

    transition:.2s;

}


.nav-contact:hover{

    transform:translateY(-2px);

}


.nav-contact span{

    margin-left:8px;

}


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

.mobile-menu-button{

    display:none;

    width:42px;

    height:42px;

    background:var(--black);

    border-radius:9px;

    padding:10px;

}


.mobile-menu-button span{

    display:block;

    height:2px;

    background:var(--yellow);

    margin:4px 0;

}


.mobile-menu{

    display:none;

    padding:15px;

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

}


.mobile-menu a{

    display:block;

    padding:15px;

    font-weight:800;

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

}


.mobile-menu-contact{

    background:var(--black);

    color:var(--yellow);

    margin-top:10px;

    border-radius:9px;

}


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

.hero{

    padding:
        100px
        0
        90px;

    position:relative;

}


.hero-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    align-items:center;

    gap:70px;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:var(--black);

    color:var(--yellow);

    padding:8px 12px;

    border-radius:100px;

    font-size:10px;

    font-weight:1000;

    letter-spacing:1px;

}


.status-dot{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#64E572;

    box-shadow:
        0 0 12px
        #64E572;

}


.hero h1{

    margin-top:25px;

    font-size:
        clamp(
            55px,
            7vw,
            92px
        );

    line-height:.88;

    letter-spacing:-6px;

    font-weight:1000;

}


.hero h1 span{

    display:block;

}


.hero h1 em{

    display:inline-block;

    font-style:normal;

    color:var(--yellow);

    background:var(--black);

    padding:
        5px
        14px
        8px;

    transform:
        rotate(-2deg);

    margin-top:5px;

}


.hero-description{

    max-width:560px;

    margin-top:32px;

    font-size:17px;

    line-height:1.65;

    font-weight:500;

}


.hero-description strong{

    font-weight:1000;

}


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

.hero-actions{

    display:flex;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

}


.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:15px 20px;

    border-radius:10px;

    font-size:13px;

    font-weight:1000;

    transition:.25s;

}


.button:hover{

    transform:translateY(-3px);

}


.button-black{

    background:var(--black);

    color:var(--yellow);

}


.button-outline{

    border:
        2px solid
        var(--black);

    color:var(--black);

}


.button-yellow{

    background:var(--yellow);

    color:var(--black);

}


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

.hero-stats{

    display:flex;

    gap:35px;

    margin-top:45px;

}


.hero-stats div{

    display:flex;

    flex-direction:column;

}


.hero-stats strong{

    font-size:13px;

}


.hero-stats span{

    color:#555;

    font-size:10px;

    margin-top:2px;

}


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

.hero-visual{

    position:relative;

    min-height:550px;

    display:grid;

    place-items:center;

}


.hero-card-back{

    position:absolute;

    width:80%;

    height:78%;

    background:
        linear-gradient(
            135deg,
            var(--orange),
            var(--yellow-light)
        );

    border-radius:35px;

    transform:
        rotate(
            -7deg
        );

    opacity:.65;

}


.hero-card{

    position:relative;

    width:min(480px,100%);

    background:
        linear-gradient(
            145deg,
            #191919,
            #292929
        );

    border-radius:28px;

    padding:18px;

    color:var(--white);

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.25);

    transform:
        rotate(2deg);

    z-index:2;

}


.hero-card-header{

    display:flex;

    justify-content:space-between;

    padding:8px 5px 15px;

    color:var(--yellow);

    font-size:9px;

    font-weight:1000;

    letter-spacing:1.5px;

}


.hero-pc-image{

    height:360px;

    border-radius:18px;

    overflow:hidden;

    position:relative;

    background:#333;

}


.hero-pc-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.image-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.8)
        );

}


.pc-label{

    position:absolute;

    left:22px;

    bottom:20px;

    font-size:11px;

    font-weight:900;

    letter-spacing:2px;

}


.pc-label span{

    color:var(--yellow);

}


.hero-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 5px 5px;

}


.hero-card-footer small{

    display:block;

    font-size:8px;

    color:#888;

    letter-spacing:1px;

}


.hero-card-footer strong{

    display:block;

    font-size:20px;

    margin-top:3px;

}


.hero-arrow{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:var(--yellow);

    color:var(--black);

    font-weight:1000;

}


/* =====================================================
   FLOATING LABEL
===================================================== */

.floating-label{

    position:absolute;

    z-index:4;

    background:var(--white);

    color:var(--black);

    padding:12px 15px;

    border-radius:10px;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.15);

    font-size:10px;

    font-weight:1000;

}


.floating-one{

    top:18%;

    right:-2%;

    transform:rotate(4deg);

}


.floating-two{

    bottom:12%;

    left:-5%;

    background:var(--black);

    color:var(--yellow);

    transform:rotate(-5deg);

}


.floating-dot{

    display:inline-block;

    width:7px;

    height:7px;

    background:#50D96A;

    border-radius:50%;

    margin-right:5px;

}


/* =====================================================
   MARQUEE
===================================================== */

.marquee-section{

    background:var(--black);

    color:var(--yellow);

    overflow:hidden;

    transform:
        rotate(
            -1deg
        );

    width:103%;

    margin-left:-1.5%;

}


.marquee{

    padding:15px 0;

    overflow:hidden;

}


.marquee-track{

    width:max-content;

    display:flex;

    align-items:center;

    gap:28px;

    animation:
        marquee 22s
        linear
        infinite;

}


.marquee span{

    font-size:18px;

    font-weight:1000;

    white-space:nowrap;

}


.marquee i{

    font-style:normal;

    font-size:14px;

}


@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


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

.section{

    padding:110px 0;

}


/* =====================================================
   SECTION HEADING
===================================================== */

.section-heading{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:40px;

    margin-bottom:45px;

}


.eyebrow{

    font-size:10px;

    font-weight:1000;

    letter-spacing:2px;

    margin-bottom:10px;

}


.section-heading h2{

    font-size:
        clamp(
            40px,
            5vw,
            62px
        );

    line-height:.9;

    letter-spacing:-4px;

    font-weight:1000;

}


.section-heading h2 span{

    color:var(--yellow);

    background:var(--black);

    padding:
        0 8px
        3px;

}


.section-heading p{

    max-width:450px;

    font-size:14px;

    line-height:1.6;

    font-weight:600;

}


/* =====================================================
   PRODUCTS SECTION
===================================================== */

.products-section{

    background:
        radial-gradient(
            circle at 90% 10%,
            #393939,
            transparent 35%
        ),
        var(--black);

    color:var(--white);

}


.products-section .eyebrow{

    color:var(--yellow);

}


.products-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:18px;

}


.product-card{

    position:relative;

    overflow:hidden;

    background:var(--gray);

    color:var(--black);

    border-radius:22px;

    transition:.3s;

}


.product-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 50px
        rgba(0,0,0,.2);

}


.product-card-featured{

    transform:
        translateY(-15px);

}


.product-card-featured:hover{

    transform:
        translateY(-22px);

}


.product-number{

    position:absolute;

    top:15px;

    right:15px;

    z-index:3;

    width:34px;

    height:34px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:var(--yellow);

    border:2px solid var(--black);

    font-size:9px;

    font-weight:1000;

}


.product-image{

    position:relative;

    height:260px;

    overflow:hidden;

    background:#303030;

}


.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}


.product-card:hover
.product-image img{

    transform:scale(1.06);

}


.product-image-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.7)
        );

}


.product-category{

    position:absolute;

    bottom:15px;

    left:15px;

    background:var(--yellow);

    color:var(--black);

    padding:6px 9px;

    border-radius:6px;

    font-size:9px;

    font-weight:1000;

}


.product-content{

    padding:25px;

}


.product-content h3{

    font-size:25px;

    letter-spacing:-1px;

}


.product-content p{

    margin-top:8px;

    color:#626262;

    font-size:12px;

    line-height:1.55;

    min-height:58px;

}


.product-specs{

    display:flex;

    gap:6px;

    flex-wrap:wrap;

    margin-top:18px;

}


.product-specs span{

    background:#D4D4D4;

    padding:5px 8px;

    border-radius:5px;

    font-size:8px;

    font-weight:900;

}


.product-bottom{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid #C8C8C8;

}


.product-bottom small{

    display:block;

    color:#777;

    font-size:8px;

    font-weight:900;

}


.product-bottom strong{

    display:block;

    font-size:20px;

    margin-top:3px;

}


.product-arrow{

    width:42px;

    height:42px;

    display:grid;

    place-items:center;

    background:var(--black);

    color:var(--yellow);

    border-radius:9px;

    font-weight:1000;

    transition:.2s;

}


.product-arrow:hover{

    transform:
        rotate(-8deg)
        scale(1.05);

}


/* =====================================================
   PHILOSOPHY
===================================================== */

.philosophy-section{

    background:
        linear-gradient(
            135deg,
            #E7E7E7,
            #DCDCDC
        );

}


.philosophy-grid{

    display:grid;

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

    gap:80px;

    align-items:center;

}


.philosophy-content h2{

    font-size:
        clamp(
            60px,
            8vw,
            100px
        );

    line-height:.78;

    letter-spacing:-7px;

    margin-top:20px;

}


.philosophy-content h2 span{

    display:inline-block;

    background:var(--yellow);

    padding:5px 15px;

    transform:
        rotate(-3deg);

}


.philosophy-content p{

    max-width:520px;

    margin-top:28px;

    font-size:15px;

    line-height:1.7;

    font-weight:500;

}


.reason-list{

    display:grid;

    gap:12px;

}


.reason-card{

    display:flex;

    align-items:center;

    gap:18px;

    background:var(--yellow);

    border:2px solid var(--black);

    padding:18px;

    border-radius:14px;

    transition:.2s;

}


.reason-card:hover{

    transform:
        translateX(8px);

}


.reason-icon{

    flex-shrink:0;

    width:46px;

    height:46px;

    display:grid;

    place-items:center;

    background:var(--black);

    color:var(--yellow);

    border-radius:9px;

    font-size:10px;

    font-weight:1000;

}


.reason-card h3{

    font-size:15px;

}


.reason-card p{

    font-size:11px;

    margin-top:4px;

    line-height:1.5;

}


/* =====================================================
   CONSULTATION
===================================================== */

.consultation-section{

    background:var(--yellow);

}


.consultation-box{

    position:relative;

    overflow:hidden;

    min-height:430px;

    display:grid;

    grid-template-columns:
        1fr
        250px;

    align-items:center;

    background:
        linear-gradient(
            125deg,
            #111111,
            #242424
        );

    color:var(--white);

    border-radius:28px;

    padding:65px;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.2);

}


.consultation-glow{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,210,31,.4),
            transparent 65%
        );

    right:-130px;

    top:-130px;

    filter:blur(20px);

}


.consultation-content{

    position:relative;

    z-index:2;

}


.consultation-content .eyebrow{

    color:var(--yellow);

}


.consultation-content h2{

    font-size:
        clamp(
            45px,
            6vw,
            75px
        );

    line-height:.88;

    letter-spacing:-5px;

}


.consultation-content h2 span{

    color:var(--yellow);

}


.consultation-content p{

    max-width:580px;

    margin-top:20px;

    color:#C4C4C4;

    font-size:14px;

    line-height:1.6;

}


.example-message{

    display:inline-block;

    margin-top:20px;

    padding:10px 13px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:8px;

    color:#D5D5D5;

    font-size:11px;

}


.example-message span{

    color:var(--yellow);

    font-weight:1000;

}


.consultation-content .button{

    margin-top:25px;

}


.consultation-number{

    position:relative;

    z-index:2;

    width:200px;

    height:200px;

    border-radius:50%;

    background:var(--yellow);

    color:var(--black);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    transform:rotate(8deg);

}


.consultation-number span{

    font-size:12px;

    font-weight:1000;

    letter-spacing:3px;

}


.consultation-number strong{

    font-size:100px;

    line-height:.8;

}


/* =====================================================
   PROCESS
===================================================== */

.process-section{

    background:var(--gray);

}


.process-grid{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:14px;

}


.process-card{

    position:relative;

    background:var(--yellow);

    padding:28px;

    min-height:230px;

    border-radius:16px;

    border:2px solid var(--black);

    overflow:hidden;

}


.process-card:after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    border-radius:50%;

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

    right:-40px;

    bottom:-40px;

}


.process-card > span{

    display:block;

    font-size:42px;

    line-height:1;

    font-weight:1000;

}


.process-card h3{

    margin-top:35px;

    font-size:17px;

}


.process-card p{

    margin-top:8px;

    font-size:11px;

    line-height:1.5;

    font-weight:600;

}


/* =====================================================
   FINAL
===================================================== */

.final-section{

    background:var(--yellow);

    padding:
        20px
        0
        100px;

}


.final-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:45px;

    background:
        linear-gradient(
            120deg,
            #FFE978,
            #FFD21F
        );

    border-radius:22px;

    border:
        2px solid
        var(--black);

}


.final-box h2{

    font-size:
        clamp(
            40px,
            6vw,
            70px
        );

    line-height:.85;

    letter-spacing:-4px;

}


.final-box h2 span{

    background:var(--black);

    color:var(--yellow);

    padding:
        0 8px
        4px;

}


.final-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:16px 20px;

    background:var(--black);

    color:var(--yellow);

    border-radius:10px;

    font-size:12px;

    font-weight:1000;

}


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

footer{

    background:var(--black);

    color:var(--yellow);

    padding:50px 0;

}


.footer{

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        auto;

    gap:40px;

    align-items:end;

}


.footer-brand p{

    color:#999;

    max-width:300px;

    font-size:11px;

    line-height:1.5;

    margin-top:15px;

}


.footer-links{

    display:flex;

    gap:20px;

    font-size:11px;

    font-weight:800;

}


.footer-links a:hover{

    color:var(--white);

}


.footer-copy{

    color:#777;

    font-size:10px;

}


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


/* -----------------------------------------
   LARGE LAPTOP
----------------------------------------- */

@media(max-width:1200px){

    .container{

        width:
            calc(100% - 50px);

    }


    .hero-grid{

        gap:40px;

    }


    .hero h1{

        font-size:
            clamp(
                55px,
                7vw,
                80px
            );

    }

}


/* -----------------------------------------
   TABLET
----------------------------------------- */

@media(max-width:991px){

    .desktop-menu,
    .nav-contact{

        display:none;

    }


    .mobile-menu-button{

        display:block;

    }


    .mobile-menu.active{

        display:block;

    }


    .hero{

        padding:
            75px
            0;

    }


    .hero-grid{

        grid-template-columns:1fr;

    }


    .hero-content{

        max-width:700px;

    }


    .hero-visual{

        max-width:650px;

        width:100%;

        margin:auto;

    }


    .products-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .product-card-featured{

        transform:none;

    }


    .product-card-featured:hover{

        transform:
            translateY(-8px);

    }


    .philosophy-grid{

        grid-template-columns:1fr;

        gap:50px;

    }


    .process-grid{

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .consultation-box{

        grid-template-columns:1fr;

    }


    .consultation-number{

        display:none;

    }


    .footer{

        grid-template-columns:
            1fr
            1fr;

    }


    .footer-copy{

        grid-column:1/-1;

    }

}


/* -----------------------------------------
   MOBILE LARGE
----------------------------------------- */

@media(max-width:767px){

    .container{

        width:
            calc(100% - 30px);

    }


    .navbar{

        height:70px;

    }


    .hero{

        padding:
            60px
            0
            70px;

    }


    .hero h1{

        font-size:
            clamp(
                48px,
                13vw,
                67px
            );

        letter-spacing:-4px;

    }


    .hero-description{

        font-size:15px;

    }


    .hero-stats{

        gap:20px;

        flex-wrap:wrap;

    }


    .hero-visual{

        min-height:450px;

    }


    .hero-pc-image{

        height:320px;

    }


    .floating-one{

        right:-5px;

    }


    .floating-two{

        left:-5px;

    }


    .section{

        padding:
            80px
            0;

    }


    .section-heading{

        display:block;

    }


    .section-heading p{

        margin-top:18px;

    }


    .products-grid{

        grid-template-columns:1fr;

    }


    .product-image{

        height:250px;

    }


    .philosophy-content h2{

        font-size:70px;

    }


    .consultation-box{

        padding:40px 25px;

        border-radius:22px;

    }


    .consultation-content h2{

        font-size:48px;

        letter-spacing:-3px;

    }


    .process-grid{

        grid-template-columns:1fr;

    }


    .final-box{

        display:block;

        padding:35px 25px;

    }


    .final-button{

        margin-top:25px;

    }


    .footer{

        grid-template-columns:1fr;

        gap:25px;

    }


    .footer-copy{

        grid-column:auto;

    }

}


/* -----------------------------------------
   MOBILE SMALL
----------------------------------------- */

@media(max-width:480px){

    .container{

        width:
            calc(100% - 24px);

    }


    .logo-text{

        font-size:15px;

    }


    .logo-symbol{

        width:36px;

        height:36px;

    }


    .hero{

        padding-top:45px;

    }


    .hero h1{

        font-size:48px;

        letter-spacing:-3px;

    }


    .hero-actions{

        flex-direction:column;

    }


    .hero-actions .button{

        width:100%;

    }


    .hero-stats{

        display:grid;

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .hero-visual{

        min-height:390px;

    }


    .hero-card{

        padding:12px;

        border-radius:20px;

    }


    .hero-pc-image{

        height:260px;

        border-radius:13px;

    }


    .floating-label{

        font-size:8px;

        padding:9px;

    }


    .floating-one{

        top:15%;

    }


    .floating-two{

        bottom:10%;

    }


    .product-content{

        padding:20px;

    }


    .product-content h3{

        font-size:22px;

    }


    .philosophy-content h2{

        font-size:57px;

        letter-spacing:-4px;

    }


    .reason-card{

        padding:14px;

    }


    .consultation-content h2{

        font-size:40px;

    }


    .example-message{

        font-size:9px;

    }


    .consultation-content .button{

        width:100%;

    }


    .final-box h2{

        font-size:45px;

    }

}


/* -----------------------------------------
   TOUCH DEVICES
----------------------------------------- */

@media(hover:none){

    .product-card:hover{

        transform:none;

    }


    .reason-card:hover{

        transform:none;

    }

}
/* =====================================================
   SCROLL REVEAL
===================================================== */

.product-card,
.reason-card,
.process-card{

    opacity:0;

    transform:
        translateY(25px);

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

}


.product-card.visible,
.reason-card.visible,
.process-card.visible{

    opacity:1;

    transform:
        translateY(0);

}