.links-reference-showcase {
    --reference-accent: var(--bs-primary, #f26b00);
    --reference-bg: var(--bs-body-bg, #f7f8fa);
    --reference-surface: var(--bs-tertiary-bg, #eef1f4);
    --reference-card: var(--bs-body-bg, #ffffff);
    --reference-text: var(--bs-body-color, #18202a);
    --reference-muted: var(--bs-secondary-color, #65707d);
    --reference-border: var(--bs-border-color, rgba(24, 32, 42, .14));
    --reference-shadow: 0 14px 34px rgba(20, 28, 38, .1);
    width: min(1460px, calc(100% - 32px));
    margin: 1.5rem auto 3rem;
    overflow: hidden;
    color: var(--reference-text);
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    border-radius: 18px;
    box-shadow: var(--reference-shadow);
}

[data-bs-theme='dark'] .links-reference-showcase,
body.dark .links-reference-showcase,
body.dark-mode .links-reference-showcase,
body.theme-dark .links-reference-showcase,
.dark-mode .links-reference-showcase,
.dark-theme .links-reference-showcase {
    --reference-bg: #071019;
    --reference-surface: #0c151e;
    --reference-card: #111b24;
    --reference-text: #f6f8fa;
    --reference-muted: #aeb6bf;
    --reference-border: rgba(255, 255, 255, .11);
    --reference-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

[data-theme='dark'] .links-reference-showcase,
[data-color-mode='dark'] .links-reference-showcase {
    --reference-bg: #071019;
    --reference-surface: #0c151e;
    --reference-card: #111b24;
    --reference-text: #f6f8fa;
    --reference-muted: #aeb6bf;
    --reference-border: rgba(255, 255, 255, .11);
    --reference-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

.links-reference-hero {
    position: relative;
    isolation: isolate;
    min-height: 280px;
    display: grid;
    place-items: center;
    padding: 46px clamp(24px, 5vw, 78px);
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 88% 35%, color-mix(in srgb, var(--reference-accent) 22%, transparent), transparent 34%),
        linear-gradient(135deg, var(--reference-surface), var(--reference-bg));
    border-bottom: 1px solid var(--reference-border);
}

.links-reference-hero::before,
.links-reference-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -60px;
    width: 560px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reference-accent) 68%, transparent));
    transform: rotate(-18deg);
    box-shadow: 0 56px 0 color-mix(in srgb, var(--reference-accent) 20%, transparent), 0 112px 0 color-mix(in srgb, var(--reference-accent) 12%, transparent);
}

.links-reference-hero::before { top: 76px; }
.links-reference-hero::after { top: 164px; right: -130px; transform: rotate(13deg); }

.links-reference-hero-inner { position: relative; z-index: 1; max-width: 920px; }
.links-reference-kicker { color: var(--reference-accent); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-size: .78rem; }
.links-reference-hero h1 { margin: .4rem 0 .35rem; color: var(--reference-text); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; }
.links-reference-hero p { margin: 0 auto; max-width: 760px; color: var(--reference-muted); font-size: clamp(1rem, 1.6vw, 1.17rem); }

.links-reference-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30px;
    border-top: 1px solid var(--reference-border);
}

.links-reference-benefits span { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 22px; color: var(--reference-muted); }
.links-reference-benefits span + span { border-left: 1px solid var(--reference-border); }
.links-reference-benefits i { color: var(--reference-accent); font-size: 1.35rem; }
.links-reference-benefits b { color: var(--reference-text); font-size: .92rem; }

.links-reference-toolbar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px clamp(20px, 4vw, 58px);
    background: var(--reference-surface);
    border-bottom: 1px solid var(--reference-border);
}

.links-reference-filters { display: flex; flex: 1; gap: 10px; flex-wrap: wrap; }
.links-reference-filters button,
.links-reference-search {
    border: 1px solid var(--reference-border);
    background: var(--reference-card);
    color: var(--reference-muted);
    border-radius: 9px;
}

.links-reference-filters button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; font: inherit; font-size: .87rem; transition: .2s ease; }
.links-reference-filters button:hover { color: var(--reference-text); border-color: color-mix(in srgb, var(--reference-accent) 50%, var(--reference-border)); transform: translateY(-1px); }
.links-reference-filters button.is-active { color: #fff; border-color: var(--reference-accent); background: var(--reference-accent); box-shadow: 0 7px 20px color-mix(in srgb, var(--reference-accent) 24%, transparent); }

.links-reference-search { display: flex; align-items: center; gap: 10px; width: min(310px, 100%); padding: 0 14px; }
.links-reference-search i { color: var(--reference-muted); }
.links-reference-search input { width: 100%; height: 42px; border: 0; outline: 0; color: var(--reference-text); background: transparent; }
.links-reference-search input::placeholder { color: var(--reference-muted); opacity: .8; }

.links-reference-resultbar { padding: 16px clamp(20px, 4vw, 58px) 0; background: var(--reference-bg); color: var(--reference-muted); font-size: .86rem; }
.links-reference-resultbar span { display: inline-flex; align-items: center; gap: 8px; }
.links-reference-resultbar span::before { content: ''; width: 3px; height: 15px; border-radius: 4px; background: var(--reference-accent); }

.links-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 18px clamp(20px, 4vw, 58px) 26px; background: var(--reference-bg); }
.links-reference-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--reference-text); background: var(--reference-card); border: 1px solid var(--reference-border); border-radius: 13px; box-shadow: 0 7px 22px rgba(16, 25, 35, .08); transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease; }
.links-reference-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--reference-accent) 42%, var(--reference-border)); box-shadow: var(--reference-shadow); }
.links-reference-card[hidden] { display: none; }
.links-reference-card.is-featured { box-shadow: inset 0 3px 0 var(--reference-accent), 0 7px 22px rgba(16, 25, 35, .1); }

