/* =========================================================
   ESAR DIGITAL — CONTACT HERO
   Premium Contact Page Hero
   ========================================================= */


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

   .contact-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 145px 0 120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 48%,
            rgba(97,124,255,.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(97,124,255,.07),
            transparent 24%
        ),
        linear-gradient(
            120deg,
            #040a14 0%,
            #07101f 52%,
            #0a1425 100%
        );

    color: #fff;
}


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

.contact-hero__background {
    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;
}


/* Subtle architectural grid */

.contact-hero__grid {
    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.055) 1px,
            transparent 1px
        );

    background-size: 88px 88px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.8) 25%,
            rgba(0,0,0,.55) 75%,
            transparent 100%
        );
}


/* =========================================================
   ATMOSPHERIC GLOWS
   ========================================================= */

.contact-hero__glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(18px);
}


/* Main right-side atmosphere */

.contact-hero__glow--one {
    width: 500px;
    height: 500px;

    right: -180px;
    top: 50%;

    transform: translateY(-50%);

    background:
        radial-gradient(
            circle,
            rgba(97,124,255,.20) 0%,
            rgba(97,124,255,.08) 38%,
            transparent 72%
        );
}


/* Secondary lower atmosphere */

.contact-hero__glow--two {
    width: 300px;
    height: 300px;

    left: -140px;
    bottom: -170px;

    background:
        radial-gradient(
            circle,
            rgba(97,124,255,.12),
            transparent 70%
        );
}


/* =========================================================
   MAIN CONTAINER
   =========================================================
   
   IMPORTANT:
   This explicitly controls the left/right boundaries so the
   hero never touches the viewport edges.
   ========================================================= */

.contact-hero__container {
    position: relative;

    z-index: 3;

    width: min(
        calc(100% - 112px),
        1320px
    );

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(400px, .92fr);

    align-items: center;

    gap: 80px;
}


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

.contact-hero__content {
    position: relative;

    max-width: 760px;

    z-index: 4;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.contact-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 30px;

    color: #FFCC00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.contact-hero__eyebrow span {
    width: 7px;
    height: 7px;

    display: block;

    flex-shrink: 0;

    border-radius: 50%;

    background: #ffcc00;

    box-shadow:
        0 0 0 5px rgba(97,124,255,.09),
        0 0 22px rgba(97,124,255,.65);
}


/* =========================================================
   TITLE
   ========================================================= */

.contact-hero__title {
    max-width: 780px;

    margin: 0;

    color: #fff;

    font-size: clamp(
        54px,
        6.3vw,
        88px
    );

    font-weight: 650;

    line-height: .94;

    letter-spacing: -.068em;
}


.contact-hero__title span {
    display: block;

    width: fit-content;

    color: #ffcc00;

    position: relative;
}


/* Fine underline accent */

.contact-hero__title span::after {
    content: "";

    position: absolute;

    left: 2px;
    right: 0;
    bottom: -9px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(143,161,255,.75),
            transparent
        );

    opacity: .7;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.contact-hero__description {
    max-width: 650px;

    margin: 38px 0 0;

    color: #a8b5c8;

    font-size: 17px;

    line-height: 1.85;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.contact-hero__actions {
    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 43px;

    flex-wrap: wrap;
}


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

.contact-hero__button {
    min-height: 56px;

    display: inline-flex;

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

    gap: 18px;

    padding: 0 28px;

    border-radius: 9px;

    background: #ffc800;

    color: #101827;

    font-size: 14px;

    font-weight: 750;

    text-decoration: none;

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

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


.contact-hero__button span {
    font-size: 18px;

    transition:
        transform .3s ease;
}


.contact-hero__button:hover {
    transform: translateY(-3px);

    background: #ffd21a;

    box-shadow:
        0 18px 45px rgba(0,0,0,.30);
}


.contact-hero__button:hover span {
    transform: translateX(5px);
}


/* =========================================================
   SECONDARY ACTION
   ========================================================= */

.contact-hero__secondary {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #aebbd0;

    font-size: 13px;

    font-weight: 650;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.contact-hero__secondary span {
    transition:
        transform .25s ease;
}


.contact-hero__secondary:hover {
    color: #fff;

    transform: translateX(3px);
}


.contact-hero__secondary:hover span {
    transform: translateY(3px);
}


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

.contact-hero__visual {
    position: relative;

    width: 100%;

    min-height: 530px;

    display: flex;

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

    isolation: isolate;
}


/* =========================================================
   PREMIUM ORBIT SYSTEM
   ========================================================= */

.contact-hero__ring {
    position: absolute;

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

    border-radius: 50%;

    pointer-events: none;

    transform: rotate(-18deg);
}


/* Outer */

.contact-hero__ring--outer {
    width: 550px;
    height: 340px;

    border-color: rgba(143,161,255,.13);

    transform:
        rotate(-18deg)
        scaleY(.82);
}


/* Middle */

.contact-hero__ring--middle {
    width: 415px;
    height: 275px;

    border-color: rgba(143,161,255,.16);

    transform:
        rotate(-18deg)
        scaleY(.82);
}


/* Inner */

.contact-hero__ring--inner {
    width: 275px;
    height: 190px;

    border-color: rgba(143,161,255,.11);

    transform:
        rotate(-18deg)
        scaleY(.82);
}


/* =========================================================
   ORBIT LIGHT
   ========================================================= */

.contact-hero__visual::before {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: 21%;
    right: 17%;

    border-radius: 50%;

    background: #8fa1ff;

    box-shadow:
        0 0 0 7px rgba(143,161,255,.07),
        0 0 28px rgba(143,161,255,.65);

    z-index: 3;
}


.contact-hero__visual::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    left: 18%;
    bottom: 22%;

    border-radius: 50%;

    background: rgba(143,161,255,.8);

    box-shadow:
        0 0 18px rgba(143,161,255,.6);

    z-index: 2;
}


/* =========================================================
   VISUAL CARD
   ========================================================= */

.contact-hero__card {
    position: relative;

    z-index: 5;

    width: min(100%, 430px);

    min-height: 275px;

    padding: 38px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.035)
        );

    backdrop-filter: blur(28px);

    -webkit-backdrop-filter: blur(28px);

    box-shadow:
        0 45px 110px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10);

    transform:
        translateY(-2px)
        rotate(1deg);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}


