/* ==========================================================================
   CaptainsBet — landing template.

   Geometry follows the Figma frame "1440w light" (1440x5323): a 1180px column,
   Oswald Bold display headings over Manrope copy.
   ========================================================================== */

.cb-home { overflow-x: clip; }

/* Heading block with the filter switch on the right, bottom-aligned. */
.cb-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	margin-bottom: 39px;
}

.cb-heading { display: flex; flex-direction: column; gap: 16px; max-width: 690px; }
.cb-heading__title { color: var(--cb-ink); overflow-wrap: break-word; hyphens: auto; }

/* --- Hero --------------------------------------------------------------------- */

.cb-hero {
	position: relative;
	isolation: isolate;
	min-height: 807px;
	padding-block: 109px 86px;
	background: var(--cb-dark);
}

.cb-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cb-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* The photo dissolves into the white page below it. */
.cb-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 44%, #FFFFFF 100%);
}

.cb-hero__inner { position: relative; }

.cb-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 660px;
	margin-left: -33px;
}

.cb-hero__copy .cb-kicker { margin-bottom: 8px; }

.cb-hero__title {
	font-family: var(--cb-display);
	font-weight: 700;
	font-size: clamp(44px, 8vw, 112px);
	line-height: .91;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--cb-white);
	text-shadow: 0 2px 24px rgba(3, 31, 39, .12);
}

.cb-hero__text {
	max-width: 482px;
	margin-top: 43px;
	font-size: 18px;
	line-height: 1.55;
	color: #202526;
}

.cb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* Player and ball, cut out and overlapping the row of features below. */
.cb-hero__art {
	position: absolute;
	top: -109px;
	right: -32px;
	z-index: 1;
	width: 746px;
	height: 925px;
	pointer-events: none;
}

.cb-hero__player { position: absolute; top: 0; right: 0; width: 617px; height: 925px; object-fit: cover; }
/* Mirrored so the ball flies away from the racket, trail towards the player. `scale`
   composes with the float animation's transform instead of being overwritten by it. */
.cb-hero__ball { position: absolute; top: 198px; left: 0; width: 373px; height: 248px; object-fit: cover; scale: -1 1; }

@media (prefers-reduced-motion: no-preference) {
	.cb-hero__ball { animation: cb-ball 6s ease-in-out infinite; }
}

@keyframes cb-ball {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-10px, -8px); }
}

/* --- Features row ---------------------------------------------------------------- */

.cb-features { position: relative; z-index: 2; padding-block: 48px 0; }

.cb-features__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 40px;
}

.cb-feature { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cb-feature__copy { min-width: 0; }
.cb-feature__icon { flex: none; width: 64px; height: 64px; }
.cb-feature__copy { display: flex; flex-direction: column; gap: 6px; }
.cb-feature__title { font-size: 13px; line-height: 1.366; font-weight: 700; color: var(--cb-ink); }
.cb-feature__text { font-size: 11px; line-height: 1.366; color: var(--cb-muted); }

/* --- Tiles: the sport and casino grids ---------------------------------------------- */

.cb-tiles { display: grid; }

.cb-tile { position: relative; min-width: 0; }
.cb-tile[hidden] { display: none; }

.cb-tile__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 14px 18px;
	overflow: hidden;
	border-radius: var(--cb-radius);
	background: var(--cb-dark-2);
	color: var(--cb-white);
}

.cb-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* Shade from the lower-left corner so the title always reads. */
.cb-tile__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(210deg, rgba(15, 49, 59, 0) 0%, rgba(15, 49, 59, 1) 87%), rgba(0, 0, 0, .2);
}

a.cb-tile__inner:hover .cb-tile__img { transform: scale(1.05); }
a.cb-tile__inner:hover .cb-arrow { background: var(--cb-accent); color: var(--cb-accent-ink); transform: translateX(3px); }

.cb-tile__num { font-size: 11px; line-height: 1.366; }

