.bp-hub-hero { position: relative; min-height: 1170px; padding-top: 310px; box-sizing: border-box; overflow: hidden; text-align: center; }
.bp-hub-hero-inner { position: relative; z-index: 1; }
.bp-hub-hero-title { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.bp-hub-br { display: inline; }
.bp-hub-hero-line { display: block; height: auto; }
.bp-hub-hero-line--1 { width: min(1324px, 100%); }
.bp-hub-hero-line--2 { width: min(710px, 54%); }
.bp-hub-hero-line--3 { width: min(946px, 72%); }
.bp-hub-hero-text { position: relative; max-width: 1300px; margin: 183px auto 0; font-size: 1.5rem; font-weight: 300; line-height: 1.17; }
.bp-hub-mouse { display: inline-block; margin-top: 92px; animation: bp-hub-bob 2s ease-in-out infinite; }
.bp-hub-mouse img { width: 56px; height: auto; display: block; }
@keyframes bp-hub-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Compass needle: swing like a needle settling, then rest. Pivot = C center (148.25, 45) in the SVG viewBox. */
.bp-hub-needle { transform-box: view-box; transform-origin: 148.25px 45px; animation: bp-hub-needle 5s cubic-bezier(.36, .07, .19, .97) infinite; }
@keyframes bp-hub-needle {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(-40deg); }
    26%  { transform: rotate(25deg); }
    38%  { transform: rotate(-12deg); }
    48%  { transform: rotate(4deg); }
    56%, 100% { transform: rotate(0deg); }
}

/* Crescent glow (reused by quote via --down): crescent.svg is a path with pointed horns; a light blur softens edges without losing the tips. */
.bp-hub-crescent {
    position: absolute; left: 50%; top: 130px; width: 1200px; height: 580px; transform: translateX(-50%);
    pointer-events: none; z-index: 0; filter: blur(20px);
    background: url("../../../images/hub/c-vision/crescent.svg") center / 100% 100% no-repeat;
    animation: bp-hub-breathe 6s ease-in-out infinite, bp-hub-drift 14s ease-in-out infinite;
}
/* Hero: the glow lives inside the title and is sized from it, so it tracks the headline at every width. */
.bp-hub-hero-title { position: relative; z-index: 0; }
.bp-hub-hero .bp-hub-crescent { top: -48%; width: 84%; height: auto; aspect-ratio: 1200 / 580; z-index: -1; }
.bp-hub-crescent--down { transform: translateX(-50%) scaleY(-1); }
/* ponytail: opacity only - the owner asked for no growing/scaling. */
@keyframes bp-hub-breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes bp-hub-drift { 0%, 100% { translate: -2% 0; } 50% { translate: 2% 0; } }

/* Tablet: the 1170px desktop hero leaves a large empty band. */
@media (min-width: 768px) and (max-width: 1199px) {
    .bp-hub-hero { min-height: 0; padding: 180px 0 90px; }
    .bp-hub-hero-text { margin-top: 90px; font-size: 1.125rem; }
    .bp-hub-mouse { margin-top: 64px; }
    .bp-hub-br { display: none; }
}
@media (max-width: 767px) {
    .bp-hub-hero { min-height: 0; padding: 112px 0 42px; }
    .bp-hub-hero-title { gap: 6px; }
    .bp-hub-hero-line--1 { width: 100%; }
    .bp-hub-hero-line--2 { width: 49%; }
    .bp-hub-hero-line--3 { width: 74%; }
    .bp-hub-br { display: none; }
    .bp-hub-hero-text { margin-top: 26px; font-size: .6875rem; line-height: 1.32; }
    .bp-hub-mouse { margin-top: 20px; }
    .bp-hub-mouse img { width: 26px; }
    /* Mobile design shows a much softer glow than desktop. */
    .bp-hub-hero .bp-hub-crescent { width: 125%; top: -45%; filter: blur(24px) brightness(.42); }
}