.fg-categories {
    margin-bottom: 1.5rem;
}

.fg-categories__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.fg-categories__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.fg-categories__title-bar {
    display: inline-block;
    width: 4px;
    height: 1.35rem;
    border-radius: 4px;
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    box-shadow:
        0 2px 8px rgba(29, 78, 216, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.fg-categories__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
}

.fg-categories__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 158px;
    padding: 1.15rem 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    transform: translateY(0);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease;
}

.fg-categories__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, transparent 48%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
}

.fg-categories__card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    pointer-events: none;
}

.fg-categories__card:hover {
    color: inherit;
    transform: translateY(-8px) scale(1.02);
}

.fg-categories__card--green {
    background: linear-gradient(160deg, #ecfdf5 0%, #bbf7d0 45%, #86efac 100%);
    box-shadow:
        0 14px 28px rgba(22, 163, 74, 0.22),
        0 4px 10px rgba(22, 163, 74, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -4px 10px rgba(22, 101, 52, 0.12);
}

.fg-categories__card--green:hover {
    box-shadow:
        0 22px 40px rgba(22, 163, 74, 0.3),
        0 8px 16px rgba(22, 163, 74, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.85),
        inset 0 -4px 12px rgba(22, 101, 52, 0.14);
}

.fg-categories__card--blue {
    background: linear-gradient(160deg, #eff6ff 0%, #bfdbfe 45%, #93c5fd 100%);
    box-shadow:
        0 14px 28px rgba(37, 99, 235, 0.22),
        0 4px 10px rgba(37, 99, 235, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -4px 10px rgba(29, 78, 216, 0.12);
}

.fg-categories__card--blue:hover {
    box-shadow:
        0 22px 40px rgba(37, 99, 235, 0.3),
        0 8px 16px rgba(37, 99, 235, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.85),
        inset 0 -4px 12px rgba(29, 78, 216, 0.14);
}

.fg-categories__card--purple {
    background: linear-gradient(160deg, #f5f3ff 0%, #ddd6fe 45%, #c4b5fd 100%);
    box-shadow:
        0 14px 28px rgba(124, 58, 237, 0.22),
        0 4px 10px rgba(124, 58, 237, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -4px 10px rgba(91, 33, 182, 0.12);
}

.fg-categories__card--purple:hover {
    box-shadow:
        0 22px 40px rgba(124, 58, 237, 0.3),
        0 8px 16px rgba(124, 58, 237, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.85),
        inset 0 -4px 12px rgba(91, 33, 182, 0.14);
}

.fg-categories__card--orange {
    background: linear-gradient(160deg, #fff7ed 0%, #fed7aa 45%, #fdba74 100%);
    box-shadow:
        0 14px 28px rgba(234, 88, 12, 0.22),
        0 4px 10px rgba(234, 88, 12, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -4px 10px rgba(194, 65, 12, 0.12);
}

.fg-categories__card--orange:hover {
    box-shadow:
        0 22px 40px rgba(234, 88, 12, 0.3),
        0 8px 16px rgba(234, 88, 12, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.85),
        inset 0 -4px 12px rgba(194, 65, 12, 0.14);
}

.fg-categories__card--red {
    background: linear-gradient(160deg, #fef2f2 0%, #fecaca 45%, #fca5a5 100%);
    box-shadow:
        0 14px 28px rgba(220, 38, 38, 0.22),
        0 4px 10px rgba(220, 38, 38, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.75),
        inset 0 -4px 10px rgba(185, 28, 28, 0.12);
}

.fg-categories__card--red:hover {
    box-shadow:
        0 22px 40px rgba(220, 38, 38, 0.3),
        0 8px 16px rgba(220, 38, 38, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.85),
        inset 0 -4px 12px rgba(185, 28, 28, 0.14);
}

.fg-categories__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.45rem;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.18),
        inset 0 3px 0 rgba(255, 255, 255, 0.45),
        inset 0 -4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.28s ease;
}

.fg-categories__card:hover .fg-categories__icon {
    transform: translateY(-3px) scale(1.06);
}

.fg-categories__card--green .fg-categories__icon {
    background: linear-gradient(145deg, #4ade80 0%, #16a34a 55%, #15803d 100%);
}

.fg-categories__card--blue .fg-categories__icon {
    background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
}

.fg-categories__card--purple .fg-categories__icon {
    background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
}

.fg-categories__card--orange .fg-categories__icon {
    background: linear-gradient(145deg, #fb923c 0%, #ea580c 55%, #c2410c 100%);
}

.fg-categories__card--red .fg-categories__icon {
    background: linear-gradient(145deg, #f87171 0%, #dc2626 55%, #b91c1c 100%);
}

.fg-categories__name {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.fg-categories__count {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.72);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 2px 6px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.fg-categories__ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 1rem;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow:
        0 14px 32px rgba(79, 70, 229, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 10px rgba(79, 70, 229, 0.06);
}

.fg-categories__ad span {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fg-categories__ad small {
    color: #94a3b8;
    font-size: 0.75rem;
}

@media (max-width: 1199px) {
    .fg-categories__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .fg-categories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .fg-categories__grid {
        grid-template-columns: 1fr;
    }
}