/* Pelk Site — base: tokens, fonts, reset, buttons, the floating nav and its menu sheet (phones). */

@font-face { font-family: "IRANYekanXFaNum"; src: url("../fonts/IRANYekanXFaNum-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../fonts/IRANYekanXFaNum-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../fonts/IRANYekanXFaNum-DemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../fonts/IRANYekanXFaNum-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IRANYekanXFaNum"; src: url("../fonts/IRANYekanXFaNum-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
	/* Colour (Figma: ink, muted, subtle; Pelk brand/600 and brand/700). */
	--ink: #15131f;
	--ink-2: #1c1a2b;
	--muted: #6b6675;
	--subtle: #a39dae;
	--coral: #ff6b4a;
	--coral-mid: #f2583a;
	--coral-deep: #c8401f;
	--sand: #f4f1ef;
	--sand-line: #e8e2de;
	--white: #fff;
	--line: rgba(21, 19, 31, 0.08);

	--font: "IRANYekanXFaNum", Tahoma, sans-serif;
	--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Layout: 1200px of content inside 120px margins on the 1440 design; 20px margins on phones. */
	--content: 1200px;
	--gutter: clamp(24px, calc((100vw - var(--content)) / 2), 120px);
	--container: min(var(--content), calc(100vw - 2 * var(--gutter)));

	--nav-top: 28px;
	--nav-height: 64px;
	--admin-bar: 0px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--nav-top: 12px;
		--nav-height: 56px;
	}
}

.admin-bar { --admin-bar: 32px; }
@media (max-width: 782px) { .admin-bar { --admin-bar: 46px; } }

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-top) + var(--nav-height) + var(--admin-bar) + 16px);
}

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
code { font-family: var(--mono); }

.icon { width: 1em; height: 1em; flex: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: fixed;
	z-index: 100;
	top: 8px;
	right: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--white);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible {
	outline: 2px solid var(--coral);
	outline-offset: 3px;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #2a2738; }

.btn--light {
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px rgba(21, 19, 31, 0.12);
}
.btn--light:hover { box-shadow: inset 0 0 0 1px rgba(21, 19, 31, 0.24); }

.btn--lg { font-size: 17px; }
.btn--lg .icon { width: 20px; height: 20px; }

/* The coral play disc in «دمو را امتحان کن» / «دموی زنده را ببین». */
.btn__play {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--coral);
	color: var(--white);
}
.btn__play .icon { width: 14px; height: 14px; }

/* Header: the floating nav ------------------------------------------------------------------------------------ */

.site-header {
	position: fixed;
	z-index: 50;
	top: calc(var(--nav-top) + var(--admin-bar));
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding-inline: var(--gutter);
	pointer-events: none;
}

.nav {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--container);
	height: var(--nav-height);
	padding-inline: 26px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 8px 24px rgba(21, 19, 31, 0.05);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	pointer-events: auto;
}

.nav__brand { display: block; color: var(--ink-2); }
.nav__brand .logo { width: 77px; height: 34px; }

.nav__links {
	position: absolute;
	left: 50%;
	display: flex;
	gap: 40px;
	transform: translateX(-50%);
}
.nav__links a {
	color: var(--muted);
	font-size: 15px;
	font-weight: 500;
	transition: color 0.2s;
}
.nav__links a:hover { color: var(--ink); }

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

.btn--nav {
	height: 44px;
	padding-inline: 22px 18px;
	font-size: 15px;
}
.btn--nav .icon { width: 18px; height: 18px; }

.nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(21, 19, 31, 0.05);
	color: var(--ink);
	cursor: pointer;
}
.nav__toggle .icon { width: 20px; height: 20px; }

@media (max-width: 767px) {
	.nav { padding-inline: 16px 6px; }
	.nav__links { display: none; }
	.nav__toggle { display: inline-flex; }
	.btn--nav { height: 42px; padding-inline: 18px 16px; }
}

/* Menu sheet (phones) ------------------------------------------------------------------------------------------ */

.menu {
	position: fixed;
	z-index: 60;
	inset: 0;
}
.menu[hidden] { display: none; }

.menu__scrim {
	position: absolute;
	inset: 0;
	background: rgba(21, 19, 31, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.menu__sheet {
	position: absolute;
	top: calc(10px + var(--admin-bar));
	left: 10px;
	right: 10px;
	max-height: calc(100dvh - 20px - var(--admin-bar));
	overflow-y: auto;
	padding: 2px 16px 18px;
	border-radius: 30px;
	background: var(--white);
	box-shadow: 0 24px 60px rgba(21, 19, 31, 0.22);
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}

.menu.is-open .menu__scrim,
.menu.is-open .menu__sheet { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.menu__sheet { transform: none; }
}

.menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
}
.menu__top .nav__toggle { display: inline-flex; }

.menu__links { padding-top: 14px; }
.menu__links li + li a { border-top: 1px solid var(--line); }
.menu__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 82px;
	padding: 16px 4px 16px 6px;
}
.menu__links .icon { width: 20px; height: 20px; color: rgba(21, 19, 31, 0.4); }

