/* Explain: App-specific component classes (fonts, text effects) used across the site. */
.f-heading {
    font-family: var(--font-heading);
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.soft-shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
}

.panel-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
    mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-grid {
    background-image:
        linear-gradient(to right, var(--border-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, black 30%, transparent 75%);
}