/* estedad-latin-wght-normal */
@font-face {
  font-family: 'Estedad';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/estedad:vf@5.3.0/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* estedad-arabic-wght-normal */
@font-face {
  font-family: 'Estedad';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/estedad:vf@5.3.0/arabic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

:root {
	--accent-color: #C73A3B;
	--text-on-accent: #F2F2F2;
	--toolbar-color: #4A1618;

	--background-color: #F7F5F2;
	--card-color: #FFFFFF;
	--text-color: #222222;
	--muted-text-color: #6B6B6B;
	--border-color: #E8E6E3;
	--hero-bg: #EFEBE4;

	--font-body: "Estedad", Tahoma, sans-serif;

	--radius-button: 12px;
	--radius-card: 16px;

	--space-section: 80px;
	--space-section-sm: 56px;
	--max-width: 1080px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #14171B;
		--card-color: #202328;
		--text-color: #E7E7E7;
		--muted-text-color: #B1B3B7;
		--border-color: #2A2E33;
		--hero-bg: #1A1E24;
	}
}

:root[data-theme="light"] {
	--background-color: #F7F5F2;
	--card-color: #FFFFFF;
	--text-color: #222222;
	--muted-text-color: #6B6B6B;
	--border-color: #E8E6E3;
	--hero-bg: #EFEBE4;
}

:root[data-theme="dark"] {
	--background-color: #14171B;
	--card-color: #202328;
	--text-color: #E7E7E7;
	--muted-text-color: #B1B3B7;
	--border-color: #2A2E33;
	--hero-bg: #1A1E24;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--background-color);
	color: var(--text-color);
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

h1,
h2,
h3,
h4 {
	font-family: var(--font-body);
	line-height: 1.4;
	margin: 0 0 16px;
	font-weight: 400;
	color: var(--text-color);
}

p {
	margin: 0 0 16px;
	color: var(--text-color);
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.container.narrow {
	max-width: 600px;
	text-align: center;
}

.section {
	padding: var(--space-section) 0;
}

.section.bg-card {
	background: var(--card-color);
}

/* -------------------------------- Buttons -------------------------------- */

.btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: var(--radius-button);
	font-size: 16px;
	font-family: var(--font-body);
	transition: opacity 0.15s ease;
}

.btn:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}

.btn-accent {
	background: var(--accent-color);
	color: var(--text-on-accent);
}

.btn-accent:hover {
	opacity: 0.9;
}

.btn-outline {
	border: 1px solid var(--accent-color);
	color: var(--accent-color);
}

.btn-outline:hover {
	background: var(--accent-color);
	color: var(--text-on-accent);
}

.btn-sm {
	padding: 8px 20px;
	font-size: 14px;
}

.btn-large {
	padding: 18px 42px;
	font-size: 18px;
}

/* -------------------------------- Header -------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--background-color);
	border-bottom: 1px solid var(--border-color);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.logo {
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--text-color);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

.main-nav a:not(.btn) {
	font-size: 15px;
	color: var(--muted-text-color);
}

.main-nav a:not(.btn):hover {
	color: var(--text-color);
}

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: 999px;
	background: var(--card-color);
	color: var(--text-color);
	cursor: pointer;
}

.theme-toggle .icon {
	width: 18px;
	height: 18px;
}

.theme-toggle .icon-sun {
	display: none;
}

.theme-toggle .icon-moon {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun {
		display: block;
	}

	:root:not([data-theme="light"]) .theme-toggle .icon-moon {
		display: none;
	}
}

:root[data-theme="light"] .theme-toggle .icon-sun {
	display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
	display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
	display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}

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

.hero {
	padding: 88px 0 96px;
	background: var(--hero-bg);
	border-bottom: 1px solid var(--border-color);
	overflow: hidden;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.hero h1 {
	font-size: 46px;
	margin-bottom: 18px;
}

.hero-tagline {
	font-size: 19px;
	color: var(--muted-text-color);
	max-width: 40ch;
	margin-bottom: 30px;
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-shots {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 340px;
	aspect-ratio: 3 / 4;
}

.hero-shot {
	position: absolute;
	width: 72%;
	height: auto;
	border-radius: 14px;
	border: 6px dashed var(--card-color);
	outline: 1px solid var(--border-color);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.hero-shot-back {
	top: 4%;
	right: 2%;
	transform: rotate(9deg);
	z-index: 1;
}

.hero-shot-front {
	bottom: 2%;
	left: 4%;
	transform: rotate(-7deg);
	z-index: 2;
}

/* -------------------------------- Plain text sections -------------------------------- */

.section .narrow h2 {
	font-size: 25px;
}

.section .narrow p {
	font-size: 17px;
	color: var(--muted-text-color);
}

.section-title {
	text-align: center;
	font-size: 22px;
	margin-bottom: 40px;
}

/* -------------------------------- Flagship feature -------------------------------- */

.flagship {
	text-align: center;
}

.flagship-head {
	max-width: 620px;
	margin: 0 auto 40px;
}

.flagship-head h2 {
	font-size: 34px;
	margin-bottom: 18px;
}

.flagship-head p {
	font-size: 19px;
	color: var(--muted-text-color);
}

.flagship-image {
	max-width: 360px;
	margin: 0 auto;
}

/* -------------------------------- Medium feature rows --------------------------------*/

.feature-row {
	padding: var(--space-section-sm) 0;
}

.feature-row-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 48px;
	align-items: center;
}

