@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Manrope:wght@200..800&display=swap');

/* ==========================================================================
   Variables / theming
   ========================================================================== */
:root {
	--font-heading: 'Baloo 2', sans-serif;
	--font-body: 'Manrope', sans-serif;

	--color-accent: #ff5b14;
	--color-ready: #ffe27d;
	--color-white: #ffffff;
	--color-ink: #21160f;
	--color-success: #2bb673;

	--color-header-bg: #1c1b1f;
	--color-header-border: transparent;
	--color-header-text: #ffffff;
	--header-backdrop-filter: none;

	--color-page-bg: #fffdf9;
	--color-surface: #ffffff;
	--color-surface-alt: #fff6ea;
	--color-card-bg: #ffffff;
	--color-text-pale: #9b8e81;
	--color-icon-bg: linear-gradient(135deg, #fff4cc 0%, #ffcf57 100%);

	--color-steps-card-bg: #ffffff;
	--color-steps-card-border: #efe3d3;
	--color-step-number-text: #ffffff;
	--color-advantages-card-bg: #ffffff;
	--color-advantages-card-border: var(--color-border);
	--color-accordion-bg: #ffffff;
	--color-accordion-border: var(--color-testimonial-card-border);
	--color-accordion-icon-bg: transparent;
	--color-accordion-icon-color: var(--color-heading);
	--color-showcase-bg: linear-gradient(135deg, #535353 0%, #151515 100%);
	--color-showcase-media-bg: linear-gradient(270deg, rgba(83, 83, 83, 0) 0%, rgba(21, 21, 21, 0.5) 100%);
	--color-showcase-heading: #ffffff;
	--color-showcase-text: rgba(255, 255, 255, 0.8);
	--color-showcase-overlay: #101920;
	--showcase-overlay-opacity: 0.72;
	--showcase-overlay-blur: blur(6px);
	--color-testimonials-bg: #fff7e9;
	--color-testimonial-card-bg: #ffffff;
	--color-testimonial-card-border: #efe3d3;
	--color-testimonial-card-shadow: none;
	--color-footer-bg: #141f2a;
	--color-logo-bg: #16212b;
	--color-bonus-title: #21160f;

	--color-text-hero: #45372d;
	--color-text-perk: #5d5148;
	--color-heading: #21160f;
	--color-text: #6e6156;
	--color-border: rgba(33, 22, 15, 0.1);

	--hero-gradient: linear-gradient(
		90deg,
		rgba(241, 249, 255, 0.99) 0%,
		rgba(239, 248, 255, 0.9) 25%,
		rgba(239, 248, 255, 0.18) 55%,
		rgba(239, 248, 255, 0) 70%
	);
	--hero-gradient-mobile: linear-gradient(
		180deg,
		rgba(241, 249, 255, 0.35) 0%,
		rgba(241, 249, 255, 0.97) 40%,
		rgba(239, 248, 255, 0.99) 100%
	);

	--shadow-card: 0 20px 40px rgba(33, 22, 15, 0.08);
	--radius-lg: 28px;
	--radius-md: 16px;
	--radius-sm: 10px;
	--container-width: 1200px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-page-bg: #212121;
		--color-surface: #212121;
		--color-surface-alt: #212121;
		--color-card-bg: #2a2a2a;

		--color-steps-card-bg: #242424;
		--color-steps-card-border: transparent;
		--color-step-number-text: #242424;
		--color-advantages-card-bg: #3a3a3a;
		--color-advantages-card-border: #ffffff;
		--color-accordion-bg: #3a3a3a;
		--color-accordion-border: #ffffff;
		--color-accordion-icon-bg: var(--color-accent);
		--color-accordion-icon-color: #ffffff;
		--color-showcase-bg: linear-gradient(135deg, #535353 0%, #151515 100%);
		--color-showcase-media-bg: linear-gradient(270deg, rgba(83, 83, 83, 0) 0%, rgba(21, 21, 21, 0.5) 100%);
		--color-showcase-heading: #ffffff;
		--color-showcase-text: rgba(255, 255, 255, 0.8);
		--color-showcase-overlay: #101920;
		--showcase-overlay-opacity: 0.72;
		--showcase-overlay-blur: blur(6px);
		--color-testimonials-bg: #2f2f2f;
		--color-testimonial-card-bg: #3a3a3a;
		--color-testimonial-card-border: #ff5b14;
		--color-testimonial-card-shadow: 0px 12px 36px 0px rgba(90, 56, 20, 0.08);
		--color-footer-bg: #141f2a;
		--color-logo-bg: transparent;
		--color-bonus-title: #ffffff;

		--color-header-bg: linear-gradient(90deg, rgba(15, 15, 15, 0.9) 0%, rgba(29, 29, 29, 0.9) 100%);
		--color-header-border: #53371e14;
		--header-backdrop-filter: blur(18px);

		--color-text-hero: #fff;
		--color-text-perk: #fff;
		--color-heading: #ffffff;
		--color-text: #cac3bd;
		--color-border: rgba(255, 255, 255, 0.08);

		--hero-gradient: linear-gradient(90deg, #46291c 0%, rgba(16, 16, 16, 0) 70%);
		--hero-gradient-mobile: linear-gradient(90deg, #46291c 0%, rgba(16, 16, 16, 0) 100%);

		--shadow-card: 0 20px 40px rgba(0, 0, 0, 0.35);
	}
}

/* Desktop header is light/cream in light theme only; every other combo keeps the dark bar */
@media (min-width: 1024px) and (prefers-color-scheme: light) {
	:root {
		--color-header-bg: #fffdf9e5;
		--color-header-text: #21160f;
		--color-header-border: #53371e14;
		--header-backdrop-filter: blur(18px);
	}
}

/* Gameplay section is dark on mobile everywhere, but goes light on desktop light theme only */
@media (min-width: 900px) and (prefers-color-scheme: light) {
	:root {
		--color-showcase-bg: linear-gradient(180deg, #fffdf9 0%, #fff8ec 100%);
		--color-showcase-heading: #21160f;
		--color-showcase-text: #6e6156;
		--color-showcase-overlay: #ff5b14;
		--showcase-overlay-opacity: 0.22;
		--showcase-overlay-blur: none;
	}
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	font-family: var(--font-body);
	background-color: var(--color-page-bg);
	color: var(--color-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: 1.15;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.container--p-0 {
	padding: 0;
}

.section-title {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 32px;
}

@media (min-width: 768px) {
	.section-title {
		font-size: 55.2px;
		line-height: 56.86px;
		margin-bottom: 48px;
	}

	.steps__kicker,
	.advantages__kicker,
	.testimonials__kicker,
	.showcase__kicker,
	.screens__kicker,
	.faq__kicker {
		font-size: 12px;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 16px;
	border-radius: 14px;
	white-space: nowrap;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		opacity 0.15s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn--accent {
	background: linear-gradient(180deg, #ff7b20 0%, #ff5b14 100%);
	color: var(--color-white);
	box-shadow: 0px 1px 0px 0px #ffffff4d inset;
	box-shadow: 0px 2px 8px 0px #3131314d;
	box-shadow: 0px -1px 4px 0px #00000040 inset;
}

.btn--dark {
	background: var(--color-ink);
	color: var(--color-white);
}

.btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Gives autoFontSize.js (js/autoFontSize.js, CTA_BUTTON family) headroom to
   shrink down to its 16px floor when a label is too long to fit — the base
   .btn font-size is already 16px, so without this the label starts exactly
   at the floor and there's nothing left to shrink. */
.bottom__section-button [data-txt] {
	font-size: 18px;
}

/* Marks a button as a real shrink-to-fit container for autoFontSize.js's
   FIT_INLINE family (js/autoFontSize.js, .social-widget selector) — that
   family measures actual overflow (scrollWidth vs clientWidth), so it needs
   nowrap to make overflow possible instead of the text just wrapping.
   This is the family that actually reacts to label length here: the
   CTA_BUTTON family above compares against 70% of the *viewport* width,
   which a small corner button never gets close to. */
.social-widget {
	white-space: nowrap;
	overflow: hidden;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-header-bg);
	border-bottom: 1px solid var(--color-header-border);
	backdrop-filter: var(--header-backdrop-filter);
	-webkit-backdrop-filter: var(--header-backdrop-filter);
	color: var(--color-header-text);
}

#how-to-play,
#advantages,
#reviews,
#screenshots,
#faq {
	scroll-margin-top: 100px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 15px;
}

.site-header__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 50px;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--color-logo-bg);
	transition: background 0.2s ease;
}

.site-header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-nav {
	display: none;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
}

.site-nav__link {
	font-size: 13.8px;
	font-weight: 700;
	color: var(--color-header-text);
	opacity: 0.85;
	transition:
		opacity 0.15s ease,
		color 0.3s ease;
}

.site-nav__link:hover {
	color: var(--color-accent);
	opacity: 1;
}

.site-header__actions {
	display: flex;
	align-items: center;
	width: 175px;
	height: 60px;
	gap: 14px;
}

.site-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	font-size: 16px;
}

.burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 55px;
	height: 30px;
}

.burger__line {
	display: block;
	height: 6px;
	width: 100%;
	background: var(--color-header-text);
	border-radius: 5px;
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.burger[aria-expanded='true'] .burger__line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__line:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded='true'] .burger__line:nth-child(3) {
	transform: translateY(-14px) rotate(-45deg);
}

.site-nav.is-open {
	display: block;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--color-header-bg);
	padding: 12px 20px 20px;
}

.site-nav.is-open .site-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

@media (min-width: 1024px) {
	.site-header__inner {
		padding-block: 20px;
	}

	.site-nav {
		display: block;
	}

	.site-header__actions {
		width: 120px;
		height: 40px;
	}

	.burger {
		display: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	min-height: 320px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hero-gradient);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url('../img/bg-hero.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100 top;
}

.hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767px) {
	.hero__media {
		background-image: url('../img/bg-hero-mob.jpg');
		background-position: 100% top;
	}

	.hero__image {
		object-position: 15% center;
	}

	.hero::before {
		background: var(--hero-gradient-mobile);
	}
}

.hero__container {
	position: relative;
	padding: 80px 20px 20px 20px;
}

.hero__content {
	max-width: 620px;
}

.hero__logo {
	width: min(100%, 165px);
	margin-bottom: 10px;
}

.hero__subtitle {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	line-height: 26px;
	color: var(--color-heading);
	margin-bottom: 10px;
}

.hero__text {
	font-size: 8px;
	line-height: 1.3;
	color: var(--color-text-hero);
	margin-bottom: 10px;
	max-width: 250px;
}

.hero__stores {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.hero__store-link {
	width: 80px;
	height: 25px;
}

.hero__store-link img {
	border-radius: 8px;
}

.hero__play {
	display: none;
	font-size: 16px;
}

.hero__perks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.hero__perk {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-hero);
}

@media (min-width: 768px) {
	.hero {
		min-height: 640px;
	}

	.hero__logo {
		width: min(100%, 495px);
	}

	.hero__subtitle {
		font-weight: 800;
		font-size: 40.8px;
		line-height: 1.3;
	}

	.hero__text {
		max-width: 500px;
		font-size: 16px;
	}

	.hero__store-link {
		width: 185px;
		height: 60px;
	}

	.hero__play {
		display: inline-flex;
		width: 140px;
		height: 60px;
		margin-left: 60px;
	}
}

/* ==========================================================================
   Bonus banner
   ========================================================================== */
.bonus-banner {
	padding-block: 12px;
}

.bonus-banner__card {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 150px;
	padding: 18px 10px 18px 175px;
	background-image: url('../img/bg-banner-mob-1.jpg');
	background-size: cover;
	background-repeat: no-repeat, no-repeat;
	background-position:
		left center,
		left center;
	box-shadow: var(--shadow-card);
}

.bonus-banner__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 380px;
}

.bonus-banner__kicker {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.bonus-banner__title {
	font-size: 18px;
	color: var(--color-bonus-title);
	max-width: 320px;
}

.bonus-banner__text {
	font-size: 10px;
	color: #664413;
	max-width: 340px;
	margin-bottom: 6px;
}

.bonus-banner__btn {
	width: 170px;
	height: 50px;
	font-size: 16px;
}

@media (min-width: 700px) {
	.bonus-banner {
		padding-block: 15px;
	}

	.bonus-banner__card {
		min-height: 260px;
		padding: 40px;
		border-radius: var(--radius-lg);
		background-image: url('../img/bg-banner-desk-1.jpg');
	}

	.bonus-banner__content {
		margin-left: 45%;
	}

	.bonus-banner__kicker {
		font-size: 12px;
	}

	.bonus-banner__title {
		font-size: 50px;
	}

	.bonus-banner__text {
		font-size: 16px;
	}
}

/* ==========================================================================
   Steps / How to Play
   ========================================================================== */
.steps {
	padding-block: 12px;
	background: var(--color-surface);
}

.steps__kicker {
	text-align: center;
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.steps__subtitle {
	text-align: center;
	max-width: 480px;
	margin: -16px auto 32px;
	font-size: 15px;
}

.steps__list {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
	justify-content: center;
}

.steps__arrow {
	display: none;
}

.steps__item {
	position: relative;
	flex: 0 1 320px;
	background: var(--color-steps-card-bg);
	border: 1px solid var(--color-steps-card-border);
	border-radius: 22px;
	padding: 20px 15px;
	text-align: center;
	box-shadow: 0px 12px 32px 0px #4b2d1414;
}

.steps__number {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: var(--color-accent);
	color: var(--color-step-number-text);
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.steps__icon {
	margin: 0 auto 14px;
}

.steps__label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.steps__text {
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.steps__list {
		flex-wrap: nowrap;
		gap: 0;
	}

	.steps__arrow {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		padding: 0 12px;
	}

	.steps__item {
		flex: 1 1 0;
		padding: 32px 20px;
	}

	.steps__label {
		font-size: 21.6px;
		line-height: 1.3;
	}
}

/* ==========================================================================
   Showcase (gameplay preview)
   ========================================================================== */
.showcase {
	background: var(--color-showcase-bg);
}

.showcase__grid {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.showcase__media {
	position: relative;
	flex: none;
	height: 350px;
	overflow: hidden;
}

.showcase__media:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: var(--color-showcase-media-bg);
	box-shadow: var(--shadow-card);
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.showcase__media.is-playing:before {
	opacity: 0;
}

.showcase__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.showcase__hit-area {
	position: absolute;
	inset: 0;
	bottom: 44px;
	cursor: pointer;
}

.showcase__media.is-playing .showcase__hit-area {
	/* While playing, let taps reach the <video> directly so the native
	   controls (faded out after a couple of seconds) can reappear on tap. */
	pointer-events: none;
}

.showcase__overlay {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: var(--color-showcase-overlay);
	backdrop-filter: var(--showcase-overlay-blur);
	-webkit-backdrop-filter: var(--showcase-overlay-blur);
	opacity: var(--showcase-overlay-opacity);
	pointer-events: none;
}

.showcase__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	/* box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); */
	transition:
		opacity 0.15s ease,
		visibility 0.15s ease;
}

.showcase__cta {
	display: none;
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-size: 13px;
	padding: 7px 16px;
	transition:
		opacity 0.15s ease,
		visibility 0.15s ease;
}

.showcase__play.is-hidden,
.showcase__cta.is-hidden,
.showcase__content.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.showcase__content {
	position: absolute;
	left: 20px;
	top: 10px;
	z-index: 1;
	width: 80%;
}

.showcase__kicker {
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.showcase__title {
	text-align: left;
	margin-bottom: 20px;
	font-size: 18px;
	color: var(--color-showcase-heading);
}

.showcase__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 5px;
}

.showcase__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-showcase-text);
}

.showcase__item svg {
	flex-shrink: 0;
}

.showcase__text {
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-showcase-text);
	max-width: 420px;
	margin-bottom: 24px;
}

.showcase__more {
	width: 180px;
	height: 40px;
	border-radius: 18px;
	font-size: 16px;
}

@media (min-width: 900px) {
	.showcase__cta {
		display: inline-flex;
	}

	.showcase__media:before {
		z-index: 0;
	}

	.showcase__play {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.showcase__content.is-hidden {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.showcase__grid {
		flex-direction: row;
		align-items: center;
	}

	.showcase__media,
	.showcase__content {
		position: relative;
		flex: 0 1 565px;
		height: 420px;
		border-radius: 28px;
	}

	.showcase__content {
		position: static;
		left: 0;
		top: 0;
		width: 100%;
	}

	.showcase__title {
		font-size: 40px;
	}

	.showcase__item {
		font-size: 15px;
	}
}

/* ==========================================================================
   Advantages / Why Play
   ========================================================================== */
.advantages {
	padding-block: 12px;
	background: var(--color-surface);
}

.advantages__kicker {
	text-align: center;
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.advantages__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.advantages__item {
	flex: 0 1 320px;
	background: var(--color-advantages-card-bg);
	border: 1px solid var(--color-advantages-card-border);
	border-radius: 22px;
	padding: 30px 24px;
	text-align: center;
}

.advantages__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 14px;
	border-radius: 24px;
	background: var(--color-icon-bg);
}

.advantages__icon {
	width: 64px;
	height: 64px;
}

.advantages__label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
}

.advantages__text {
	font-size: 12px;
	line-height: 1.3;
	color: var(--color-text);
}

@media (min-width: 768px) {
	.advantages__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.advantages__item {
		display: flex;
		flex-direction: column;
		flex: 1 1 0;
		padding: 32px 20px;
	}

	.advantages__label {
		font-size: 21.6px;
		line-height: 1.3;
	}
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials {
	padding-block: 12px;
	background: var(--color-testimonials-bg);
}

.testimonials__kicker {
	text-align: center;
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.testimonials__subtitle {
	text-align: center;
	max-width: 460px;
	margin: -16px auto 32px;
	font-size: 15px;
}

.testimonials__slider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.testimonials__swiper {
	width: 100%;
	max-width: 1080px;
	flex: 1;
	min-width: 0;
	padding-bottom: 36px;
}

.testimonial-card {
	width: min(100%, 290px);
	margin: 0 auto;
	background: var(--color-testimonial-card-bg);
	border: 1px solid var(--color-testimonial-card-border);
	border-radius: 26px;
	padding: 20px;
	box-shadow: var(--color-testimonial-card-shadow);
}

.testimonial-card__avatar {
	margin: 0 0 14px;
	border-radius: 50%;
}

.testimonial-card__body {
	min-width: 0;
}

.testimonial-card__stars {
	color: #ffb020;
	letter-spacing: 3px;
	margin-bottom: 16px;
	font-size: 17px;
}

.testimonial-card__quote {
	font-size: 14px;
	line-height: 1.3;
	color: var(--color-heading);
	margin-bottom: 18px;
}

.testimonial-card__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-heading);
}

.testimonial-card__role {
	font-size: 9px;
	color: var(--color-text-pale);
	opacity: 1;
}

@media (min-width: 700px) {
	.testimonials__arrow {
		position: absolute;
	}

	.testimonials__arrow--prev {
		left: -20px;
	}

	.testimonials__arrow--next {
		right: -20px;
	}

	.testimonial-card {
		display: flex;
		align-items: center;
		gap: 28px;
		width: 100%;
		min-height: 220px;
		padding: 38px 72px;
		border-radius: 26px;
		text-align: left;
	}

	.testimonial-card__avatar {
		flex-shrink: 0;
		width: 72px;
		height: 72px;
		margin: 0;
	}
}

.testimonials__arrow {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 0.15s ease,
		opacity 0.15s ease;
}

.testimonials__arrow img {
	filter: brightness(0) invert(1);
}

.testimonials__arrow:hover {
	transform: scale(1.06);
}

.testimonials__arrow--prev img {
	transform: rotate(180deg);
}

.testimonials__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.testimonials__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--color-border);
	opacity: 1;
	transition:
		width 0.2s ease,
		background 0.2s ease;
}

.testimonials__pagination .swiper-pagination-bullet-active {
	width: 22px;
	background: var(--color-accent);
}

/* ==========================================================================
   Screenshots
   ========================================================================== */
.screens {
	padding-block: 12px;
	background: var(--color-page-bg);
}

.screens__kicker {
	text-align: center;
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.screens__slider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.screens__swiper {
	width: 100%;
	overflow: hidden;
	padding-block: 16px;
}

.screens__swiper .swiper-slide.screens__slide {
	position: relative;
	z-index: 1;
	border-radius: 20px;
	overflow: hidden;
	width: 260px;
	opacity: 0.7;
	transform: scale(0.82);
	transition:
		transform 0.3s ease,
		opacity 0.3s ease,
		height 0.3s ease;
	box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.4);
}

.screens__swiper .swiper-slide-active.screens__slide {
	z-index: 2;
	opacity: 1;
	transform: scale(1.05);
	box-shadow: 0px 0px 26px 4px #00000080;
}

@media (min-width: 1024px) {
	.screens__swiper .swiper-slide.screens__slide {
		width: 410px;
		height: 270px;
		border-radius: 12px;
		overflow: hidden;
		transition:
			transform 0.4s ease,
			opacity 0.4s ease;
	}

	.screens__swiper .swiper-slide-active.screens__slide {
		transform: none;
	}
}

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

.screens__arrow {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.screens__arrow img {
	filter: brightness(0) invert(1);
}

.screens__arrow:hover {
	transform: scale(1.06);
}

.screens__arrow--prev img {
	transform: rotate(180deg);
}

@media (min-width: 1024px) {
	.screens__slider {
		position: relative;
	}

	.screens__swiper {
		max-width: 1100px;
		margin-inline: auto;
	}

	.screens__arrow {
		position: absolute;
		top: 50%;
		z-index: 3;
		transform: translateY(-50%);
	}

	.screens__arrow--prev {
		left: -20px;
	}

	.screens__arrow--next {
		right: -20px;
	}

	.screens__arrow:hover {
		transform: scale(1.06) translateY(-50%);
	}
}

/* ==========================================================================
   FAQ / Accordion
   ========================================================================== */
.faq {
	padding-block: 12px;
	background: var(--color-surface);
}

.faq__kicker {
	text-align: center;
	color: var(--color-accent);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 1.44px;
	margin-bottom: 8px;
}

.faq__title {
	margin-bottom: 12px;
}

.faq__subtitle {
	text-align: center;
	max-width: 460px;
	margin: 0 auto 32px;
	font-size: 15px;
}

.faq__accordion {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.accordion__item {
	background: var(--color-accordion-bg);
	border: 1px solid var(--color-accordion-border);
	border-radius: 16px;
	overflow: hidden;
}

@media (prefers-color-scheme: dark) {
	.accordion__item.is-open {
		border-color: var(--color-accent);
	}
}

.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	text-align: left;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-heading);
}

.accordion__icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accordion-icon-color);
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		color 0.2s ease;
}

