@bg: #050505;
@red: #C1121F;
@white: #fff;
@gray: #999;

.hero h1 span {
 color:red;
}

.hero {
    h1 {
        span {
            color:@red;
        }
    }
}

// =========================
// VARIABLES
// =========================

@bg: #050505;
@dark: #070707;
@card: #0d0d0d;
@white: #fff;
@red: #C1121F;
@gray: #999;

@border: rgba(255,255,255,.08);


// =========================
// RESET
// =========================

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    background:@bg;
    color:@white;
    font-family:"Inter", sans-serif;
    overflow-x:hidden;
}

::selection {
    background:@red;
    color:@white;
}


// =========================
// NOISE
// =========================

.noise {
    position:fixed;
    inset:0;
    background-image:url("https://grainy-gradients.vercel.app/noise.svg");
    opacity:.035;
    pointer-events:none;
    z-index:999;
}


// =========================
// GLOBAL
// =========================

section {
    padding:160px 8%;
}

.title {

    span {
        color:@red;
        font-size:13px;
        letter-spacing:4px;
        font-weight:600;
    }

    h2 {
        font-size:70px;
        line-height:1;
        margin-top:20px;
        font-weight:900;
    }
}


// =========================
// HEADER
// =========================

header {

    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:30px 8%;

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

    z-index:100;

    background:rgba(5,5,5,.35);
    backdrop-filter:blur(20px);
}


.logo {

    font-size:34px;
    font-weight:900;
    letter-spacing:3px;

    span {
        color:@red;
    }
}


nav {

    display:flex;
    gap:40px;

    a {
        color:#aaa;
        text-decoration:none;
        font-size:15px;
        transition:.3s;

        &:hover {
            color:@red;
        }
    }
}


.nav-btn {

    padding:15px 30px;
    border-radius:50px;
    background:@red;
    cursor:pointer;
    font-weight:600;
    transition:.3s;

    &:hover {
        background:#ff2e4d;
        transform:translateY(-4px);
    }
}


// =========================
// MOBILE NAV
// =========================


.menu-toggle {

    display:none;

    width:35px;
    height:24px;

    flex-direction:column;
    justify-content:space-between;

    cursor:pointer;


    span {

        height:2px;

        width:100%;

        background:white;

        transition:.3s;

    }

}



.mobile-menu {


    position:fixed;

    top:0;

    right:-100%;


    width:85%;

    height:100vh;


    background:#080808;


    z-index:999;


    padding:120px 40px;


    display:flex;

    flex-direction:column;

    gap:35px;


    transition:.5s;


    a {

        color:white;

        text-decoration:none;

        font-size:28px;

        font-weight:800;


        &:hover {

            color:@red;

        }

    }



    &.active {

        right:0;

    }

}



.menu-overlay {


    position:fixed;

    inset:0;


    background:rgba(0,0,0,.7);


    backdrop-filter:blur(5px);


    z-index:998;


    opacity:0;

    visibility:hidden;


    transition:.3s;



    &.active {

        opacity:1;

        visibility:visible;

    }

}




@media(max-width:900px){


    header {


        nav,
        .nav-btn {

            display:none;

        }


        .menu-toggle {

            display:flex;

        }

    }

}

// =========================
// HERO
// =========================

.hero {

    height:100vh;

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

    align-items:center;
    position:relative;


    .hero-content {
        z-index:2;
    }


    .tag {

        color:@red;
        letter-spacing:5px;
        font-size:13px;

    }


    h1 {

        font-size:95px;
        line-height:.95;
        font-weight:900;
        margin:30px 0;


        span {
            color:@red;
        }
    }


    p {

        max-width:600px;

        color:@gray;

        font-size:19px;
        line-height:34px;

    }

}



.hero-buttons {

    display:flex;
    gap:20px;
    margin-top:45px;


    a {

        padding:18px 35px;

        border-radius:50px;

        background:@red;

        cursor:pointer;

        transition:.35s;


        &:last-child {

            background:transparent;

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

        }


        &:hover {

            transform:translateY(-5px);

        }

    }

}



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


.hero-visual {

    display:flex;

    justify-content:center;
    align-items:center;

}



.glass-card {


    width:500px;
    height:500px;

    border-radius:50%;


    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.01)
    );


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

    backdrop-filter:blur(30px);


    display:flex;

    justify-content:center;
    align-items:center;


    position:relative;

    overflow:hidden;



    .circle {

        position:absolute;

        width:400px;
        height:400px;


        background:@red;

        filter:blur(120px);

        opacity:.7;

    }



    h2 {

        font-size:180px;

        font-weight:900;

        z-index:2;

        letter-spacing:15px;

    }

}



