* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: #000; }
body { font-family: Arial, Helvetica, sans-serif; }
.hero-page { position: relative; width: 100%; min-height: 100vh; overflow: hidden; background: #000; }
.hero-image {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/glamis-trader-hero.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.hero-links {
    position: absolute;
    z-index: 3;
    left: 46px;
    bottom: 25px;
    display: flex;
    gap: 28px;
    font-size: 10px;
    letter-spacing: .08em;
}
.hero-links a {
    color: rgba(255,255,255,.9);
    text-decoration: none;
    text-shadow: 0 1px 5px #000;
}
.hero-links a:hover { color: #ff7a00; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 800px) {
    .hero-page { min-height: 100svh; }
    .hero-image {
        background-position: 58% center;
    }
    .hero-links {
        left: 18px;
        right: 18px;
        bottom: 15px;
        gap: 15px;
        flex-wrap: wrap;
        font-size: 9px;
    }
}