.accordion__icon svg {
	display: block;
}

.accordion__item.is-open .accordion__icon {
	transform: rotate(180deg);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}

.accordion__panel > p {
	overflow: hidden;
	padding: 0 20px;
	font-size: 14px;
}

.accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__item.is-open .accordion__panel > p {
	padding-bottom: 18px;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.cta__card {
	position: relative;
	isolation: isolate;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
	min-height: 180px;
	display: flex;
	align-items: center;
	background: url('../img/bg-banner-mob-2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left top;
	box-shadow: var(--shadow-card);
}

@media (min-width: 767px) {
	.cta__card {
		background: url('../img/bg-banner-desk-2.jpg');
	}
}

.cta__content {
	width: 100%;
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}

.cta__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
}

.cta__logo {
	width: 190px;
	height: 140px;
	object-fit: contain;
}

.cta__kicker {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ready);
	margin-bottom: 6px;
}

.cta__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-white);
}

.cta__subtitle {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 8px;
	max-width: 320px;
}

.cta__stores {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.cta__store-link {
	display: block;
	width: 118px;
}

.cta__store-link img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (min-width: 768px) {
	.cta__content {
		padding: 35px 10px 35px 30%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.cta__top {
		order: 1;
		width: auto;
	}

	.cta__logo {
		display: none;
	}

	.cta__stores {
		align-self: center;
		flex-direction: row;
	}

	.cta__store-link {
		width: auto;
	}

	.cta__store-link img {
		width: auto;
	}

	.cta__title {
		font-size: 30px;
	}
}

/* Gap between sections: 12px mobile, 36px desktop (each side contributes half so adjacent sections sum to the target) */
@media (min-width: 768px) {
	.steps,
	.showcase,
	.advantages,
	.testimonials,
	.screens,
	.faq {
		padding-block: 15px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-white);
	padding-block: 35px;
}

.site-footer__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.site-footer__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--color-logo-bg);
}