// =========================
// SERVICES
// =========================


.services {

    background:@dark;

}



.service-list {

    margin-top:80px;

}



.service {


    display:flex;

    align-items:center;

    gap:50px;


    padding:35px 0;


    border-bottom:1px solid @border;


    font-size:20px;

    color:#777;


    transition:.4s;

    cursor:pointer;



    h3 {

        flex:1;

        font-size:45px;

        color:@white;

        transition:.3s;

    }



    &:hover {

        padding-left:25px;


        h3 {

            color:@red;

        }

    }

}



// =========================
// PROJECTS
// =========================


.projects {

    display:grid;

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

    gap:30px;

    margin-top:70px;

}



.project {

    background:#0c0c0c;

    border-radius:25px;

    overflow:hidden;


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

    transition:.4s;



    &:hover {

        transform:translateY(-15px);

        border-color:@red;

    }



    h3 {

        font-size:30px;

        padding:25px 25px 10px;

    }



    p {

        padding:0 25px 30px;

        color:#888;

    }

}



.video {

    height:350px;


    display:flex;

    align-items:center;
    justify-content:center;


    background:
    linear-gradient(
        135deg,
        #111,
        #050505
    );


    color:@red;

    font-size:40px;

    font-weight:900;

}

// =========================
// PREMIUM PORTFOLIO
// =========================


.portfolio {

    background:@bg;


    &-head {

        max-width:850px;

        margin-bottom:100px;


        span {

            color:@red;

            letter-spacing:4px;

            font-size:13px;

        }


        h2 {

            font-size:80px;

            line-height:1;

            margin:25px 0;

            font-weight:900;

        }


        p {

            font-size:20px;

            color:#888;

            line-height:35px;

        }

    }

}



.case {


    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:80px;

    align-items:center;

    margin-bottom:160px;



    &.reverse {

        grid-template-columns:.7fr 1.3fr;


        .case-video {

            order:2;

        }

    }



    &-video {


        height:650px;

        border-radius:35px;

        overflow:hidden;

        position:relative;


        background:#111;

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



        video {

            width:100%;

            height:100%;

            object-fit:cover;

            transition:1s;

        }



        &:hover video {

            transform:scale(1.08);

        }

    }



    .play {

        position:absolute;

        left:50%;
        top:50%;

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


        width:80px;
        height:80px;


        border-radius:50%;


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


        backdrop-filter:blur(20px);


        display:flex;

        align-items:center;

        justify-content:center;


        font-size:25px;

    }



    &-info {


        span {

            color:@red;

            letter-spacing:3px;

            font-size:13px;

        }



        h3 {

            font-size:55px;

            line-height:1.1;

            margin:25px 0;

        }



        p {

            color:#999;

            font-size:18px;

            line-height:32px;

        }



        a {

            display:inline-block;

            margin-top:35px;


            color:white;

            text-decoration:none;


            border-bottom:1px solid @red;


            padding-bottom:8px;

        }

    }

}




// =========================
// INDUSTRIES
// =========================


.industries {

    padding:150px 0;

    overflow:hidden;

}



.industry-title {

    padding:0 8%;

    margin-bottom:70px;



    span {

        color:@red;

        letter-spacing:4px;

    }



    h2 {

        font-size:70px;

        margin-top:20px;

    }

}



.marquee {


    width:100%;

    overflow:hidden;


    border-top:1px solid @border;

    border-bottom:1px solid @border;

}



.track {


    display:flex;

    gap:80px;


    padding:50px 0;


    animation:scroll 25s linear infinite;


    width:max-content;



    div {


        font-size:70px;

        font-weight:900;


        color:white;

        opacity:.15;


        transition:.4s;



        &:hover {

            opacity:1;

            color:@red;

        }

    }

}



@keyframes scroll {


    from {

        transform:translateX(0);

    }


    to {

        transform:translateX(-50%);

    }

}



// =========================
// ABOUT
// =========================


.about-section {

    padding:180px 8%;

    background:@dark;

}



.about-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;

}



.about-title {


    span {

        color:@red;

        letter-spacing:4px;

        font-size:13px;

    }



    h2 {

        font-size:75px;

        line-height:1.05;

        margin-top:30px;

        font-weight:900;

    }

}