.cb-tile__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.cb-tile__copy { display: flex; flex-direction: column; min-width: 0; }
.cb-tile__title { font-size: 25px; line-height: 1.366; font-weight: 700; }
.cb-tile__kicker { margin-bottom: 6px; font-size: 13.3px; line-height: 1.366; color: var(--cb-yellow); }
.cb-tile__text { margin-top: 9px; font-size: 16px; line-height: 1.366; color: #C9D7DA; }

/* Sports: a large tile down the left, two columns of small ones beside it.
   487 / 332 / 332 in the design. */
.cb-tiles--sports {
	grid-template-columns: minmax(0, 487fr) minmax(0, 332fr) minmax(0, 332fr);
	grid-auto-rows: 155px;
	gap: 14px 16px;
}

.cb-tile--featured { grid-row: span 3; }
.cb-tile--featured .cb-tile__inner { padding-bottom: 24px; }
.cb-tile--featured .cb-tile__body { align-items: flex-end; }

.cb-tile--featured .cb-tile__title {
	margin-top: 4px;
	font-family: var(--cb-display);
	font-size: 58px;
	line-height: 1;
	text-transform: uppercase;
}

.cb-tile--featured .cb-tile__copy { max-width: 236px; }

/* Casino: 410 / 410 / 328 columns, 210px rows; a tall tile spans two, a short one is
   a 114px strip. */
.cb-tiles--casino {
	grid-template-columns: minmax(0, 410fr) minmax(0, 410fr) minmax(0, 328fr);
	gap: 14px 16px;
}

.cb-tile--casino .cb-tile__inner {
	justify-content: flex-end;
	min-height: 210px;
	border: 1px solid #284953;
}

.cb-tile--casino .cb-tile__inner::before {
	background: linear-gradient(180deg, rgba(0, 6, 13, 0) 40%, rgba(0, 6, 13, .78) 100%), rgba(0, 0, 0, .2);
}

.cb-tile--tall { grid-row: span 2; }
.cb-tile--short .cb-tile__inner { min-height: 114px; }
.cb-tile--short .cb-tile__inner::before { background: linear-gradient(261deg, rgba(0, 6, 13, 0) 49%, rgba(0, 6, 13, 1) 67%), rgba(0, 0, 0, .2); }
.cb-tile--casino .cb-tile__title { font-size: 26px; }

/* --- Choose your sport ------------------------------------------------------------ */

.cb-sports { padding-block: 139px 87px; }

/* --- Wide banner ------------------------------------------------------------------ */

.cb-banner { position: relative; z-index: 1; margin-bottom: -3px; }
.cb-banner__img { width: 100%; height: auto; min-height: 160px; object-fit: cover; }

/* --- Casino ----------------------------------------------------------------------- */

.cb-casino {
	position: relative;
	isolation: isolate;
	padding-block: 100px 149px;
	background: var(--cb-dark);
	color: var(--cb-white);
}

.cb-casino__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cb-casino__bg img { width: 100%; height: 100%; object-fit: cover; }

/* The grunge photo only shows through a deep teal wash. */
.cb-casino__bg::after { content: ''; position: absolute; inset: 0; background: rgba(3, 31, 39, .9); }

.cb-casino .cb-heading__title { color: var(--cb-white); }
.cb-casino .cb-heading { gap: 6px; }

/* --- Confidence cards ------------------------------------------------------------- */

.cb-trust { padding-block: 93px; }

.cb-trust__grid {
	display: grid;
	grid-template-columns: minmax(0, 407fr) minmax(0, 709fr);
	justify-content: space-between;
	gap: 40px 64px;
	align-items: start;
}

.cb-trust__head { display: flex; flex-direction: column; gap: 30px; }
.cb-trust .cb-heading { gap: 9px; }
.cb-trust .cb-heading__title { font-size: 64px; line-height: .88; }
.cb-trust__text { font-size: 16px; line-height: 1.7; color: var(--cb-muted); }

.cb-trust__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.cb-trust__card {
	min-height: 192px;
	padding: 32px 28px;
	border-radius: var(--cb-radius-lg);
	background: var(--cb-surface);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cb-trust__card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(8, 21, 28, .08); }

.cb-trust__num { display: block; font-size: 12px; line-height: 1.366; font-weight: 800; color: var(--cb-accent); }
.cb-trust__title { margin-top: 33px; font-size: 20px; line-height: 1.366; font-weight: 700; }
.cb-trust__desc { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--cb-muted); }

/* --- Mobile app ------------------------------------------------------------------- */

.cb-app { padding-block: 97px 65px; }

.cb-app__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 285fr) minmax(0, 400fr) minmax(0, 260fr);
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	min-height: 547px;
	padding: 62px 60px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--cb-dark-2);
	color: var(--cb-white);
}

.cb-app__copy { display: flex; flex-direction: column; gap: 30px; align-self: start; }
.cb-app .cb-heading { gap: 6px; }
.cb-app .cb-heading__title { font-size: 72px; line-height: .889; color: var(--cb-white); }
.cb-app__text { font-size: 16px; line-height: 1.7; color: #B6C6CA; }

.cb-app__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.cb-store {
	display: flex;
	align-items: center;
	padding: 2px 10px 2px 2px;
	border: 1px solid #597079;
	border-radius: 9px;
	background: #071317;
	font-size: 16px;
	line-height: 1.366;
	font-weight: 700;
	white-space: nowrap;
	transition: border-color .2s ease, background-color .2s ease;
}

.cb-store:hover { border-color: var(--cb-accent); background: #0B1D23; }
.cb-store__icon { width: 34px; height: 34px; }

.cb-app__phones { position: relative; height: 406px; }
.cb-app__phone { position: absolute; top: -29px; height: 468px; width: auto; object-fit: contain; }
.cb-app__phone--back { left: -33px; }
.cb-app__phone--front { left: 128px; top: -27px; height: 450px; }

@media (prefers-reduced-motion: no-preference) {
	.cb-app__phone--front { animation: cb-float 7s ease-in-out infinite; }
}

@keyframes cb-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

.cb-app__list { align-self: center; }

.cb-app__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 8px 8px;
	border-bottom: 1px solid #23464F;
	font-size: 16px;
	line-height: 1.366;
	color: #C2D2D6;
}

.cb-app__icon { flex: none; width: 32px; height: 32px; }

/* --- FAQ on the landing page -------------------------------------------------------- */

.cb-home .cb-faq--section { padding-block: 65px 128px; }
.cb-home .cb-faq--section .cb-faq__head { display: flex; flex-direction: column; gap: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
	.cb-hero__copy { margin-left: 0; }
	.cb-hero__art { right: -110px; }
}

@media (max-width: 1199px) {
	.cb-hero__art { width: 640px; height: 793px; right: -150px; }
	.cb-hero__player { width: 529px; height: 793px; }
	.cb-hero__ball { width: 320px; height: 213px; top: 170px; }

	.cb-app__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px; }
	.cb-app__phones { grid-row: span 2; order: 2; }
	.cb-app__list { order: 3; align-self: end; }
	.cb-trust .cb-heading__title { font-size: 56px; }
}