.feature-row.reverse .feature-row-inner {
	direction: ltr;
}

.feature-row.reverse .feature-text,
.feature-row.reverse .feature-image {
	direction: rtl;
}

.feature-text h3 {
	font-size: 22px;
}

.feature-text p {
	font-size: 16px;
	color: var(--muted-text-color);
	max-width: 46ch;
	margin: 0;
}

.feature-image {
	justify-self: center;
	width: 100%;
	max-width: 320px;
}

/* -------------------------------- Mini feature grid -------------------------------- */

.mini-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.mini-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-card);
}

.mini-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--card-color);
	color: var(--accent-color);
}

.mini-icon svg {
	width: 22px;
	height: 22px;
}

.mini-card h4 {
	font-size: 15px;
	margin-bottom: 4px;
}

.mini-card p {
	font-size: 14px;
	color: var(--muted-text-color);
	margin: 0;
	line-height: 1.6;
}

/* -------------------------------- Showcase -------------------------------- */

.showcase-head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 36px;
}

.showcase-head h2 {
	font-size: 25px;
}

.showcase-head p {
	color: var(--muted-text-color);
	font-size: 16px;
}

.showcase-scroll {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	margin: 0 -24px;
	padding-inline: 24px;
}

.showcase-item {
	flex: 0 0 auto;
	width: 190px;
	scroll-snap-align: start;
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* -------------------------------- FAQ -------------------------------- */

.faq-list {
	margin: 0;
}

.faq-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--border-color);
	text-align: right;
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item dt {
	font-size: 17px;
	margin-bottom: 8px;
}

.faq-item dd {
	margin: 0;
	font-size: 15px;
	color: var(--muted-text-color);
}

/* -------------------------------- Community -------------------------------- */

.community-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.community-list li {
	font-size: 16px;
	padding: 14px 18px;
	background: var(--card-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-button);
}

/* -------------------------------- Final CTA -------------------------------- */

.download-meta {
	margin: 20px 0 0;
	font-size: 14px;
	color: var(--muted-text-color);
}

/* -------------------------------- Images -------------------------------- */

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

/* -------------------------------- Footer -------------------------------- */

.site-footer {
	padding: 56px 0 0;
	background: var(--card-color);
}

.footer-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border-color);
	text-align: center;
}

.footer-inner p {
	font-size: 15px;
	color: var(--muted-text-color);
	margin: 0;
}

.footer-inner strong {
	color: var(--text-color);
}

.footer-bottom {
	padding: 20px 24px;
	font-size: 13px;
	color: var(--muted-text-color);
	text-align: center;
}

.footer-bottom a {
	color: var(--accent-color);
}

/* -------------------------------- Responsive --------------------------------*/

@media (max-width: 860px) {
	:root {
		--space-section: 56px;
		--space-section-sm: 40px;
	}

	.hero {
		padding: 56px 0 64px;
	}

	.hero-inner,
	.feature-row-inner {
		grid-template-columns: 1fr;
	}

	.feature-row.reverse .feature-row-inner {
		direction: rtl;
	}

	.hero h1 {
		font-size: 32px;
	}

	.hero-shots {
		max-width: 260px;
		margin: 32px auto 0;
	}

	.hero-shot-front {
		top: 8%;
		bottom: auto;
	}

	.feature-image {
		max-width: 220px;
		margin: 24px auto 0;
	}

	.flagship-head h2 {
		font-size: 26px;
	}

	.flagship-image {
		max-width: 240px;
		margin: 24px auto 0;
	}

	.mini-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.mini-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1100px) {
	.showcase-scroll {
		justify-content: center;
	}
}