/* Harakabet — home page (new design, new.pen). Layout-only rules for this page's sections.
   Shared "informational block" styles (.rich-text / .seo-text / .table-scroll / .faq*) live in main.css and are untouched here. */

.home-harakabet {
	--hb-border-gradient: linear-gradient(180deg, #ff7a60 0%, #fd4b27 100%);
	--hb-gold-text: linear-gradient(135deg, #8c421d 0%, #fbe67b 25%, #fcfbe7 54%, #f7d14e 87%, #d4a041 100%);
	--hb-gold-pill: linear-gradient(135deg, #f7d14e 0%, #fbe67b 40%, #d4a041 100%);
	padding: 24px 0 0;
	overflow: hidden;
}

.text-gradient-gold {
	background: var(--hb-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 12px 40px;
	border-radius: 4px;
	background: var(--gradient-cta);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Hero ---------- */
.hb-hero { padding: 0 0 24px; }

.hb-hero__card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 2px solid transparent;
	background:
		linear-gradient(160deg, rgba(15, 12, 12, .78) 0%, rgba(60, 22, 12, .6) 100%) padding-box,
		var(--hb-border-gradient) border-box;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: 48px 64px;
}

.hb-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hb-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.hb-hero__content {
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hb-hero__heading {
	font-family: var(--font-heading);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-transform: uppercase;
}

.hb-hero__description {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
	max-width: 380px;
}

.hb-hero__sports {
	display: flex;
	align-items: center;
	margin-top: 8px;
}

.hb-hero__sports img {
	max-height: 30px;
	width: auto;
}

.hb-hero__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	top: -24px;
	z-index: 1;
	height: calc(100% + 24px);
	width: auto;
	max-width: 46%;
	pointer-events: none;
}

.hb-hero__photo img {
	height: 100%;
	width: auto;
	object-fit: contain;
	object-position: bottom;
}

/* ---------- Table of contents ---------- */
.hb-toc { padding: 0 0 24px; }

.hb-toc__card {
	border-radius: 16px;
	border: 2px solid transparent;
	background:
		linear-gradient(#141414, #141414) padding-box,
		var(--hb-border-gradient) border-box;
	padding: 28px 32px;
}

.hb-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.hb-toc__title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 16px;
}

.hb-toc__toggle { display: none; }

.hb-toc__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 40px;
}

.hb-toc__list li { list-style: none; }

.hb-toc__list a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	color: rgba(255, 255, 255, .85);
	font-family: var(--font-heading);
	font-size: 15px;
	text-decoration: none;
	transition: color .15s ease;
}

.hb-toc__list a::before {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hb-border-gradient);
}

.hb-toc__list a:hover { color: #f7d14e; }

.hb-toc__level-3 { padding-left: 20px; }
.hb-toc__level-3 a { font-size: 14px; color: rgba(255, 255, 255, .65); }

@media (max-width: 640px) {
	.hb-toc__list { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
	.hb-toc__card { padding: 20px 24px; }

	.hb-toc__head { cursor: pointer; }

	.hb-toc__title { margin-bottom: 0; }

	.hb-toc__toggle {
		display: block;
		flex: none;
		width: 24px;
		height: 18px;
		position: relative;
	}

	.hb-toc__burger,
	.hb-toc__burger::before,
	.hb-toc__burger::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		transition: transform .2s ease, opacity .2s ease;
	}

	.hb-toc__burger { top: 8px; }
	.hb-toc__burger::before { top: -8px; }
	.hb-toc__burger::after { top: 8px; }

	.hb-toc__card.is-open .hb-toc__burger { background: transparent; }
	.hb-toc__card.is-open .hb-toc__burger::before { transform: translateY(8px) rotate(45deg); }
	.hb-toc__card.is-open .hb-toc__burger::after { transform: translateY(-8px) rotate(-45deg); }

	.hb-toc__list {
		max-height: 0;
		overflow: hidden;
		margin-top: 0;
		transition: max-height .3s ease, margin-top .3s ease;
	}

	.hb-toc__card.is-open .hb-toc__list {
		max-height: 800px;
		margin-top: 16px;
	}
}

/* ---------- Steps ---------- */
.hb-steps { padding: 0 0 24px; }

.hb-steps__bar {
	display: flex;
	gap: 20px;
	padding: 20px;
	border-radius: 60px;
	background: #0e0e0e;
	border: 2px solid transparent;
	background:
		linear-gradient(#0e0e0e, #0e0e0e) padding-box,
		var(--hb-border-gradient) border-box;
}

.hb-steps__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 108px;
	padding: 12px 13px;
	border-radius: 60px;
	background: var(--hb-gold-pill);
}

.hb-steps__num {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #212426;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: 800;
}

.hb-steps__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hb-steps__text strong {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: #18191a;
	text-transform: uppercase;
}

.hb-steps__text span {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 500;
	color: #18191a;
	text-transform: uppercase;
}

/* ---------- Badges / stadium ---------- */
.hb-badges {
	position: relative;
	padding: 64px 0;
	overflow: hidden;
}

.hb-badges__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hb-badges__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-badges__stage {
	position: relative;
	z-index: 1;
	aspect-ratio: 1440 / 780;
	max-width: 1100px;
	margin: 0 auto;
}

.hb-badges__center {
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	width: clamp(140px, 22vw, 320px);
}

.hb-badge {
	position: absolute;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2px;
	background: var(--hb-border-gradient);
}

.hb-badge span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(12, 12, 12, .85);
	color: #f7d14e;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	padding: 0 12px;
}

.hb-badge--0, .hb-badge--3 { width: clamp(110px, 15vw, 217px); height: clamp(110px, 15vw, 217px); }
.hb-badge--1 { width: clamp(90px, 11vw, 158px); height: clamp(90px, 11vw, 158px); }
.hb-badge--2 { width: clamp(95px, 12vw, 170px); height: clamp(95px, 12vw, 170px); }

.hb-badge--0 { left: 13%; top: 56%; }
.hb-badge--1 { left: 33%; top: 21%; }
.hb-badge--2 { left: 68%; top: 15%; }
.hb-badge--3 { left: 87%; top: 49%; }

/* ---------- Sportsbook ---------- */
.hb-sportsbook { padding: 24px 0; }

.hb-sportsbook__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.hb-sportsbook__head h2 {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

.hb-arrows {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hb-arrow {
	width: 28px;
	height: 28px;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--hb-border-gradient);
	color: #fff;
}

.hb-arrow svg { width: 10px; height: 18px; }
.hb-arrow--next svg { transform: scaleX(-1); }

.hb-sportsbook__row { overflow: hidden; }
.hb-sportsbook__row .swiper-wrapper { align-items: stretch; }

.hb-card {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 387 / 391;
	border: 2px solid transparent;
	background:
		linear-gradient(#1a1a1a, #1a1a1a) padding-box,
		var(--hb-border-gradient) border-box;
}

/* Plain variant — finished game covers with the title already baked into the artwork, no overlay bar needed. */
.hb-card--plain { aspect-ratio: 1 / 1; }

.hb-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Two-class selector needed to beat swiper-bundle.css's same-specificity `.swiper-slide{width:100%}` (loaded after this file). */
.hb-sportsbook__row .hb-card { width: 387px; }

.hb-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-card__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	background: rgba(255, 255, 255, .3);
	backdrop-filter: blur(6px);
}

.hb-card__icon {
	flex: none;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px solid #fff;
	color: #fff;
}

.hb-card__icon svg { width: 20px; height: 20px; }

.hb-card__label {
	flex: 1;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Reviews ---------- */
.hb-reviews { padding: 24px 0; }

.hb-reviews__title {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	margin-bottom: 24px;
}

.swiper-testimonials { padding-bottom: 48px; }
.swiper-testimonials .swiper-wrapper { align-items: stretch; }

.hb-review {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	border-radius: 16px;
	border: 2px solid transparent;
	background:
		linear-gradient(160deg, #1c1c1c 0%, #241209 100%) padding-box,
		var(--hb-border-gradient) border-box;
}

.hb-review__stars {
	display: flex;
	gap: 3px;
	font-size: 16px;
	line-height: 1;
	color: rgba(255, 255, 255, .25);
}

.hb-review__stars .is-filled { color: #f7d14e; }

.hb-review__text {
	flex: 1;
	font-family: var(--font-heading);
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

.hb-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hb-review__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hb-border-gradient);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
}

.hb-review__avatar img { width: 100%; height: 100%; object-fit: cover; }

.hb-review__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hb-review__author-info strong {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

.hb-review__author-info span {
	font-family: var(--font-heading);
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

.swiper-testimonials .swiper-pagination {
	bottom: 0;
}

.swiper-testimonials .swiper-pagination-bullet {
	background: rgba(255, 255, 255, .3);
	opacity: 1;
}

.swiper-testimonials .swiper-pagination-bullet-active {
	background: var(--hb-border-gradient);
}

/* ---------- CTA ---------- */
.hb-cta { padding: 24px 0 40px; }

.hb-cta__card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 2px solid transparent;
	background:
		linear-gradient(160deg, rgba(15, 12, 12, .78) 0%, rgba(60, 22, 12, .6) 100%) padding-box,
		var(--hb-border-gradient) border-box;
	display: flex;
	align-items: center;
	min-height: 340px;
	padding: 48px 64px;
}

.hb-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hb-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.hb-cta__content {
	position: relative;
	z-index: 2;
	max-width: 480px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hb-cta__logo {
	height: 24px;
	width: fit-content;
	object-fit: contain;
}

.hb-cta__heading {
	font-family: var(--font-heading);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.hb-cta__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 1;
	height: 100%;
	width: auto;
	max-width: 48%;
	pointer-events: none;
}

.hb-cta__photo img {
	height: 100%;
	width: auto;
	object-fit: contain;
	object-position: bottom right;
}

/* ---------- FAQ (kept as-is — informational block; title sits on the dark page background, cards stay white) ---------- */
.faq { padding: 40px 0 80px; }

.faq__title {
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 24px;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq__item {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	overflow: hidden;
}

.faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	color: var(--color-heading);
	text-align: left;
	cursor: pointer;
}

.faq__icon {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--color-green);
	transition: transform .2s ease;
}

.faq__item.is-open .faq__icon { transform: rotate(45deg); }

.faq__answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 24px;
	transition: max-height .3s ease, padding .3s ease;
}

.faq__item.is-open .faq__answer {
	max-height: 800px;
	padding: 0 24px 24px;
}

.faq__answer .rich-text { font-size: 15px; }

.swiper-slide { height: auto !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.hb-hero__card,
	.hb-cta__card {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 20px;
		min-height: 0;
	}

	.hb-hero__content,
	.hb-cta__content { max-width: none; width: 100%; }

	.hb-hero__heading { font-size: 26px; }
	.hb-cta__heading { font-size: 26px; }

	.hb-hero__sports { flex-wrap: wrap; row-gap: 10px; }

	.hb-hero__photo,
	.hb-cta__photo {
		position: relative;
		top: auto;
		bottom: auto;
		right: auto;
		height: auto;
		max-width: 70%;
		margin: 24px auto -32px;
	}

	.hb-cta__photo { max-width: 80%; }

	.hb-steps__bar {
		flex-direction: column;
		border-radius: 24px;
		gap: 12px;
		padding: 12px;
	}

	.hb-steps__item { border-radius: 24px; }

	.hb-badges { padding: 40px 0; }
	.hb-badges__stage { aspect-ratio: 1 / 1.05; max-width: 420px; }

	.hb-badge--0, .hb-badge--1, .hb-badge--2, .hb-badge--3 {
		width: clamp(90px, 26vw, 140px);
		height: clamp(90px, 26vw, 140px);
	}

	.hb-badge span { font-size: 11px; padding: 0 8px; }

	.hb-sportsbook__row .hb-card { width: 240px; }

	.hb-card__label { font-size: 13px; }
}