/* hero-toplist block — minimal hero with Scandi-style ornamentation */

@layer components {

	.b0b98f14a {
		position: relative;
		padding-block: clamp(var(--space-5), 3.5vw, var(--space-7)) clamp(var(--space-4), 2.5vw, var(--space-6));
		background-color: var(--color-bg);
		background-image:
			radial-gradient(circle at 1px 1px, rgba(0, 53, 128, 0.08) 1px, transparent 0);
		background-size: 22px 22px;
		background-position: 0 0;
		overflow: hidden;
		isolation: isolate;
	}

	.b0b98f14a::before {
		content: '';
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		block-size: 2px;
		background: linear-gradient(
			to right,
			var(--color-accent) 0,
			var(--color-accent) clamp(80px, 18vw, 200px),
			transparent clamp(80px, 18vw, 200px)
		);
		z-index: 1;
	}

	.b0b98f14a::after {
		content: '';
		position: absolute;
		inset-block-start: clamp(var(--space-4), 5vw, var(--space-6));
		inset-inline-end: clamp(-40px, -3vw, -20px);
		inline-size: clamp(120px, 16vw, 220px);
		block-size: clamp(120px, 16vw, 220px);
		background: radial-gradient(circle, rgba(255, 206, 0, 0.18) 0%, transparent 65%);
		pointer-events: none;
		z-index: 0;
	}

	.ba0417131 {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: clamp(-30px, -1vw, 16px);
		transform: translateY(-50%);
		font-family: var(--font-display);
		font-size: clamp(180px, 26vw, 360px);
		font-weight: var(--fw-black);
		line-height: .85;
		letter-spacing: -.06em;
		color: var(--color-brand);
		opacity: .055;
		pointer-events: none;
		user-select: none;
		z-index: 0;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	@media (max-width: 767px) {
		.ba0417131 {
			inset-block-start: auto;
			inset-block-end: -.15em;
			inset-inline-end: -.2em;
			transform: none;
			font-size: clamp(120px, 38vw, 200px);
			opacity: .045;
		}
	}

	.b215e2bf8 {
		position: relative;
		z-index: 2;
	}

	.bd63d1f15 {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		margin: 0 0 var(--space-3);
		font-size: var(--fs-xs);
		font-weight: var(--fw-semibold);
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}

	.bd63d1f15::before {
		content: '';
		display: inline-block;
		inline-size: 8px;
		block-size: 8px;
		border-radius: var(--radius-full);
		background: var(--color-accent);
		box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.22);
	}

	.b3afeba93 {
		font-size: clamp(28px, 4vw, 44px);
		font-weight: var(--fw-bold);
		line-height: 1.05;
		letter-spacing: var(--tracking-tight);
		text-wrap: balance;
		margin: 0;
		max-inline-size: 22ch;
		color: var(--color-text);
	}

	.b2b24effe {
		position: relative;
		color: var(--color-brand);
		font-style: normal;
		background-image: linear-gradient(
			to top,
			rgba(255, 206, 0, 0.45) 0%,
			rgba(255, 206, 0, 0.45) 28%,
			transparent 28%
		);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% 100%;
		padding-inline: 2px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.b2b24effe {
			background-size: 0% 100%;
			animation: hero-accent-sweep 700ms ease-out 250ms forwards;
		}
	}

	@keyframes hero-accent-sweep {
		to { background-size: 100% 100%; }
	}

	.baf415d0a {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-4);
		list-style: none;
		margin: var(--space-4) 0 0;
		padding: 0;
		font-size: var(--fs-sm);
		font-weight: var(--fw-medium);
		color: var(--color-text-muted);
	}

	.b42536a73 {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3);
		margin: 0;
		padding: 0;
	}

	.b42536a73 + .b42536a73::before {
		content: '';
		display: inline-block;
		inline-size: 4px;
		block-size: 4px;
		border-radius: 50%;
		background: var(--color-border-strong);
	}
}