/* The home hero button pair (Views/Home/_Hero.cshtml, .hh-btn), reusable on any page.
   Wrap the buttons in .hb. Primary = .hb-btn--main with an .hb-btn__ic circle, secondary = .hb-btn--ghost.
   Same values as home-hero.css so every page's calls to action look like one family. */
.hb {
    --hb-ink: #0f1b2d; --hb-line: rgba(20, 90, 140, .16); --hb-glass: rgba(255, 255, 255, .80);
    --hb-a: #0891b2; --hb-b: #2563eb; --hb-a-ink: #0b6f8c; --hb-hi: rgba(255, 255, 255, .95); --hb-glow: 8, 145, 178;
    --hb-on-a: #ffffff; --hb-cta-bg: #0f1b2d; --hb-cta-fg: #ffffff;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
[data-bs-theme="dark"] .hb {
    --hb-ink: #eef7ff; --hb-line: rgba(110, 190, 230, .16); --hb-glass: rgba(7, 24, 44, .72);
    --hb-a: #2fb8d6; --hb-b: #3b82f6; --hb-a-ink: #7fd6ec; --hb-hi: rgba(255, 255, 255, .07); --hb-glow: 47, 184, 214;
    --hb-on-a: #04233a; --hb-cta-bg: #eef7ff; --hb-cta-fg: #06223a;
}
.hb-btn {
    display: inline-flex; align-items: center; gap: 12px; height: 54px; border: 0; border-radius: 999px;
    font: inherit; font-size: 1rem; font-weight: 700; white-space: nowrap; text-decoration: none !important; cursor: pointer;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background .2s, color .2s;
}
.hb-btn--main { padding: 0 24px 0 7px; background: var(--hb-cta-bg); color: var(--hb-cta-fg) !important; box-shadow: 0 1px 0 var(--hb-hi) inset, 0 12px 26px -14px rgba(15, 27, 45, .6); }
:root:not([data-bs-theme="dark"]) .hb-btn--main, [data-bs-theme="light"] .hb-btn--main { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: #fff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 28px -14px rgba(8, 145, 178, .75); }
:root:not([data-bs-theme="dark"]) .hb-btn--main .hb-btn__ic, [data-bs-theme="light"] .hb-btn--main .hb-btn__ic { background: rgba(255, 255, 255, .22); color: #fff; }
.hb-btn--main:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--hb-hi) inset, 0 18px 32px -14px rgba(var(--hb-glow), .65); }
.hb-btn--main:active, .hb-btn--ghost:active { transform: translateY(0) scale(.985); }
.hb-btn__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--hb-a), var(--hb-b)); color: var(--hb-on-a); font-size: 1.05rem; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.hb-btn--main:hover .hb-btn__ic { transform: rotate(45deg); }
.hb-btn--ghost { padding: 0 24px; background: var(--hb-glass); color: var(--hb-ink) !important; border: 1px solid var(--hb-line); backdrop-filter: blur(8px); }
.hb-btn--ghost i { font-size: 1rem; color: var(--hb-a); transition: transform .25s; }
.hb-btn--ghost:hover i { transform: translateX(4px); }
.hb-btn--ghost:hover { color: var(--hb-a-ink) !important; border-color: var(--hb-a); box-shadow: 0 14px 26px -16px rgba(var(--hb-glow), .7); transform: translateY(-2px); }
.hb-btn:focus-visible { outline: 2px solid var(--hb-a); outline-offset: 3px; }
@media (max-width: 575.98px) {
    .hb-btn { gap: 8px; height: 48px; font-size: .875rem; }
    .hb-btn--main { padding: 0 16px 0 5px; }
    .hb-btn__ic { width: 36px; height: 36px; }
    .hb-btn--ghost { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .hb-btn, .hb-btn__ic, .hb-btn--ghost i { transition: none; } }