.about-text {


    p {

        font-size:21px;

        line-height:38px;

        color:#999;

        margin-bottom:30px;

    }

}



.stats {


    display:flex;

    gap:50px;

    margin-top:60px;



    div {

        display:flex;

        flex-direction:column;

    }



    strong {

        font-size:55px;

        color:white;

    }



    span {

        color:#777;

        margin-top:10px;

    }

}

// =========================
// PROCESS
// =========================

.steps {

    display:grid;

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

    gap:25px;

    margin-top:70px;



    div {

        padding:50px 30px;

        background:@card;

        border-radius:25px;

        font-size:20px;

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

    }



    h3 {

        font-size:35px;

        margin-top:20px;

    }

}


/* =================================
REFERENCES
================================= */


.references{


text-align:center;


}



.brands{


display:grid;

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

gap:20px;

margin-top:70px;


}



.brands div{


height:130px;


display:flex;

align-items:center;

justify-content:center;


background:#0d0d0d;


border-radius:20px;


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


font-size:22px;


transition:.3s;


}



.brands div:hover{


border-color:#C1121F;

transform:translateY(-10px);


}





// =========================
// CONTACT
// =========================


.contact {

    display:grid;

    grid-template-columns:1fr 500px;

    gap:80px;



    h2 {

        font-size:70px;

        line-height:1.1;

        margin:25px 0;

    }



    p {

        color:#999;

        font-size:20px;

        line-height:40px;

    }

}



form {

    padding:40px;

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

    border-radius:30px;

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

    backdrop-filter:blur(20px);

}



input,
textarea {

    width:100%;

    margin-bottom:20px;


    background:#111;

    border:none;

    outline:none;


    padding:20px;

    border-radius:15px;


    color:white;

}



textarea {

    height:160px;

    resize:none;

}



button {

    width:100%;

    height:60px;


    border:none;


    background:@red;

    color:white;


    border-radius:15px;


    font-size:18px;


    cursor:pointer;


    transition:.3s;



    &:hover {

        background:#ff2e4d;

    }

}



// =========================
// FOOTER
// =========================


footer {

    padding:120px 8% 40px;

    background:#030303;

    overflow:hidden;

}



.footer-big {

    font-size:260px;

    font-weight:900;

    letter-spacing:30px;


    color:#111;

    line-height:.8;


    text-align:center;

}



.footer-content {

    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-top:100px;



    h3 {

        font-size:30px;

    }



    p {

        color:#777;

    }

}



.footer-links {

    display:flex;

    gap:35px;



    a {

        color:#aaa;

        text-decoration:none;

        transition:.3s;



        &:hover {

            color:@red;

        }

    }

}



.copyright {

    margin-top:70px;

    padding-top:30px;


    border-top:1px solid @border;


    color:#555;

}



// =========================
// LOADER
// =========================


.loader {

    position:fixed;

    inset:0;

    background:@bg;

    z-index:99999;


    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

}



.loader-logo {

    font-size:120px;

    font-weight:900;

    letter-spacing:15px;



    span {

        color:@red;

    }

}



.loader-line {

    width:0;

    height:2px;

    background:@red;

    margin-top:30px;

}



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


.cursor {

    position:fixed;

    width:60px;

    height:60px;


    border-radius:50%;


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


    pointer-events:none;


    z-index:9999;


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


    transition:.15s;



    &.active {

        width:100px;

        height:100px;


        background:rgba(193,18,31,.15);

        border-color:@red;

    }

}



.cursor-dot {

    position:fixed;


    width:8px;

    height:8px;


    background:@red;


    border-radius:50%;


    z-index:9999;

    pointer-events:none;


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

}



// =========================
// RESPONSIVE
// =========================


@media(max-width:1100px) {


    nav {

        display:none;

    }


    .hero,
    .about-grid,
    .contact {

        grid-template-columns:1fr;

    }


    .hero h1 {

        font-size:60px;

    }



    .projects {

        grid-template-columns:1fr;

    }



    .brands {

        grid-template-columns:1fr 1fr;

    }



    .steps {

        grid-template-columns:1fr;

    }

}



@media(max-width:1000px) {


    .case,
    .case.reverse {

        grid-template-columns:1fr;


        .case-video {

            order:0;

        }

    }


    .case-video {

        height:400px;

    }


    .case-info h3 {

        font-size:38px;

    }


    .about-title h2 {

        font-size:45px;

    }

}



