body { font-family: "Roboto", sans-serif; }
h1, h2, h3, h4, .font-heading, .font-montserrat { font-family: "Montserrat", sans-serif; }

.bg-hero {
    background-image: linear-gradient(rgba(6, 17, 33, 0.8), rgba(6, 17, 33, 0.8)), var(--hero-image, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.clip-slant {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.clip-slant-reverse {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}

.diagonal-grid {
    background-image: radial-gradient(#FFD700 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

.border-accent {
    border-bottom: 6px solid #FFD700;
    display: inline-block;
    padding-bottom: 2px;
}

/* Mirror the hero gradient direction for RTL */
[dir="rtl"] .clip-slant {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}