.contact-hero__card:hover {
    transform:
        translateY(-7px)
        rotate(0deg);

    border-color: rgba(143,161,255,.25);

    box-shadow:
        0 55px 125px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.12);
}


/* Card glow */

.contact-hero__card::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -75px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(97,124,255,.30),
            transparent 70%
        );

    filter: blur(14px);

    pointer-events: none;
}


/* Card edge highlight */

.contact-hero__card::after {
    content: "";

    position: absolute;

    left: 38px;
    right: 38px;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143,161,255,.65),
            transparent
        );

    opacity: .65;
}


/* =========================================================
   CARD LABEL
   ========================================================= */

.contact-hero__card-label {
    position: relative;

    z-index: 2;

    color: #a8b6cf;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* =========================================================
   CARD LINE
   ========================================================= */

.contact-hero__card-line {
    width: 100%;
    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.035)
        );
}


/* =========================================================
   CARD MAIN
   ========================================================= */

.contact-hero__card-main {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    flex-wrap: wrap;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: -.01em;
}


.contact-hero__card-main strong {
    color: #8fa1ff;

    font-size: 16px;

    font-weight: 550;
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.contact-hero__card-bottom {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #6f7e97;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

    .contact-hero {
        min-height: auto;

        padding: 130px 0 105px;
    }


    .contact-hero__container {
        width: min(
            calc(100% - 80px),
            900px
        );

        grid-template-columns: 1fr;

        gap: 70px;
    }


    .contact-hero__content {
        max-width: 850px;
    }


    .contact-hero__visual {
        min-height: 470px;
    }


    .contact-hero__ring--outer {
        width: 500px;
        height: 320px;
    }


    .contact-hero__ring--middle {
        width: 380px;
        height: 250px;
    }


    .contact-hero__ring--inner {
        width: 250px;
        height: 175px;
    }

}


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

@media (max-width: 760px) {

    .contact-hero {
        padding: 105px 0 80px;
    }


    .contact-hero__container {
        width: calc(100% - 50px);

        gap: 55px;
    }


    .contact-hero__eyebrow {
        margin-bottom: 25px;
    }


    .contact-hero__title {
        font-size: clamp(
            45px,
            12.5vw,
            68px
        );

        line-height: .96;
    }


    .contact-hero__title span::after {
        bottom: -7px;
    }


    .contact-hero__description {
        margin-top: 30px;

        font-size: 16px;

        line-height: 1.8;
    }


    .contact-hero__actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-top: 36px;
    }


    .contact-hero__visual {
        min-height: 370px;
    }


    /* Orbit */

    .contact-hero__ring--outer {
        width: 370px;
        height: 245px;
    }


    .contact-hero__ring--middle {
        width: 290px;
        height: 195px;
    }


    .contact-hero__ring--inner {
        width: 215px;
        height: 145px;
    }


    /* Card */

    .contact-hero__card {
        width: min(
            calc(100% - 30px),
            360px
        );

        min-height: 230px;

        padding: 28px;

        border-radius: 18px;
    }


    .contact-hero__card::after {
        left: 28px;
        right: 28px;
    }


    .contact-hero__card-line {
        margin: 23px 0;
    }


    .contact-hero__card-bottom {
        font-size: 7px;
    }


    .contact-hero__visual::before {
        top: 18%;
        right: 13%;
    }


    .contact-hero__visual::after {
        left: 12%;
        bottom: 18%;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .contact-hero {
        padding-top: 90px;
    }


    .contact-hero__container {
        width: calc(100% - 40px);
    }


    .contact-hero__title {
        font-size: 45px;

        letter-spacing: -.055em;
    }


    .contact-hero__description {
        font-size: 15px;
    }


    .contact-hero__visual {
        min-height: 315px;
    }


    /* Smaller orbit system */

    .contact-hero__ring--outer {
        width: 300px;
        height: 200px;
    }


    .contact-hero__ring--middle {
        width: 235px;
        height: 155px;
    }


    .contact-hero__ring--inner {
        width: 175px;
        height: 115px;
    }


    .contact-hero__card {
        width: calc(100% - 20px);

        min-height: 205px;

        padding: 23px;

        border-radius: 16px;
    }


    .contact-hero__card::after {
        left: 23px;
        right: 23px;
    }


    .contact-hero__card-main {
        font-size: 11px;
    }


    .contact-hero__card-main strong {
        font-size: 14px;
    }


    .contact-hero__card-bottom {
        margin-top: 18px;

        font-size: 6px;
    }


    .contact-hero__visual::before {
        width: 7px;
        height: 7px;

        top: 18%;
        right: 11%;
    }


    .contact-hero__visual::after {
        width: 4px;
        height: 4px;

        left: 10%;
        bottom: 18%;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.contact-hero a:focus-visible {
    outline: 2px solid #8fa1ff;

    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-hero *,
    .contact-hero *::before,
    .contact-hero *::after {
        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;
    }

}