/* GoldPriceBD - main.css
   Modularized from the original global framework. */

/* =========================================================
   09. HERO
   ========================================================= */

.hero {
    padding:
        var(--space-10) 0;
}


.hero-card {
    position: relative;

    overflow: hidden;

    padding:
        var(--space-9);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--bg-surface),
            var(--gold-50)
        );

    box-shadow:
        var(--shadow-sm);
}


[data-theme="dark"] .hero-card {
    background:
        linear-gradient(
            135deg,
            var(--bg-surface),
            #172033
        );
}


.hero-title {
    max-width: 820px;

    margin-bottom:
        var(--space-4);

    font-size:
        clamp(
            2rem,
            5vw,
            3.25rem
        );

    font-weight:
        var(--font-weight-bold);
}


.hero-title strong {
    color:
        var(--color-primary);
}


.hero-description {
    max-width: 760px;

    margin-bottom:
        var(--space-6);

    font-size:
        var(--font-size-lg);

    color:
        var(--text-muted);
}