.links-reference-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--reference-surface); }
.links-reference-image[aria-disabled='true'] { pointer-events: none; }
.links-reference-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.links-reference-card:hover .links-reference-image img { transform: scale(1.035); }
.links-reference-featured { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #fff; background: color-mix(in srgb, var(--reference-accent) 88%, #111); border-radius: 7px; font-size: .72rem; font-weight: 700; }

.links-reference-card-body { flex: 1; display: flex; flex-direction: column; padding: 17px 18px 16px; }
.links-reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.links-reference-heading h2 { margin: 0; color: var(--reference-text); font-size: 1.05rem; line-height: 1.3; font-weight: 750; }
.links-reference-client { margin: 4px 0 0; color: var(--reference-accent); font-size: .76rem; font-weight: 650; }
.links-reference-external { flex: 0 0 31px; height: 31px; display: grid; place-items: center; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 7px; text-decoration: none; }
.links-reference-external:hover { color: #fff; background: var(--reference-accent); border-color: var(--reference-accent); }
.links-reference-description { flex: 1; margin: 10px 0 13px; color: var(--reference-muted); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.links-reference-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.links-reference-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 6px; font-size: .69rem; line-height: 1.1; }
.links-reference-tags i { color: var(--reference-accent); }
.links-reference-card time { margin-top: 12px; color: var(--reference-muted); font-size: .7rem; }

.links-reference-empty { margin: 18px clamp(20px, 4vw, 58px) 28px; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--reference-muted); background: var(--reference-surface); border: 1px dashed var(--reference-border); border-radius: 12px; }
.links-reference-empty[hidden] { display: none; }
.links-reference-empty i { color: var(--reference-accent); font-size: 2rem; }
.links-reference-empty p { margin: 0; }

.links-reference-cta { display: flex; align-items: center; gap: 18px; max-width: 920px; margin: 0 auto 28px; padding: 18px 24px; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 12px; }
.links-reference-cta > i { color: var(--reference-accent); font-size: 2.25rem; }
.links-reference-cta div { display: grid; }
.links-reference-cta strong { font-size: 1rem; }
.links-reference-cta span { color: var(--reference-muted); font-size: .82rem; }

@media (max-width: 1180px) { .links-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .links-reference-toolbar { align-items: flex-start; flex-direction: column; } .links-reference-search { width: 100%; } }
@media (max-width: 820px) { .links-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .links-reference-benefits { grid-template-columns: 1fr; } .links-reference-benefits span + span { border-left: 0; border-top: 1px solid var(--reference-border); } }
@media (max-width: 560px) { .links-reference-showcase { width: calc(100% - 18px); margin-top: .75rem; border-radius: 12px; } .links-reference-hero { padding: 38px 20px; } .links-reference-grid { grid-template-columns: 1fr; padding-inline: 14px; } .links-reference-toolbar { padding-inline: 14px; } .links-reference-filters button { flex: 1 1 auto; justify-content: center; } .links-reference-cta { margin-inline: 14px; } }

@media (prefers-reduced-motion: reduce) { .links-reference-card, .links-reference-image img, .links-reference-filters button { transition: none; } }