Spaces:

duqing2026
/

static-demo

Running

App Files Files Community

static-demo / campaign.html

duqing2026

经典电商活动页

2061393 3 months ago

raw

history blame contribute delete

54.4 kB

	<!doctype html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>限时福利专场 · 经典电商活动页</title>
	<style>
	:root {
	--bg: #050816;
	--bg-alt: #050818;
	--primary: #f97316;
	--primary-soft: rgba(249, 115, 22, 0.12);
	--primary-strong: #ea580c;
	--accent: #22c55e;
	--danger: #ef4444;
	--text: rgba(248, 250, 252, 0.94);
	--muted: rgba(148, 163, 184, 0.9);
	--card: rgba(15, 23, 42, 0.92);
	--border: rgba(148, 163, 184, 0.26);
	--shadow-soft: 0 24px 80px rgba(15, 23, 42, 0.9);
	--radius-lg: 22px;
	--radius-md: 14px;
	--radius-pill: 999px;
	}

	* {
	box-sizing: border-box;
	}

	html,
	body {
	margin: 0;
	padding: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC",
	"Microsoft YaHei", Arial, sans-serif;
	color: var(--text);
	background:
	radial-gradient(1000px 620px at 10% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
	radial-gradient(900px 560px at 90% 10%, rgba(249, 115, 22, 0.3), transparent 60%),
	radial-gradient(800px 560px at 50% 100%, rgba(37, 99, 235, 0.4), transparent 65%),
	linear-gradient(180deg, #020617, #020617 40%, #020617);
	scroll-behavior: smooth;
	}

	body {
	min-height: 100vh;
	}

	main {
	max-width: 1120px;
	margin: 0 auto;
	padding: 24px 20px 120px;
	}

	@media (min-width: 768px) {
	main {
	padding: 36px 16px 140px;
	}
	}

	.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	}

	.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.brand-mark {
	width: 32px;
	height: 32px;
	border-radius: 12px;
	background:
	radial-gradient(120% 120% at 10% 0%, rgba(248, 250, 252, 0.95), transparent 55%),
	conic-gradient(from 160deg, #f97316, #22c55e, #38bdf8, #f97316);
	position: relative;
	box-shadow:
	0 0 0 1px rgba(15, 23, 42, 0.7),
	0 12px 30px rgba(15, 23, 42, 0.8);
	}

	.brand-mark::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 10px;
	background:
	conic-gradient(from 210deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.6));
	box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
	}

	.brand-text-main {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	}

	.brand-text-sub {
	font-size: 11px;
	color: var(--muted);
	}

	.page-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(56, 189, 248, 0.45);
	background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.18), transparent 55%),
	rgba(15, 23, 42, 0.88);
	font-size: 11px;
	color: rgba(226, 232, 240, 0.92);
	}

	.pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
	}

	.btn {
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.5);
	background: rgba(15, 23, 42, 0.85);
	padding: 6px 14px;
	cursor: pointer;
	color: rgba(226, 232, 240, 0.96);
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition:
	border-color 160ms ease,
	background 160ms ease,
	transform 160ms ease,
	box-shadow 160ms ease;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.7);
	}

	.btn:hover {
	border-color: rgba(148, 163, 184, 0.75);
	background: rgba(15, 23, 42, 0.95);
	transform: translateY(-1px);
	box-shadow: 0 18px 38px rgba(15, 23, 42, 0.95);
	}

	.btn-primary {
	border-color: rgba(249, 115, 22, 0.9);
	background:
	linear-gradient(135deg, #f97316, #fb923c);
	color: #0b1120;
	font-weight: 600;
	box-shadow:
	0 12px 34px rgba(249, 115, 22, 0.45),
	0 0 0 1px rgba(15, 23, 42, 0.45);
	}

	.btn-primary:hover {
	background: linear-gradient(135deg, #fb923c, #f97316);
	transform: translateY(-1.5px) translateZ(0);
	}

	.btn-ghost {
	font-size: 11px;
	padding-inline: 10px;
	border-style: dashed;
	}

	.btn-icon {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.9);
	}

	.btn-icon svg {
	width: 10px;
	height: 10px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	}

	.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr);
	gap: 24px;
	margin-bottom: 28px;
	}

	@media (max-width: 860px) {
	.hero {
	grid-template-columns: minmax(0, 1fr);
	}
	}

	.hero-left {
	padding: 18px 18px 20px;
	border-radius: var(--radius-lg);
	background:
	radial-gradient(380px 260px at 0 0, rgba(248, 250, 252, 0.06), transparent 70%),
	rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.45);
	box-shadow: var(--shadow-soft);
	position: relative;
	overflow: hidden;
	}

	.hero-left::before {
	content: "";
	position: absolute;
	inset: -40%;
	background:
	conic-gradient(
	from 200deg,
	rgba(248, 250, 252, 0.08),
	rgba(8, 47, 73, 0.18),
	rgba(30, 64, 175, 0.32),
	transparent,
	transparent
	);
	opacity: 0.5;
	filter: blur(40px);
	pointer-events: none;
	}

	.hero-inner {
	position: relative;
	z-index: 1;
	}

	.hero-tagline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	color: rgba(226, 232, 240, 0.9);
	background:
	radial-gradient(circle at 0 0, rgba(8, 47, 73, 0.6), transparent 60%),
	rgba(15, 23, 42, 0.85);
	border: 1px solid rgba(148, 163, 184, 0.7);
	margin-bottom: 10px;
	}

	.hero-tagline-badge {
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(248, 250, 252, 0.96);
	color: #0b1120;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.04em;
	}

	.hero-title {
	margin: 4px 0 10px;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	}

	.hero-title span {
	background: linear-gradient(120deg, #f97316, #fb923c, #22c55e);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	.hero-sub {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 420px;
	}

	.hero-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	}

	.metric {
	min-width: 90px;
	border-radius: 14px;
	padding: 8px 10px;
	border: 1px solid rgba(51, 65, 85, 0.9);
	background:
	radial-gradient(circle at 0 0, rgba(30, 64, 175, 0.55), transparent 55%),
	rgba(15, 23, 42, 0.9);
	}

	.metric-label {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.88);
	margin-bottom: 4px;
	}

	.metric-value {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: 0.03em;
	}

	.metric-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: rgba(52, 211, 153, 0.96);
	}

	.metric-tag-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba(52, 211, 153, 0.95);
	}

	.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	}

	.hero-hint {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.85);
	margin-top: 10px;
	}

	.hero-right {
	position: relative;
	border-radius: var(--radius-lg);
	padding: 18px 16px 18px;
	background:
	radial-gradient(380px 260px at 80% 0, rgba(251, 113, 133, 0.38), transparent 70%),
	radial-gradient(460px 300px at 0 90%, rgba(59, 130, 246, 0.55), transparent 70%),
	linear-gradient(145deg, #020617, #020617);
	border: 1px solid rgba(148, 163, 184, 0.4);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	}

	.hero-right-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	}

	.hero-right-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.7);
	font-size: 11px;
	}

	.clock {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	}

	.clock-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #f97316;
	box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3);
	}

	.countdown {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	font-size: 11px;
	color: rgba(226, 232, 240, 0.9);
	}

	.countdown-item {
	min-width: 52px;
	text-align: center;
	}

	.countdown-value {
	display: block;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: 0.06em;
	}

	.countdown-label {
	font-size: 10px;
	color: rgba(148, 163, 184, 0.88);
	}

	.hero-product-card {
	position: relative;
	border-radius: 18px;
	padding: 12px 12px 12px;
	background:
	radial-gradient(circle at 0 0, rgba(251, 113, 133, 0.32), transparent 65%),
	radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.24), transparent 60%),
	rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.6);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
	overflow: hidden;
	}

	.hero-product-banner {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	height: 190px;
	background:
	linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.96)),
	url("https://images.pexels.com/photos/5632371/pexels-photo-5632371.jpeg?auto=compress&cs=tinysrgb&w=1200")
	center/cover no-repeat;
	}

	.hero-product-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
	radial-gradient(circle at 15% 15%, rgba(251, 113, 133, 0.7), transparent 60%),
	radial-gradient(circle at 80% 100%, rgba(56, 189, 248, 0.7), transparent 65%);
	mix-blend-mode: screen;
	opacity: 0.9;
	}

	.hero-product-main-tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.86);
	border: 1px solid rgba(148, 163, 184, 0.75);
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(248, 250, 252, 0.96);
	}

	.hero-product-main-tag span {
	font-weight: 650;
	letter-spacing: 0.04em;
	}

	.hero-product-badge {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f97316, #fb923c);
	color: #0b1120;
	font-size: 11px;
	font-weight: 650;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	box-shadow:
	0 10px 26px rgba(249, 115, 22, 0.6),
	0 0 0 1px rgba(248, 250, 252, 0.8);
	}

	.hero-product-badge span {
	font-size: 16px;
	}

	.hero-product-info {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	align-items: center;
	}

	.hero-product-text-main {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
	}

	.hero-product-text-sub {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.9);
	}

	.hero-product-price {
	text-align: right;
	}

	.hero-product-price-now {
	font-size: 16px;
	font-weight: 650;
	}

	.hero-product-price-now span {
	font-size: 11px;
	opacity: 0.9;
	margin-left: 2px;
	}

	.hero-product-price-old {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.9);
	text-decoration: line-through;
	}

	.hero-product-tags {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}

	.hero-product-tag {
	font-size: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.7);
	color: rgba(226, 232, 240, 0.96);
	}

	.hero-glow-orbit {
	position: absolute;
	inset: -12%;
	border-radius: 32px;
	border: 1px dashed rgba(148, 163, 184, 0.35);
	opacity: 0.8;
	pointer-events: none;
	}

	.hero-glow-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(248, 250, 252, 0.98);
	box-shadow:
	0 0 0 4px rgba(248, 250, 252, 0.3),
	0 0 18px rgba(248, 250, 252, 0.9);
	}

	.hero-glow-dot.dot-1 {
	top: 10%;
	left: 8%;
	}

	.hero-glow-dot.dot-2 {
	bottom: 6%;
	right: 10%;
	}

	.section {
	margin-top: 32px;
	}

	.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
	}

	.section-title {
	font-size: 15px;
	font-weight: 640;
	}

	.section-sub {
	font-size: 12px;
	color: var(--muted);
	}

	.section-tag {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.96);
	}

	.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	}

	@media (max-width: 900px) {
	.benefits-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	}

	@media (max-width: 640px) {
	.benefits-grid {
	grid-template-columns: minmax(0, 1fr);
	}
	}

	.benefit-card {
	position: relative;
	border-radius: var(--radius-md);
	padding: 12px 12px 10px;
	background: rgba(15, 23, 42, 0.96);
	border: 1px solid rgba(51, 65, 85, 0.9);
	overflow: hidden;
	transform: translateY(8px);
	opacity: 0;
	transition:
	opacity 400ms ease,
	transform 400ms ease;
	}

	.benefit-card.visible {
	opacity: 1;
	transform: translateY(0);
	}

	.benefit-tag {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.9);
	margin-bottom: 4px;
	}

	.benefit-title {
	font-size: 13px;
	margin-bottom: 6px;
	}

	.benefit-desc {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.7;
	}

	.benefit-highlight {
	position: absolute;
	inset: -40%;
	background:
	radial-gradient(circle at 0 0, rgba(251, 113, 133, 0.28), transparent 60%),
	radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.3), transparent 60%);
	opacity: 0.4;
	mix-blend-mode: screen;
	pointer-events: none;
	}

	.benefit-index {
	position: absolute;
	right: 10px;
	bottom: 8px;
	font-size: 11px;
	color: rgba(148, 163, 184, 0.8);
	}

	.coupon-strip {
	margin-top: 24px;
	padding: 10px;
	border-radius: var(--radius-lg);
	background:
	radial-gradient(circle at 0 0, rgba(52, 211, 153, 0.42), transparent 65%),
	radial-gradient(circle at 100% 0, rgba(249, 115, 22, 0.36), transparent 60%),
	rgba(15, 23, 42, 0.96);
	border: 1px solid rgba(148, 163, 184, 0.5);
	box-shadow: var(--shadow-soft);
	}

	.coupon-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	}

	.coupon-title {
	font-size: 13px;
	font-weight: 600;
	}

	.coupon-sub {
	font-size: 11px;
	color: rgba(226, 232, 240, 0.9);
	}

	.coupon-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}

	.coupon {
	flex: 1 1 180px;
	min-width: 170px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 9px;
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.9);
	border: 1px dashed rgba(148, 163, 184, 0.9);
	}

	.coupon-main {
	font-size: 12px;
	font-weight: 600;
	}

	.coupon-desc {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.95);
	}

	.coupon-btn {
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.9);
	background: rgba(15, 23, 42, 0.94);
	color: rgba(226, 232, 240, 0.98);
	cursor: pointer;
	white-space: nowrap;
	transition:
	background 150ms ease,
	transform 150ms ease,
	box-shadow 150ms ease;
	}

	.coupon-btn:hover {
	background: rgba(15, 23, 42, 1);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.85);
	}

	.products-section {
	margin-top: 30px;
	}

	.products-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	}

	@media (max-width: 980px) {
	.products-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	}

	@media (max-width: 640px) {
	.products-grid {
	grid-template-columns: minmax(0, 1fr);
	}
	}

	.product-card {
	position: relative;
	border-radius: var(--radius-md);
	background: rgba(15, 23, 42, 0.96);
	border: 1px solid rgba(51, 65, 85, 0.95);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	}

	.product-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	background: rgba(15, 23, 42, 0.9);
	border: 1px solid rgba(148, 163, 184, 0.9);
	color: rgba(226, 232, 240, 0.96);
	}

	.product-discount {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 650;
	background: linear-gradient(135deg, #f97316, #fb923c);
	color: #0b1120;
	box-shadow:
	0 10px 24px rgba(249, 115, 22, 0.6),
	0 0 0 1px rgba(248, 250, 252, 0.9);
	}

	.product-image-wrap {
	position: relative;
	height: 170px;
	overflow: hidden;
	}

	.product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform 260ms ease-out;
	will-change: transform;
	}

	.product-card:hover .product-image {
	transform: scale(1.04);
	}

	.product-body {
	padding: 10px 10px 9px;
	}

	.product-title {
	font-size: 13px;
	margin-bottom: 4px;
	}

	.product-sub {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.95);
	margin-bottom: 6px;
	}

	.product-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	}

	.product-price-main {
	font-size: 14px;
	font-weight: 650;
	}

	.product-price-main span {
	font-size: 11px;
	margin-left: 2px;
	opacity: 0.9;
	}

	.product-price-old {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.95);
	text-decoration: line-through;
	}

	.product-tagline {
	font-size: 10px;
	color: rgba(52, 211, 153, 0.96);
	}

	.product-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	}

	.product-badges-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	}

	.product-badge-inline {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.96);
	border: 1px solid rgba(51, 65, 85, 0.95);
	color: rgba(148, 163, 184, 0.96);
	}

	.product-btn {
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, #f97316, #fb923c);
	color: #0b1120;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow:
	0 10px 24px rgba(249, 115, 22, 0.6),
	0 0 0 1px rgba(15, 23, 42, 0.7);
	transition:
	transform 120ms ease,
	box-shadow 120ms ease;
	}

	.product-btn:hover {
	transform: translateY(-1px);
	box-shadow:
	0 14px 32px rgba(249, 115, 22, 0.7),
	0 0 0 1px rgba(15, 23, 42, 0.9);
	}

	.product-btn-pulse {
	animation: productPulse 1600ms ease-in-out infinite;
	}

	@keyframes productPulse {
	0% {
	transform: translateY(0) scale(1);
	box-shadow:
	0 10px 24px rgba(249, 115, 22, 0.6),
	0 0 0 1px rgba(15, 23, 42, 0.7);
	}
	50% {
	transform: translateY(-1px) scale(1.03);
	box-shadow:
	0 16px 34px rgba(249, 115, 22, 0.8),
	0 0 0 1px rgba(15, 23, 42, 0.9);
	}
	100% {
	transform: translateY(0) scale(1);
	box-shadow:
	0 10px 24px rgba(249, 115, 22, 0.6),
	0 0 0 1px rgba(15, 23, 42, 0.7);
	}
	}

	.floating-bar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translate(-50%, 110%);
	width: min(640px, calc(100vw - 24px));
	border-radius: 999px;
	background:
	radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.4), transparent 55%),
	radial-gradient(circle at 100% 0, rgba(249, 115, 22, 0.4), transparent 55%),
	rgba(15, 23, 42, 0.98);
	border: 1px solid rgba(148, 163, 184, 0.8);
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.95);
	padding: 8px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	z-index: 40;
	transition: transform 260ms cubic-bezier(0.22, 0.77, 0.36, 1);
	}

	.floating-bar.visible {
	transform: translate(-50%, 0);
	}

	.floating-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	}

	.floating-title {
	font-size: 12px;
	font-weight: 600;
	}

	.floating-sub {
	font-size: 11px;
	color: rgba(148, 163, 184, 0.95);
	}

	.floating-cta {
	display: flex;
	align-items: center;
	gap: 6px;
	}

	.floating-countdown {
	font-size: 11px;
	color: rgba(226, 232, 240, 0.96);
	}

	.floating-btn {
	font-size: 11px;
	padding: 6px 12px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, #f97316, #fb923c);
	color: #0b1120;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow:
	0 10px 24px rgba(249, 115, 22, 0.7),
	0 0 0 1px rgba(15, 23, 42, 0.9);
	}

	.toast {
	position: fixed;
	left: 50%;
	bottom: 80px;
	transform: translate(-50%, 120%);
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.98);
	border: 1px solid rgba(52, 211, 153, 0.9);
	color: rgba(226, 232, 240, 0.98);
	font-size: 11px;
	z-index: 50;
	box-shadow: 0 18px 60px rgba(15, 23, 42, 0.95);
	transition: transform 220ms ease-out, opacity 220ms ease-out;
	opacity: 0;
	}

	.toast.visible {
	transform: translate(-50%, 0);
	opacity: 1;
	}

	.footer {
	margin-top: 40px;
	font-size: 11px;
	color: rgba(148, 163, 184, 0.9);
	text-align: center;
	}

	.footer span {
	color: rgba(226, 232, 240, 0.96);
	}

	.fade-in-up {
	opacity: 0;
	transform: translateY(8px);
	animation: fadeInUp 420ms ease-out forwards;
	}

	.fade-in-up.delay-1 {
	animation-delay: 80ms;
	}

	.fade-in-up.delay-2 {
	animation-delay: 160ms;
	}

	.fade-in-up.delay-3 {
	animation-delay: 240ms;
	}

	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(8px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
	}
	}
	</style>
	</head>
	<body>
	<main>
	<header class="page-header">
	<div class="brand">
	<div class="brand-mark"></div>
	<div>
	<div class="brand-text-main">FLASH DEALS</div>
	<div class="brand-text-sub">经典电商活动 · 单页可直接分享</div>
	</div>
	</div>
	<div class="page-actions">
	<div class="pill">
	<span class="pill-dot"></span>
	<span>活动已开启 · 名额有限</span>
	</div>
	<button class="btn btn-ghost" id="shareBtn" type="button">
	<span class="btn-icon">
	<svg viewBox="0 0 20 20" aria-hidden="true">
	<path
	d="M7.5 10.5 5 9m0 0 2.5-1.5M5 9v5m6.5-9H14a2 2 0 0 1 2 2v7c0 1.1-.9 2-2 2H9a2 2 0 0 1-2-2v-.5"
	/>
	<path d="M11 2.5 8.5 5M11 2.5 13.5 5M11 2.5V9" />
	</svg>
	</span>
	<span>复制分享链接</span>
	</button>
	</div>
	</header>

	<section class="hero" aria-label="限时福利活动核心信息">
	<div class="hero-left fade-in-up">
	<div class="hero-inner">
	<div class="hero-tagline">
	<span class="hero-tagline-badge">限时 72 小时</span>
	<span>大促合集 · 新客立减 · 爆款直降到底</span>
	</div>
	<h1 class="hero-title">
	年中<span>福利专场</span>：精选好物一站抢齐
	</h1>
	<p class="hero-sub">
	精选生活、数码、办公三大品类爆款，叠加三重满减券与专属折扣。页面为单文件静态活动页，复制链接即可分享给好友或投放渠道。
	</p>
	<div class="hero-metrics">
	<div class="metric">
	<div class="metric-label">参与品牌</div>
	<div class="metric-value">120+</div>
	<div class="metric-tag">
	<span class="metric-tag-dot"></span>
	<span>官方直营</span>
	</div>
	</div>
	<div class="metric">
	<div class="metric-label">直降最高</div>
	<div class="metric-value">¥ 800</div>
	<div class="metric-tag">
	<span class="metric-tag-dot"></span>
	<span>叠加满减券</span>
	</div>
	</div>
	<div class="metric">
	<div class="metric-label">实时库存</div>
	<div class="metric-value">安心购</div>
	<div class="metric-tag">
	<span class="metric-tag-dot"></span>
	<span>售罄自动下架</span>
	</div>
	</div>
	</div>
	<div class="hero-actions">
	<button class="btn btn-primary" id="scrollToProductsBtn" type="button">
	<span class="btn-icon">
	<svg viewBox="0 0 20 20" aria-hidden="true">
	<path d="M4 8.5 9.5 14 15 8.5" />
	</svg>
	</span>
	<span>立即查看热卖专区</span>
	</button>
	<button class="btn btn-ghost" id="scrollToCouponBtn" type="button">
	<span class="btn-icon">
	<svg viewBox="0 0 20 20" aria-hidden="true">
	<path d="M4 5.5h12M4 10h6m-6 4.5h4" />
	</svg>
	</span>
	<span>先领券再下单更省</span>
	</button>
	</div>
	<div class="hero-hint">提示：本页所有动效与交互均在前端完成，无需额外依赖。</div>
	</div>
	</div>

	<aside class="hero-right fade-in-up delay-1" aria-label="主推爆款商品与倒计时">
	<div class="hero-right-header">
	<div class="hero-right-badge">
	<span class="clock">
	<span class="clock-dot"></span>
	<span>限时活动倒计时</span>
	</span>
	</div>
	<div class="countdown" aria-live="polite" aria-atomic="true">
	<div class="countdown-item">
	<span class="countdown-value" id="cd-days">--</span>
	<span class="countdown-label">天</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-value" id="cd-hours">--</span>
	<span class="countdown-label">小时</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-value" id="cd-minutes">--</span>
	<span class="countdown-label">分钟</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-value" id="cd-seconds">--</span>
	<span class="countdown-label">秒</span>
	</div>
	</div>
	</div>

	<div class="hero-product-card">
	<div class="hero-product-banner" role="img" aria-label="家庭客厅场景中的智能家居产品展示"></div>
	<div class="hero-product-main-tag">
	<span>今日主推</span>
	<span>智能生活套装</span>
	</div>
	<div class="hero-product-badge">
	<span>¥ 1499</span>
	<span>限量 500 份</span>
	</div>
	<div class="hero-product-info">
	<div>
	<div class="hero-product-text-main">一键焕新客厅场景 · 智能生活组合</div>
	<div class="hero-product-text-sub">
	含智能音箱、氛围灯带与温湿度传感器，适配主流语音平台，适合首购用户一步到位。
	</div>
	</div>
	<div class="hero-product-price">
	<div class="hero-product-price-now">
	¥ 1499<span>起</span>
	</div>
	<div class="hero-product-price-old">日常价 ¥ 2199</div>
	</div>
	</div>
	<div class="hero-product-tags">
	<span class="hero-product-tag">支持 7 天无理由退货</span>
	<span class="hero-product-tag">下单即享 2 年质保</span>
	<span class="hero-product-tag">下单自动参与抽奖</span>
	</div>
	<div class="hero-glow-orbit"></div>
	<div class="hero-glow-dot dot-1"></div>
	<div class="hero-glow-dot dot-2"></div>
	</div>
	</aside>
	</section>

	<section class="section" aria-label="本场活动亮点">
	<div class="section-header">
	<div>
	<h2 class="section-title">三大活动亮点</h2>
	<p class="section-sub">覆盖新客、老客与会员用户，多层福利自动叠加。</p>
	</div>
	<div class="section-tag">规则精简 · 让用户一眼就懂怎么省</div>
	</div>
	<div class="benefits-grid" id="benefits">
	<article class="benefit-card">
	<div class="benefit-highlight"></div>
	<div class="benefit-tag">新客专享</div>
	<h3 class="benefit-title">首单立减 + 包邮到家</h3>
	<p class="benefit-desc">
	新注册用户首单实付满 ¥199，自动减免 ¥60，同时全国大部分地区享受包邮服务，无需额外勾选或输入代码。
	</p>
	<div class="benefit-index">01</div>
	</article>
	<article class="benefit-card">
	<div class="benefit-highlight"></div>
	<div class="benefit-tag">老客回馈</div>
	<h3 class="benefit-title">满额阶梯折扣 · 越囤越划算</h3>
	<p class="benefit-desc">
	单笔订单实付满 ¥499 / ¥899 / ¥1499 分别额外再减 ¥50 / ¥120 / ¥260，可与品类券叠加使用，系统自动计算最优组合。
	</p>
	<div class="benefit-index">02</div>
	</article>
	<article class="benefit-card">
	<div class="benefit-highlight"></div>
	<div class="benefit-tag">会员加码</div>
	<h3 class="benefit-title">积分翻倍 + 专属客服通道</h3>
	<p class="benefit-desc">
	会员用户活动期间全场积分 2 倍累计，售前与售后均享受专属客服优先接入，提升决策效率与售后体验。
	</p>
	<div class="benefit-index">03</div>
	</article>
	</div>
	</section>

	<section class="coupon-strip" id="coupon" aria-label="活动优惠券专区">
	<div class="coupon-header">
	<div>
	<div class="coupon-title">先领券再下单 · 实付自动抵扣</div>
	<div class="coupon-sub">点击「一键复制」即可复制券码，支付时输入或由系统自动识别。</div>
	</div>
	</div>
	<div class="coupon-list">
	<div class="coupon">
	<div>
	<div class="coupon-main">全场满 ¥299 减 ¥50</div>
	<div class="coupon-desc">可与品类券叠加 · 可跨店凑单</div>
	</div>
	<button class="coupon-btn" data-code="SALE29950" type="button">一键复制</button>
	</div>
	<div class="coupon">
	<div>
	<div class="coupon-main">家居专场满 ¥799 减 ¥180</div>
	<div class="coupon-desc">适用于「家居生活」标签商品</div>
	</div>
	<button class="coupon-btn" data-code="HOME799180" type="button">一键复制</button>
	</div>
	<div class="coupon">
	<div>
	<div class="coupon-main">数码专区满 ¥1299 减 ¥260</div>
	<div class="coupon-desc">部分品牌不参与 · 以结算页为准</div>
	</div>
	<button class="coupon-btn" data-code="DIGI1299260" type="button">一键复制</button>
	</div>
	</div>
	</section>

	<section class="products-section" id="products" aria-label="热卖商品专区">
	<div class="section-header">
	<div>
	<h2 class="section-title">爆款热卖 · 覆盖多种生活场景</h2>
	<p class="section-sub">
	以下商品为示例数据，用于展示活动页布局与动效风格，可替换为真实 SKU 信息。
	</p>
	</div>
	<div class="section-tag">查看更多可复制此页面结构接入真实商品数据</div>
	</div>
	<div class="products-grid">
	<article class="product-card">
	<div class="product-badge">24 小时热卖</div>
	<div class="product-discount">限时直降 ¥ 700</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/6964078/pexels-photo-6964078.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="现代客厅场景中的布艺沙发与茶几"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">云感布艺沙发三人位</h3>
	<p class="product-sub">高回弹坐垫 · 可拆洗面料 · 小户型友好尺寸。</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 1899<span>起</span>
	</div>
	<div class="product-price-old">日常价 ¥ 2599</div>
	</div>
	<div class="product-tagline">支付成功自动预约上门安装</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">0 元预约</span>
	<span class="product-badge-inline">支持花呗分期</span>
	</div>
	<button class="product-btn product-btn-pulse" type="button">立即抢购</button>
	</div>
	</div>
	</article>

	<article class="product-card">
	<div class="product-badge">频道推荐</div>
	<div class="product-discount">领券再减 ¥ 260</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="办公桌上的显示器与键鼠套装"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">27 英寸高刷显示器 + 办公键鼠组合</h3>
	<p class="product-sub">2K 分辨率 · 165Hz 高刷 · 支持双屏扩展，商务与娱乐兼顾。</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 1599<span>套装价</span>
	</div>
	<div class="product-price-old">日常价 ¥ 2099</div>
	</div>
	<div class="product-tagline">下单赠 HDMI 线与桌线理线包</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">7 天无理由</span>
	<span class="product-badge-inline">支持两地发货</span>
	</div>
	<button class="product-btn" type="button">加入心愿单</button>
	</div>
	</div>
	</article>

	<article class="product-card">
	<div class="product-badge">人气必买</div>
	<div class="product-discount">跨店满减可叠加</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/3965545/pexels-photo-3965545.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="木质餐桌上的餐具与家用电器"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">厨房焕新小电器三件套</h3>
	<p class="product-sub">电饭煲 + 破壁机 + 空气炸锅，满足一日三餐多场景需求。</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 1299<span>组合价</span>
	</div>
	<div class="product-price-old">日常价 ¥ 1899</div>
	</div>
	<div class="product-tagline">拆单发货 · 配送进度独立可查</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">365 天只换不修</span>
	</div>
	<button class="product-btn" type="button">查看详情</button>
	</div>
	</div>
	</article>

	<article class="product-card">
	<div class="product-badge">夜间爆款</div>
	<div class="product-discount">满 ¥799 再减 ¥100</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/7130469/pexels-photo-7130469.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="卧室场景中的床头灯与智能闹钟"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">睡眠氛围灯 + 智能闹钟组合</h3>
	<p class="product-sub">渐亮唤醒模式 · 白噪音助眠 · 精准定时，适合早八通勤族。</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 569<span>拼购起</span>
	</div>
	<div class="product-price-old">日常价 ¥ 699</div>
	</div>
	<div class="product-tagline">支持与好友拼单 · 分享更省</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">今日 5 千人已购</span>
	</div>
	<button class="product-btn" type="button">去拼单</button>
	</div>
	</div>
	</article>

	<article class="product-card">
	<div class="product-badge">办公精选</div>
	<div class="product-discount">企业可开增值税专票</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/7014331/pexels-photo-7014331.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="开放式办公环境中的桌椅与电脑设备"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">团队协作空间升级组合</h3>
	<p class="product-sub">
	包含升降桌、人体工学椅与集线管理方案，适合创业团队快速搭建办公环境。
	</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 5999<span>整套配置</span>
	</div>
	<div class="product-price-old">日常价 ¥ 7299</div>
	</div>
	<div class="product-tagline">支持企业采购 · 咨询可定制方案</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">企业专属顾问</span>
	<span class="product-badge-inline">可开发票</span>
	</div>
	<button class="product-btn" type="button">联系顾问</button>
	</div>
	</div>
	</article>

	<article class="product-card">
	<div class="product-badge">轻量好物</div>
	<div class="product-discount">第二件半价</div>
	<div class="product-image-wrap">
	<img
	class="product-image"
	src="https://images.pexels.com/photos/3965540/pexels-photo-3965540.jpeg?auto=compress&cs=tinysrgb&w=1200"
	alt="桌面上的香薰、书本与小摆件"
	/>
	</div>
	<div class="product-body">
	<h3 class="product-title">桌面氛围提升小物集合</h3>
	<p class="product-sub">香薰、桌面收纳与装饰摆件，可按套装或单件购买。</p>
	<div class="product-meta">
	<div>
	<div class="product-price-main">
	¥ 79<span>起</span>
	</div>
	<div class="product-price-old">日常价 ¥ 99</div>
	</div>
	<div class="product-tagline">适合工位小改造 · 小预算大变化</div>
	</div>
	<div class="product-footer">
	<div class="product-badges-inline">
	<span class="product-badge-inline">支持凑单</span>
	<span class="product-badge-inline">7 日价保</span>
	</div>
	<button class="product-btn" type="button">去凑单</button>
	</div>
	</div>
	</article>
	</div>
	</section>

	<footer class="footer">
	<p>
	<span>使用说明：</span>本页为静态电商活动页示例，可直接部署为单独落地页，
	并按需替换商品文案、图片与跳转链接。支持复制链接分享给好友或投放渠道。
	</p>
	</footer>
	</main>

	<div class="floating-bar" id="floatingBar">
	<div class="floating-main">
	<div class="floating-title">年中福利专场 · 叠加三重优惠</div>
	<div class="floating-sub">正在倒计时，活动结束后商品将恢复日常价。</div>
	</div>
	<div class="floating-cta">
	<div class="floating-countdown" id="floatingCountdownText">剩余 --:--:--</div>
	<button class="floating-btn" id="floatingCtaBtn" type="button">一键抢福利</button>
	</div>
	</div>

	<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>

	<script>
	(function () {
	var eventDurationMs = 72 * 60 * 60 * 1000;
	var startAt = Date.now();
	var endAt = startAt + eventDurationMs;
	var cdDays = document.getElementById("cd-days");
	var cdHours = document.getElementById("cd-hours");
	var cdMinutes = document.getElementById("cd-minutes");
	var cdSeconds = document.getElementById("cd-seconds");
	var floatingCountdownText = document.getElementById("floatingCountdownText");
	var countdownTimerId;

	function pad(num) {
	return num < 10 ? "0" + num : String(num);
	}

	function updateCountdown() {
	var now = Date.now();
	var diff = endAt - now;
	if (diff <= 0) {
	cdDays.textContent = "00";
	cdHours.textContent = "00";
	cdMinutes.textContent = "00";
	cdSeconds.textContent = "00";
	if (floatingCountdownText) {
	floatingCountdownText.textContent = "本场活动已结束，下次别错过～";
	}
	if (countdownTimerId) {
	clearInterval(countdownTimerId);
	}
	return;
	}
	var totalSeconds = Math.floor(diff / 1000);
	var days = Math.floor(totalSeconds / (24 * 3600));
	var hours = Math.floor((totalSeconds % (24 * 3600)) / 3600);
	var minutes = Math.floor((totalSeconds % 3600) / 60);
	var seconds = totalSeconds % 60;

	cdDays.textContent = pad(days);
	cdHours.textContent = pad(hours);
	cdMinutes.textContent = pad(minutes);
	cdSeconds.textContent = pad(seconds);

	if (floatingCountdownText) {
	floatingCountdownText.textContent =
	"剩余 " + pad(days) + " 天 " + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
	}
	}

	updateCountdown();
	countdownTimerId = window.setInterval(updateCountdown, 1000);

	var toastEl = document.getElementById("toast");
	var toastTimeoutId;

	function showToast(message) {
	if (!toastEl) return;
	toastEl.textContent = message;
	toastEl.classList.add("visible");
	if (toastTimeoutId) {
	clearTimeout(toastTimeoutId);
	}
	toastTimeoutId = window.setTimeout(function () {
	toastEl.classList.remove("visible");
	}, 2200);
	}

	function copyText(text, successMessage) {
	if (!text) return;
	if (navigator.clipboard && navigator.clipboard.writeText) {
	navigator.clipboard
	.writeText(text)
	.then(function () {
	showToast(successMessage \|\| "已复制到剪贴板");
	})
	.catch(function () {
	showToast("复制失败，请稍后重试");
	});
	} else {
	var ok = window.prompt("当前浏览器不支持一键复制，请手动复制：", text);
	if (ok !== null) {
	showToast(successMessage \|\| "请在支付时粘贴券码使用");
	}
	}
	}

	var shareBtn = document.getElementById("shareBtn");
	if (shareBtn) {
	shareBtn.addEventListener("click", function () {
	var url = window.location.href;
	copyText(url, "活动链接已复制，可直接分享给好友");
	});
	}

	var couponButtons = document.querySelectorAll(".coupon-btn");
	couponButtons.forEach(function (btn) {
	btn.addEventListener("click", function () {
	var code = btn.getAttribute("data-code");
	copyText(code, "券码已复制，支付时输入即可享受优惠");
	});
	});

	function smoothScrollToId(id) {
	var target = document.getElementById(id);
	if (!target) return;
	target.scrollIntoView({ behavior: "smooth", block: "start" });
	}

	var scrollToProductsBtn = document.getElementById("scrollToProductsBtn");
	if (scrollToProductsBtn) {
	scrollToProductsBtn.addEventListener("click", function () {
	smoothScrollToId("products");
	});
	}

	var scrollToCouponBtn = document.getElementById("scrollToCouponBtn");
	if (scrollToCouponBtn) {
	scrollToCouponBtn.addEventListener("click", function () {
	smoothScrollToId("coupon");
	});
	}

	var floatingBar = document.getElementById("floatingBar");
	var floatingCtaBtn = document.getElementById("floatingCtaBtn");
	var lastScrollTop = 0;
	var hasShownFloating = false;

	function onScroll() {
	var st = window.scrollY \|\| window.pageYOffset \|\| document.documentElement.scrollTop \|\| 0;
	if (!floatingBar) return;
	if (st > 320) {
	floatingBar.classList.add("visible");
	hasShownFloating = true;
	} else if (st < 120 && hasShownFloating) {
	floatingBar.classList.remove("visible");
	}
	lastScrollTop = st;
	}

	window.addEventListener("scroll", onScroll, { passive: true });

	if (floatingCtaBtn) {
	floatingCtaBtn.addEventListener("click", function () {
	smoothScrollToId("products");
	});
	}

	var benefitsSection = document.getElementById("benefits");
	var benefitCards = benefitsSection ? benefitsSection.querySelectorAll(".benefit-card") : [];

	function revealAllBenefits() {
	benefitCards.forEach(function (card, idx) {
	window.setTimeout(function () {
	card.classList.add("visible");
	}, idx * 90);
	});
	}

	if ("IntersectionObserver" in window && benefitCards.length) {
	var io = new IntersectionObserver(
	function (entries, observer) {
	entries.forEach(function (entry) {
	if (entry.isIntersecting) {
	revealAllBenefits();
	observer.disconnect();
	}
	});
	},
	{ threshold: 0.25 }
	);
	io.observe(benefitsSection);
	} else {
	revealAllBenefits();
	}
	})();
	</script>
	</body>
	</html>