@media (max-width: 1023px) {
	.cb-hero { min-height: 0; padding-block: 72px 0; }
	.cb-hero__art { position: relative; top: 0; right: auto; width: 100%; max-width: 520px; height: 560px; margin: -40px 0 0 auto; }
	.cb-hero__player { width: 373px; height: 560px; }
	.cb-hero__ball { width: 240px; height: 160px; top: 110px; }

	.cb-features { padding-top: 24px; }
	.cb-features__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

	.cb-sports { padding-block: 88px 64px; }
	.cb-tiles--sports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cb-tile--featured { grid-column: span 2; grid-row: span 2; }

	.cb-casino { padding-block: 80px 96px; }
	.cb-tiles--casino { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cb-trust { padding-block: 72px; }
	.cb-trust__grid { grid-template-columns: 1fr; }

	.cb-app { padding-block: 64px 40px; }
	.cb-app__card { grid-template-columns: 1fr; min-height: 0; padding: 40px 32px 0; }
	.cb-app__phones { grid-row: auto; order: 3; height: 380px; width: 100%; max-width: 440px; margin-inline: auto; }
	.cb-app__list { order: 2; }
	.cb-app .cb-heading__title { font-size: 56px; }
}

@media (max-width: 767px) {
	.cb-section-head { margin-bottom: 28px; }
	.cb-pills { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

	/* The player moves up behind the copy instead of taking a screen of its own. */
	.cb-hero { padding-block: 48px 64px; }
	.cb-hero__title { text-shadow: 0 2px 18px rgba(3, 31, 39, .28); }
	.cb-hero__text { margin-top: 24px; font-size: 16px; }
	.cb-hero__actions { width: 100%; }
	.cb-hero__actions .cb-btn { flex: 1 1 auto; }
	.cb-hero__art { position: absolute; top: -12px; right: -36px; z-index: 0; width: 290px; height: 435px; max-width: none; margin: 0; }
	/* Legs fade out before they reach the paragraph, so the copy stays readable. */
	.cb-hero__art { -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 72%); mask-image: linear-gradient(180deg, #000 42%, transparent 72%); }
	.cb-hero__player { width: 290px; height: 435px; }
	.cb-hero__ball { width: 150px; height: 100px; top: 150px; left: -40px; }

	.cb-features__list { grid-template-columns: 1fr; }
	.cb-feature__icon { width: 52px; height: 52px; }
	.cb-feature__title { font-size: 15px; }
	.cb-feature__text { font-size: 13px; }

	.cb-sports { padding-block: 64px 48px; }
	.cb-tiles--sports { grid-template-columns: 1fr; grid-auto-rows: 150px; }
	.cb-tile--featured { grid-column: auto; grid-row: span 2; }
	.cb-tile--featured .cb-tile__title { font-size: 44px; }

	.cb-casino { padding-block: 64px 72px; }
	.cb-tiles--casino { grid-template-columns: 1fr; }
	.cb-tile--tall { grid-row: auto; }
	.cb-tile--tall .cb-tile__inner { min-height: 320px; }

	.cb-trust { padding-block: 56px; }
	.cb-trust .cb-heading__title { font-size: 44px; }
	.cb-trust__cards { grid-template-columns: 1fr; }
	.cb-trust__card { min-height: 0; padding: 24px; }
	.cb-trust__title { margin-top: 18px; }

	.cb-app__card { padding: 32px 20px 0; border-radius: 24px; }
	.cb-app .cb-heading__title { font-size: 48px; }
	.cb-app__phones { height: 300px; max-width: 330px; }
	.cb-app__phone { height: 340px; top: 0; }
	.cb-app__phone--back { left: -10px; }
	.cb-app__phone--front { left: 110px; height: 326px; top: 4px; }

	.cb-home .cb-faq--section { padding-block: 48px 72px; }
}