.hero {
    min-height: var(--hero-min-height);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: center;
    padding-block: var(--space-20);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,58,24,0.88), rgba(21,76,32,0.64), rgba(21,76,32,0.30)),
        radial-gradient(circle at 18% 24%, rgba(245,165,0,0.22), transparent 28%);
}

.hero .container {
    position: relative;
    z-index: var(--z-base);
}

.hero__content {
    max-width: 680px;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hero__content .badge--accent {
    align-self: flex-start;
    min-width: min(100%, 280px);
    padding-block: var(--space-2);
    padding-inline: var(--space-5);
    background-color: rgba(255,248,231,0.96);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.hero__content h1 {
    color: var(--color-white);
    font-size: clamp(var(--text-3xl), 5.6vw, 4rem);
    line-height: var(--leading-tight);
    text-wrap: balance;
}

.hero__content p {
    font-size: var(--text-lg);
    color: var(--color-white-85);
    line-height: var(--leading-normal);
    margin-bottom: 0;
    max-width: 600px;
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

/* ── Category Strip ──────────────────────────── */
.cat-strip {
    background-color: var(--color-white);
    border-bottom: var(--border);
    padding-block: var(--space-4);
}

.cat-strip__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cat-strip__inner::-webkit-scrollbar { display: none; }

.cat-strip__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .hero {
        min-height: var(--hero-min-height);
        padding-block: var(--space-16);
    }
    .hero__content p { font-size: var(--text-base); }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── RTL Hero ────────────────────────────────── */
[lang="ur"] .hero__content {
    margin-right: 0;
    margin-left: auto;
}