.site-footer__logo img {
	height: 28px;
	width: auto;
	object-fit: contain;
}

.site-footer__nav {
	display: none;
	grid-template-columns: repeat(2, auto);
	gap: 14px 24px;
}

.site-footer__link {
	font-size: 14px;
	opacity: 0.8;
	transition:
		opacity 0.15s ease,
		color 0.3s ease;
}

.site-footer__link:hover {
	color: var(--color-accent);
	opacity: 1;
}

.site-footer__badge {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	opacity: 0.85;
}

.site-footer__bottom {
	padding-top: 20px;
}

.site-footer__copy {
	font-size: 9px;
	opacity: 0.6;
}

@media (min-width: 768px) {
	.site-footer__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.site-footer__nav {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 20px;
	}
}

/* ==========================================================================
   Install CTAs (platform)
   Every "get the app" control carries .js-install and is bound by the
   platform's /install-flow.js (api/serve/router.py). They are <button>, not
   <a href="#">, because install-flow does not preventDefault — a link would
   jump the page to the top before the install prompt could open. The base
   `button` reset above already strips the UA chrome; only `appearance` is
   left, for iOS Safari's own button styling.
   ========================================================================== */
.js-install {
	appearance: none;
	-webkit-appearance: none;
}

/* install-flow.js adds .is--disabled while the install is in flight (the label
   reads "Installing..."). Clicks are already ignored in that state — the
   handler returns early — so this is purely the dimmed affordance. */
