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


html {
    scroll-behavior: smooth;
}


body {
    background: #050505;

    color: #fff;

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

    overflow-x: hidden;
}


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

.about-hero {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 100px 30px;

    background:
        radial-gradient(
            circle at center,
            #202020 0%,
            #0a0a0a 45%,
            #050505 75%
        );
}


.about-label,
.section-number {

    color: #777;

    font-size: 10px;

    letter-spacing: 6px;

    text-transform: uppercase;
}


.about-hero h1 {

    margin-top: 30px;

    font-size:
        clamp(
            55px,
            10vw,
            140px
        );

    line-height: .88;

    letter-spacing: -4px;

    font-weight: 800;


    background:
        linear-gradient(
            110deg,
            #555,
            #fff,
            #777,
            #fff,
            #555
        );

    background-size: 300% auto;


    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;


    animation:
        metalMove 7s linear infinite;
}


.about-hero p {

    max-width: 650px;

    margin-top: 45px;

    color: #999;

    font-size: 15px;

    line-height: 1.8;

    letter-spacing: 2px;
}


/* =========================
   COMMON SECTIONS
========================= */

.about-section {

    padding: 140px 8%;

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


    background:
        radial-gradient(
            circle at 80% 20%,
            #151515,
            #050505 55%
        );
}


.about-section h2,
.canvas-section h2 {

    margin-top: 30px;

    font-size:
        clamp(
            48px,
            8vw,
            105px
        );

    line-height: .9;

    font-weight: 500;

    letter-spacing: -3px;

    color: #eee;
}


.about-text {

    max-width: 700px;

    margin-top: 65px;

    margin-left: auto;
}


.about-text p {

    color: #888;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 28px;
}


/* =========================
   VISION
========================= */

.vision-section {

    background:
        radial-gradient(
            circle at 20% 50%,
            #181818,
            #050505 60%
        );
}


/* =========================
   CANVAS
========================= */

.canvas-section {

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 120px 30px;


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


    background:
        radial-gradient(
            circle at center,
            #252525,
            #080808 50%,
            #020202 85%
        );
}


.canvas-inner {

    max-width: 1000px;
}


.canvas-section h2 {

    font-size:
        clamp(
            55px,
            9vw,
            125px
        );


    background:
        linear-gradient(
            110deg,
            #555,
            #fff,
            #777,
            #fff,
            #555
        );

    background-size: 300% auto;


    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;


    animation:
        metalMove 7s linear infinite;
}


.canvas-section p {

    margin-top: 40px;

    color: #999;

    font-size: 18px;

    letter-spacing: 2px;
}


.canvas-line {

    width: 100px;

    height: 1px;

    margin: 45px auto;

    background: #fff;
}


.canvas-brand {

    font-size: 25px;

    font-weight: bold;

    letter-spacing: 7px;
}


.canvas-owner {

    margin-top: 12px;

    color: #666;

    font-size: 10px;

    letter-spacing: 4px;
}


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

.about-shop-btn {

    display: inline-block;

    margin-top: 45px;

    padding: 17px 32px;


    color: #000;

    background: #fff;


    text-decoration: none;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;


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


.about-shop-btn:hover {

    background: #aaa;

    transform:
        translateY(-4px);


    box-shadow:
        0 15px 40px
        rgba(255,255,255,.12);
}


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

@keyframes metalMove {

    0% {

        background-position:
            0% center;
    }

    100% {

        background-position:
            300% center;
    }

}


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

@media (max-width: 700px) {

    .about-hero {

        min-height: 85vh;
    }


    .about-hero h1 {

        font-size: 16vw;

        letter-spacing: -2px;
    }


    .about-hero p {

        font-size: 12px;

        letter-spacing: 1px;
    }


    .about-section {

        padding: 100px 25px;
    }


    .about-section h2,
    .canvas-section h2 {

        font-size: 14vw;
    }


    .about-text {

        margin-top: 45px;
    }


    .about-text p {

        font-size: 15px;
    }


    .canvas-section {

        min-height: 80vh;

        padding: 90px 25px;
    }


    .canvas-brand {

        font-size: 20px;

        letter-spacing: 5px;
    }

}