@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap");

/* =========================================================
   ARCHITECTBYAI — FINAL HERO
   ========================================================= */

.hero {
    position: relative;
    min-height: 790px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 76% 47%,
            rgba(65, 169, 205, 0.10),
            transparent 29%
        ),
        radial-gradient(
            circle at 78% 54%,
            rgba(199, 168, 107, 0.055),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #070a0e 0%,
            #0c1117 52%,
            #06080b 100%
        );
}


/* background architecture */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(117, 203, 230, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(117, 203, 230, 0.018) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.28) 45%,
            #000 78%,
            transparent
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.28) 45%,
            #000 78%,
            transparent
        );
}


/* 3D */

#hero-3d-canvas {
    position: absolute;

    top: 100px;
    right: 0.5%;
    bottom: 30px;

    width: 55%;

    z-index: 1;

    overflow: visible;

    pointer-events: auto;
}

#hero-3d-canvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


/* text separation */

.hero::after {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 53%;

    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7,10,14,1) 0%,
            rgba(7,10,14,.96) 47%,
            rgba(7,10,14,.68) 76%,
            transparent 100%
        );
}


/* CONTENT */

.hero-content {
    position: relative;

    z-index: 5;

    width: min(
        1380px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    padding-top: 74px;

    pointer-events: none;
}

.hero-content > * {
    max-width: 570px;
}

.hero-content a {
    pointer-events: auto;
}


/* EYEBROW */

.hero .eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .30em;

    text-transform: uppercase;

    color: #d2b273;
}

.hero .eyebrow::before {
    content: "";

    width: 29px;
    height: 1px;

    background: #d2b273;

    box-shadow:
        0 0 10px
        rgba(210,178,115,.45);
}


/* HEADLINE */

.hero h1 {
    margin: 0;

    max-width: 600px;

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

    font-size:
        clamp(
            45px,
            4.15vw,
            64px
        );

    line-height: .99;

    font-weight: 400;

    letter-spacing: -.052em;

    color: #f5f7f7;
}

.hero h1 span {
    display: block;

    margin-top: 5px;

    color:
        rgba(
            213,
            222,
            226,
            .57
        );
}


/* DESCRIPTION */

.hero-description {
    max-width: 485px !important;

    margin: 20px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.72;

    color: rgba(220, 227, 230, .60);
}

/* BUTTON AREA */

.hero-actions {
    display: flex;

    gap: 12px;

    margin-top: 33px;
}


/* TABLET */

@media (max-width: 1100px) {

    .hero {
        min-height: 750px;
    }

    .hero-content {
        width: calc(100% - 50px);
    }

    #hero-3d-canvas {
        right: -4%;
        width: 59%;
    }

    .hero h1 {
        max-width: 520px;

        font-size:
            clamp(
                43px,
                5.4vw,
                58px
            );
    }
}


/* MOBILE */

@media (max-width: 760px) {

    .hero {
        min-height: 910px;
        display: block;
    }

    .hero::after {
        width: 100%;
        height: 57%;
        bottom: auto;

        background:
            linear-gradient(
                180deg,
                rgba(7,10,14,1) 0%,
                rgba(7,10,14,.96) 72%,
                transparent 100%
            );
    }

    .hero-content {
        width: 100%;

        padding:
            125px
            24px
            0;

        margin: 0;
    }

    .hero h1 {
        max-width: 560px;

        font-size:
            clamp(
                40px,
                10.5vw,
                54px
            );
    }

    .hero-description {
        max-width: 455px !important;
        font-size: 15px;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

    #hero-3d-canvas {
        top: auto;
        right: -5%;
        bottom: -5px;

        width: 110%;
        height: 470px;
    }
}


/* SMALL MOBILE */

@media (max-width: 480px) {

    .hero {
        min-height: 875px;
    }

    .hero-content {
        padding-top: 25px;
    }

    .hero h1 {
        font-size: 39px;
        line-height: 1.01;
    }

    .hero-description {
        margin-top: 22px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;

        margin-top: 28px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    #hero-3d-canvas {
        right: -7%;
        width: 114%;
        height: 410px;
    }
}

/* LOCKED DUAL-COLOR HEADLINE */
.hero h1 .hero-primary,
.hero h1 .hero-secondary {
    display: block;
}

.hero h1 .hero-primary {
    color: #f4f1ea;
}

.hero h1 .hero-intelligence {
    color: #8fd8f4;
    font-style: normal;
    text-shadow: 0 0 22px rgba(143,216,244,.12);
}

.hero h1 .hero-secondary {
    margin-top: 7px;
    color: #a5b1bc;
    font-weight: 400;
}

.hero-actions .btn {
    font-family: "IBM Plex Mono", monospace;
}