.js-install.is--disabled {
	opacity: 0.6;
	cursor: default;
}

.js-install.is--disabled:hover {
	transform: none;
}

/* ==========================================================================
   Arabic
   Keyed on html[lang='ar'], which js/content.js sets from the resolved
   language. Scoped to this template: .hero__subtitle exists nowhere else under
   landings/, and every template ships its own style.css, so nothing here can
   reach chickenroad or any other landing.

   THIS IS NOT A LENGTH PROBLEM, and the numbers matter because the obvious fix
   would have been the wrong one. Measured at the authored 20px in a 350px
   mobile container, the Arabic string is the NARROWEST of the three languages
   this template ships - 245px against English 317px and French 425px - and it
   is the shortest by character count too (26 vs 36 vs 50).

   What actually breaks is ALIGNMENT. /text-direction.js sets `direction: rtl`
   on the [data-txt] leaves, and with no author `text-align` the initial value
   `start` then resolves to RIGHT for this element only - while the surrounding
   column (logo, buttons, perks) stays physically left in an LTR layout. The
   hero artwork sits on the right at every breakpoint
   (.hero__media background-position: 100% top / 100% top on mobile), so the
   subtitle alone jumps across onto the busiest part of the image, where the
   readable gradient wash has already faded out.

   `end` rather than `left`: under direction:rtl it resolves to the left edge,
   so the block rejoins the column it belongs to while still meaning "the side
   the line ends on" instead of hardcoding a physical side.
   ========================================================================== */
html[lang='ar'] .hero__subtitle {
	text-align: end;

	/* Neither Baloo 2 (--font-heading, this element) nor Manrope (--font-body)
	   ships an Arabic subset - verified against Google's own served CSS: 4 and 6
	   subsets respectively, no U+0600-06FF block in either. So every Arabic glyph
	   on this page comes from a system fallback whose ascenders, descenders and
	   diacritics are taller than the 26px line box this was authored for at 20px.
	   1.7 gives them room rather than letting successive lines collide. */
	line-height: 1.7;

	/* A guard, not a fix: with the block back on the left, a single line clears
	   the artwork on its own. This only matters once a longer Arabic translation
	   wraps and a full line would otherwise run edge to edge into the image. */
	max-inline-size: 78%;
}