@media(max-width:900px) {


    .footer-big {

        font-size:100px;

    }



    .footer-content {

        flex-direction:column;

        gap:40px;

    }



    .cursor,
    .cursor-dot {

        display:none;

    }

}

// =========================
// RESPONSIVE
// =========================


// Large Tablet
@media(max-width:1200px) {

    section {
        padding:120px 6%;
    }


    .hero {

        grid-template-columns:1fr;


        height:auto;

        padding-top:180px;


        .hero-content {

            text-align:center;

        }


        p {

            margin:auto;

        }


        .hero-buttons {

            justify-content:center;

        }


        .hero-visual {

            margin-top:80px;

        }


        .glass-card {

            width:380px;
            height:380px;


            h2 {

                font-size:120px;

            }

        }

    }



    .projects {

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

    }



    .case,
    .case.reverse {

        grid-template-columns:1fr;

        gap:50px;


        .case-video {

            order:0;

            height:500px;

        }

    }



    .about-grid {

        grid-template-columns:1fr;

        gap:50px;

    }



    .contact {

        grid-template-columns:1fr;

    }



    .contact form {

        margin-top:40px;

    }



    .steps {

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

    }



    .brands {

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

    }

}





// Tablet

@media(max-width:900px) {


    header {

        padding:25px 5%;

    }



    nav {

        display:none;

    }



    .logo {

        font-size:28px;

    }



    .title h2,
    .industry-title h2 {

        font-size:45px;

    }



    .hero {


        h1 {

            font-size:55px;

        }


        p {

            font-size:17px;

            line-height:30px;

        }

    }




    .hero-buttons {

        flex-direction:column;


        a {

            text-align:center;

        }

    }



    .glass-card {

        width:300px;

        height:300px;



        h2 {

            font-size:90px;

        }


        .circle {

            width:250px;

            height:250px;

        }

    }



    .service {


        gap:20px;


        h3 {

            font-size:32px;

        }

    }



    .portfolio-head {


        h2 {

            font-size:50px;

        }


    }



    .case-info {


        h3 {

            font-size:40px;

        }

    }



    .steps {

        grid-template-columns:1fr;

    }



    .brands {

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

    }



    .stats {

        gap:25px;


        strong {

            font-size:40px;

        }

    }



    .footer-big {

        font-size:90px;

        letter-spacing:10px;

    }


}





// Mobile

@media(max-width:600px) {


    section {

        padding:90px 5%;

    }



    header {

        padding:20px 5%;

    }



    .logo {

        font-size:24px;

    }



    .hero {

        padding-top:140px;



        h1 {

            font-size:42px;

            line-height:1;

        }


        .tag {

            font-size:11px;

            letter-spacing:3px;

        }

    }



    .hero-visual {

        margin-top:50px;

    }



    .glass-card {


        width:230px;

        height:230px;



        h2 {

            font-size:60px;

            letter-spacing:5px;

        }



        .circle {

            width:180px;

            height:180px;

            filter:blur(80px);

        }

    }




    .title h2,
    .industry-title h2 {

        font-size:36px;

    }



    .service {


        flex-direction:column;

        align-items:flex-start;



        h3 {

            font-size:28px;

        }

    }



    .projects {


        grid-template-columns:1fr;

    }



    .project {


        h3 {

            font-size:24px;

        }

    }



    .case-video {

        height:300px !important;

        border-radius:20px;

    }



    .play {

        width:60px;

        height:60px;

    }



    .case-info {


        h3 {

            font-size:32px;

        }


        p {

            font-size:16px;

            line-height:28px;

        }

    }



    .brands {

        grid-template-columns:1fr;

    }



    .about-title h2 {

        font-size:38px;

    }



    .about-text p {

        font-size:17px;

        line-height:30px;

    }



    .stats {


        flex-direction:column;


        strong {

            font-size:45px;

        }

    }



    .contact {


        h2 {

            font-size:40px;

        }


        p {

            font-size:17px;

            line-height:30px;

        }

    }



    form {

        padding:25px;

        border-radius:20px;

    }



    .footer-big {

        font-size:55px;

        letter-spacing:5px;

    }



    .footer-content {


        text-align:center;


        h3 {

            font-size:24px;

        }

    }



    .footer-links {

        flex-wrap:wrap;

        justify-content:center;

        gap:20px;

    }

}