.menu__text { display: flex; flex-direction: column; gap: 2px; }
.menu__title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	font-size: 24px;
	font-weight: 900;
	line-height: 1.3;
}
.menu__line { color: var(--subtle); font-size: 13px; font-weight: 500; line-height: 1.3; }

.chip-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px 4px 8px;
	border-radius: 999px;
	background: rgba(255, 107, 74, 0.1);
	color: var(--coral);
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 13px;
}
.chip-live__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

.btn--block {
	width: 100%;
	height: 56px;
	margin-top: 14px;
	font-size: 17px;
}
.btn--block .icon { width: 18px; height: 18px; }

.menu__version {
	margin-top: 14px;
	color: var(--subtle);
	font-family: var(--mono);
	font-size: 11px;
	text-align: center;
}

html.is-menu-open { overflow: hidden; }

/* Shared helpers ----------------------------------------------------------------------------------------------- */

.for-phone { display: none; }
@media (max-width: 767px) {
	.for-desktop { display: none; }
	.for-phone { display: inline; }
}

/* Plain pages (index.php). */
.page { width: var(--container); margin: 0 auto; padding: 140px 0 80px; }
.page__title { margin-bottom: 24px; font-size: 32px; font-weight: 900; }

/* A landing section's frame (Figma «Backdrop»): the two vertical rules at the content's edges, the full height,
   continuing the hero's; a horizontal rule at the top with crosses where the rules meet, and mono labels under it. */

.sec {
	position: relative;
	overflow-x: clip; /* The rules run edge to edge; clip, not hidden, so sticky things still stick. */
}
.sec::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: calc(var(--container) + 1px);
	border-inline: 1px solid var(--line);
	transform: translateX(-50%);
	pointer-events: none;
}

.sec__top {
	position: relative;
	width: var(--container);
	margin: 0 auto;
	pointer-events: none;
}
.sec__top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 1px;
	background: var(--line);
	transform: translateX(-50%);
}

.sec__cross {
	position: absolute;
	top: -7px;
	width: 15px;
	height: 15px;
	background:
		linear-gradient(rgba(21, 19, 31, 0.35), rgba(21, 19, 31, 0.35)) center / 1px 100% no-repeat,
		linear-gradient(rgba(21, 19, 31, 0.35), rgba(21, 19, 31, 0.35)) center / 100% 1px no-repeat;
}
.sec__cross--s { left: -7px; }
.sec__cross--e { right: -8px; }

.sec__mono {
	position: absolute;
	top: 14px;
	color: rgba(21, 19, 31, 0.4);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 14px;
	direction: ltr;
	white-space: nowrap;
}
.sec__mono--left { left: 16px; }
.sec__mono--right { right: 16px; }

@media (max-width: 767px) {
	.sec__mono { top: 10px; font-size: 10px; line-height: 13px; }
	.sec__mono--left { left: 8px; }
	.sec__mono--right { right: 8px; }
}

/* A card's words (Figma «Landing / Feature text»): latin tag, title, body. */

.ftext {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 26px;
}

.ftext__tag {
	color: var(--coral-deep);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 16px;
	text-align: right;
}

.ftext__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.ftext__body {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.75;
}

/* A hint (Figma «Landing / Hint»): a dark bubble with a coral dot and a caret, its tip at the point it explains.
   The hero's live demo and the dashboard's screenshots place them. */

.hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
}
.hint--above { transform: translate(-50%, -100%); }

.hint__bubble {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 9px 14px;
	border-radius: 999px;
	background: var(--ink);
	box-shadow: 0 8px 20px rgba(21, 19, 31, 0.25);
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	line-height: 17px;
	white-space: nowrap;
}
.hint__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

.hint::before,
.hint::after { width: 14px; height: 7px; background: var(--ink); }
.hint--above::after { content: ""; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.hint--below::before { content: ""; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* Short claims with an icon each (Figma: motion's three points, the dashboard's three benefits): a centred row,
   on phones one under the other at the right. */

.points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 44px;
}

.points__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 21px;
}

.points__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(21, 19, 31, 0.08);
	border-radius: 12px;
	background: var(--white);
	color: var(--coral);
}
.points__icon .icon { width: 18px; height: 18px; }

@media (max-width: 767px) {
	.points { flex-direction: column; align-items: flex-start; } /* RTL: the right edge. */
	.points__item { font-size: 15px; line-height: 20px; }
}