/* ==========================================================================
   Homepage hero, showcase & brand marquee
   ========================================================================== */

/* ---------- Hero ---------- */
.bv-hero {
	position: relative;
	overflow: hidden;
	min-height: calc(100vh - 110px);
	background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px), var(--bv-grad-dark);
	background-size: 64px 64px, 64px 64px, auto;
	animation: bv-grid-pan 20s linear infinite;
	color: #fff;
	isolation: isolate;
}

.bv-hero::before,
.bv-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
}

.bv-hero::before {
	top: -20%;
	left: -10%;
	width: 55vw;
	height: 55vw;
	background: radial-gradient(circle, rgba(44, 99, 255, .55), transparent 65%);
	animation: bv-drift 16s ease-in-out infinite alternate;
}

.bv-hero::after {
	right: -15%;
	bottom: -30%;
	width: 50vw;
	height: 50vw;
	background: radial-gradient(circle, rgba(25, 194, 255, .4), transparent 65%);
	animation: bv-drift 12s ease-in-out infinite alternate-reverse;
}

@keyframes bv-grid-pan { to { background-position: 64px 64px, 64px 64px, 0 0; } }

.bv-hero canvas.bv-particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.bv-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, .85);
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: .08em;
}

.bv-eyebrow .elementor-heading-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bv-cyan);
	box-shadow: 0 0 0 0 rgba(25, 194, 255, .7);
	animation: bv-ping 2s infinite;
}

@keyframes bv-ping { 70% { box-shadow: 0 0 0 10px rgba(25, 194, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 194, 255, 0); } }

.bv-hero-title .elementor-heading-title {
	color: #fff;
	font-size: clamp(44px, 7.2vw, 108px) !important;
	font-weight: 700;
	line-height: .98 !important;
	letter-spacing: -.045em;
}

.bv-hero-title .bv-grad-text { display: inline-block; padding-bottom: .12em; }

/* Hero entrance: pure CSS, starts on first paint (no JS dependency, no flash) */
.bv-hero .bv-eyebrow,
.bv-hero .bv-hero-title,
.bv-hero .bv-hero-sub,
.bv-hero .elementor-widget-button,
.bv-hero .bv-stats {
	animation: bv-rise 1s var(--bv-ease) both;
}

.bv-hero .bv-hero-title { animation-delay: .1s; }
.bv-hero .bv-hero-title .bv-grad-text { animation: bv-rise 1.1s var(--bv-ease) .3s both, bv-shimmer 6s linear 1.4s infinite; }
.bv-hero .bv-hero-sub { animation-delay: .35s; }
.bv-hero .elementor-widget-button { animation-delay: .5s; }
.bv-hero .bv-stats { animation-delay: .65s; }

@keyframes bv-rise {
	from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
	to { opacity: 1; transform: none; filter: none; }
}

.bv-hero-sub .elementor-widget-container,
.bv-hero-sub p {
	max-width: 520px;
	color: rgba(255, 255, 255, .68);
	font-size: 18px;
	line-height: 1.7;
}

.bv-stats { display: flex; gap: 40px; margin-top: 12px; }
.bv-stats div { display: flex; flex-direction: column; }
.bv-stats strong { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.bv-stats strong::after { content: "+"; color: var(--bv-cyan); }
.bv-stats span { margin-top: 6px; color: rgba(255, 255, 255, .55); font-size: 13px; }

/* Showcase (floating product cards) */
.bv-showcase {
	position: relative;
	width: 100%;
	/* 用视口单位给出确定高度：百分比宽度 + aspect-ratio 在移动端弹性列里会被算成 0 高 */
	height: min(620px, 44vw);
	max-width: 620px;
	margin-inline: auto;
}

.bv-showcase__core {
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(44, 99, 255, .7), rgba(25, 194, 255, .15) 55%, transparent 70%);
	filter: blur(20px);
	animation: bv-breathe 5s ease-in-out infinite;
}

@keyframes bv-breathe { 50% { transform: scale(1.12); opacity: .75; } }

.bv-orbit {
	position: absolute;
	border: 1px dashed rgba(255, 255, 255, .18);
	border-radius: 50%;
	animation: bv-rotate 40s linear infinite;
}

.bv-orbit::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bv-cyan);
	box-shadow: 0 0 18px 4px rgba(25, 194, 255, .8);
}

.bv-orbit--a { inset: 6%; }
.bv-orbit--b { inset: 20%; animation-duration: 26s; animation-direction: reverse; }

@keyframes bv-rotate { to { transform: rotate(360deg); } }

.bv-float {
	position: absolute;
	display: flex;
	flex-direction: column;
	width: 46%;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 26px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(16px);
	color: #fff;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
	transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--rot, 0deg));
	transition: transform .9s var(--bv-ease), border-color .4s;
	animation: bv-card-in 1.2s var(--bv-ease) both;
}

.bv-float:hover { border-color: var(--bv-cyan); color: #fff; z-index: 5; }

.bv-float__img { display: block; overflow: hidden; aspect-ratio: 1; border-radius: 18px; }
.bv-float__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--bv-ease); }
.bv-float:hover .bv-float__img img { transform: scale(1.08); }

.bv-float__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 6px 2px; }
.bv-float__meta em { overflow: hidden; font-style: normal; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; opacity: .8; }
.bv-float__meta strong { flex: none; color: var(--bv-cyan); }

.bv-float--1 { top: 2%; left: 4%; --rot: -8deg; z-index: 3; animation-delay: .3s; }
.bv-float--2 { top: 26%; right: 0; --rot: 6deg; z-index: 2; animation-delay: .5s; }
.bv-float--3 { bottom: 0; left: 18%; --rot: -3deg; width: 40%; z-index: 4; animation-delay: .7s; }

@keyframes bv-card-in { from { opacity: 0; transform: translate3d(0, 80px, 0) rotate(0deg) scale(.9); } }

/* ---------- Brand marquee ---------- */
.bv-marquee {
	padding: 26px 0;
	overflow: hidden;
	background: var(--bv-navy);
}

.bv-marquee__row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bv-marquee__row + .bv-marquee__row { margin-top: 8px; }

.bv-marquee__track {
	display: flex;
	align-items: center;
	gap: 34px;
	width: max-content;
	animation: bv-marquee 40s linear infinite;
}

.bv-marquee__row--rev .bv-marquee__track { animation-direction: reverse; animation-duration: 50s; }
.bv-marquee:hover .bv-marquee__track { animation-play-state: paused; }

.bv-marquee a {
	color: #fff;
	font-size: clamp(28px, 4vw, 54px);
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
	transition: color .3s, -webkit-text-stroke-color .3s;
}

.bv-marquee__row--rev a { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .35); }
.bv-marquee a:hover { color: var(--bv-cyan); -webkit-text-stroke-color: var(--bv-cyan); }
.bv-marquee i { color: var(--bv-blue); font-style: normal; font-size: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.bv-hero { min-height: 0; }
	.bv-showcase { height: min(560px, calc(100vw - 32px)); }
}

@media (max-width: 767px) {
	.bv-stats { gap: 22px; }
	.bv-stats strong { font-size: 26px; }
	.bv-showcase { max-width: 420px; height: min(420px, calc(100vw - 32px)); }
}