/* FOREXHOST CLEAN HERO DESIGN */

.hero-section {
    min-height: 0 !important;
    padding: 0 !important;
    background: #f5f7fb !important;
    overflow: hidden !important;
}

.hero-section::before,
.hero-section::after {
    content: none !important;
    display: none !important;
}

.hero-section > .hero-bg {
    display: none !important;
}

.hero-section .hero-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0, 0.98fr)
        minmax(0, 1.12fr) !important;

    gap: clamp(0px, 1.8vw, 22px) !important;
    align-items: center !important;

    padding: clamp(3rem, 5vw, 5rem) 0
             clamp(3rem, 5vw, 4rem) !important;
}

.hero-section .hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative;
    z-index: 2;
    max-width: 590px !important;
}

.hero-section .hero-copy h1 {
    font-size: clamp(2.55rem, 4vw, 4.05rem) !important;
    line-height: 1.055 !important;
    letter-spacing: -0.035em !important;
    max-width: 16ch !important;
    color: #172e55 !important;
}

.hero-section .hero-text {
    max-width: 520px !important;
    line-height: 1.65 !important;
    color: #526585 !important;
}

.hero-section .fh-trader-art {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    z-index: 1;

    width: calc(100% + 1.2rem);
    height: clamp(440px, 39vw, 555px);
    margin-left: -1.2rem;

    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.hero-section .fh-trader-art img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: 76% 50%;

    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0%, black 30%),
        linear-gradient(to bottom,
            transparent 0%,
            black 11%,
            black 87%,
            transparent 100%);

    -webkit-mask-composite: source-in;

    mask-image:
        linear-gradient(to right,
            transparent 0%, black 30%),
        linear-gradient(to bottom,
            transparent 0%,
            black 11%,
            black 87%,
            transparent 100%);

    mask-composite: intersect;
}

@media (max-width: 980px) {
    .hero-section .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 2.5rem 0 !important;
    }

    .hero-section .hero-copy {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .hero-section .fh-trader-art {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 350px;
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .hero-section .hero-copy h1 {
        font-size: clamp(2.2rem, 9vw, 3rem) !important;
        max-width: none !important;
    }

    .hero-section .fh-trader-art {
        height: 270px;
    }
}


/* FOREXHOST MOBILE HERO V6 */
.fh-mobile-heading, .fh-mobile-eyebrow, .fh-mobile-lead,
.fh-trader-art-mobile { display: none !important; }

@media (max-width: 640px) {
    .site-header .header-row { min-height: 64px !important; }
    .hero-section .hero-grid {
        padding-top: 1.5rem !important;
        padding-bottom: 2.25rem !important;
        gap: 0 !important;
    }
    .hero-section .fh-desktop-eyebrow,
    .hero-section .fh-desktop-heading,
    .hero-section .fh-desktop-lead { display: none !important; }
    .hero-section .fh-mobile-eyebrow {
        display: inline-flex !important;
        min-height: 0;
        padding: .45rem .6rem;
        border-radius: 10px;
        font-size: .68rem;
        line-height: 1.35;
        letter-spacing: .06em;
    }
    .hero-section .fh-mobile-heading { display: inline !important; }
    .hero-section .fh-mobile-lead { display: block !important; }
    .hero-section .hero-copy h1 {
        margin-top: .8rem !important;
        font-size: clamp(2rem, 8.8vw, 2.55rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }
    .hero-section .hero-text {
        margin-top: .9rem !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }
    .hero-section .hero-actions { margin-top: 1.25rem !important; }
    .hero-section .hero-actions .button { min-height: 48px !important; }
    .hero-section .hero-grid > .fh-trader-art { display: none !important; }
    .hero-section .fh-trader-art-mobile {
        display: block !important;
        width: 100% !important;
        margin-top: 1.25rem !important;
        overflow: hidden;
    }
    .hero-section .fh-trader-art-mobile img {
        display: block;
        width: 100%;
        height: auto;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 11%, black 89%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 11%, black 89%, transparent 100%);
    }
    .hero-section .hero-chips { margin-top: 1rem !important; gap: .4rem !important; }
    .hero-section .hero-chips span {
        min-height: 30px;
        font-size: .76rem;
        padding-inline: .55rem;
    }
    .hero-section .availability-note { font-size: .82rem; margin-top: .75rem; }
}