/* Hero Slider */
.bel-hero { --bel-hero-h: 690px; position: relative; overflow: hidden; max-width: 100%; }
.bel-hero__art { position: absolute; left: 4%; bottom: 0; width: min(640px, 48%); color: var(--bel-heading); opacity: .06; pointer-events: none; }
.bel-hero__art svg { width: 100%; height: auto; position: static; opacity: 1; }
.bel-hero__track { display: grid; }
.bel-hero__slide { grid-area: 1 / 1; position: relative; min-height: var(--bel-hero-h); display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--bel-ease), visibility .9s; }
.bel-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.bel-hero__media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; max-width: 100%; overflow: hidden; clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); background: var(--bel-dark); }
.bel-hero__media img, .bel-hero__media .bel-ph { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.bel-hero__slide.is-active .bel-hero__media img { transform: scale(1); }
.bel-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 30, 30, .25), transparent 40%); }
.bel-hero__inner { position: relative; z-index: 2; }
.bel-hero__content { max-width: 600px; padding: 90px 0 120px; }
.bel-hero__title { margin: 0 0 22px; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.18; letter-spacing: -.02em; }
.bel-hero__text { max-width: 520px; margin-bottom: 38px; font-size: 17px; }
.bel-hero__content > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--bel-ease), transform .7s var(--bel-ease); }
.bel-hero__slide.is-active .bel-hero__content > * { opacity: 1; transform: none; }
.bel-hero__slide.is-active .bel-hero__content > :nth-child(2) { transition-delay: .12s; }
.bel-hero__slide.is-active .bel-hero__content > :nth-child(3) { transition-delay: .24s; }
.bel-hero__slide.is-active .bel-hero__content > :nth-child(4) { transition-delay: .36s; }
.bel-hero__nav { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 3; pointer-events: none; }
.bel-hero__dots { display: flex; gap: 12px; pointer-events: auto; }
.bel-hero__dots button { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--bel-accent); cursor: pointer; opacity: .55; transition: opacity .25s; }
.bel-hero__dots button.is-active { opacity: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--bel-accent) 30%, transparent); }
.bel-hero__badge { position: absolute; z-index: 3; left: 66%; top: 46%; width: 136px; height: 136px; border-radius: 50%; background: var(--bel-dark); color: #fff; }
.bel-hero__badge svg { width: 100%; height: 100%; animation: bel-spin 18s linear infinite; }
.bel-hero__badge text { fill: #fff; font: 600 10.5px var(--bel-font-b); letter-spacing: .16em; text-transform: uppercase; }
.bel-hero__badge-core { position: absolute; inset: 36%; display: grid; place-items: center; border-radius: 50%; background: var(--bel-accent); color: var(--bel-on-accent); }
.bel-hero__badge-core .bel-icon { width: 60%; height: 60%; stroke-width: 2; }
@keyframes bel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bel-hero__badge svg { animation: none; } .bel-hero__media img { transition: none; transform: none; } }
@media (max-width: 1024px) {
	.bel-hero { --bel-hero-h: 600px; }
	.bel-hero__media { width: 52%; }
	.bel-hero__content { max-width: 470px; }
	.bel-hero__badge { left: 58%; width: 112px; height: 112px; }
}
@media (max-width: 860px) {
	.bel-hero__media img { transform: none !important; }
	.bel-hero__slide { flex-direction: column; align-items: stretch; min-height: 0; }
	.bel-hero__media { position: relative; width: 100%; height: 340px; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
	.bel-hero__content { max-width: none; padding: 34px 0 96px; }
	.bel-hero__badge { left: auto; right: 22px; top: 270px; width: 96px; height: 96px; }
	.bel-hero__badge text { font-size: 9.5px; }
	.bel-hero__nav { bottom: 40px; }
	.bel-hero__art { display: none; }
}
@media (max-width: 480px) { .bel-hero__media { height: 260px; } .bel-hero__badge { top: 200px; } }