/*
 * NGL v2 — tokens, fonts and shared components (buttons, headings, carousel arrows, reveal motion).
 *
 * Values come from the Figma export in design/home-new (1440px frame, 1200px container). Sizes are
 * fluid with clamp() so the desktop numbers are exact at 1440px and scale down from there.
 * Everything is written with logical properties (inline-start/-end) so RTL (fa, ar) and LTR (en)
 * both lay out correctly from the same rules; the few mirrored graphics are handled explicitly.
 */

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/JetBrainsMono-Regular-latin.woff2") format("woff2");
}

/* Only the quotation marks of IBM Plex Sans Bold (subset to 1 KB), for the big news quote mark. */
@font-face {
	font-family: "NGL Quote";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/IBMPlexSans-Bold-quotes.woff2") format("woff2");
	unicode-range: U+0022, U+201C-201D;
}

:root {
	--nglv2-green: #81c91d;          /* ColorPallet/Secondary/secondary-shade500 */
	--nglv2-green-dark: #6aa617;     /* secondary-shade600 — hover */
	--nglv2-green-50: #f4fce9;       /* secondary-shade50 — light hover backgrounds */
	--nglv2-accent: #6dbe45;         /* second green the design uses for highlights (not in the palette) */
	--nglv2-accent-dark: #5aa635;
	--nglv2-accent-30: rgba(109, 190, 69, 0.3);
	--nglv2-navy: #192431;           /* tertiary-shade600 */
	--nglv2-navy-2: #1e293b;         /* tertiary-shade500 */
	--nglv2-ink: #192431;
	--nglv2-grey: #7f7f7f;           /* quaternary-shade600 */
	--nglv2-bg: #f7fcfe;             /* BG/bg4 */
	--nglv2-light: #e8ecf0;
	--nglv2-font: IRANSansX, Tahoma, Arial, sans-serif;
	--nglv2-font-cta: Vazirmatn, IRANSansX, Tahoma, sans-serif;
	--nglv2-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--nglv2-container: 1200px;
	--nglv2-pad: clamp(16px, 4vw, 24px);
	--nglv2-gap: clamp(88px, 11.11vw, 160px);      /* space between sections (160 at 1440) */
	--nglv2-gap-sm: clamp(48px, 5.56vw, 80px);     /* after the hero / before the footer (80) */
	--nglv2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--nglv2-ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out-cubic — matches the measured maaden curve */
	--nglv2-header-h: 90px;
	--nglv2-dir: 1;                  /* 1 in RTL, -1 in LTR: flips horizontal offsets/shadows */
}

html:not([dir="rtl"]) {
	--nglv2-dir: -1;
}

@media (max-width: 1199px) {
	:root {
		--nglv2-header-h: 72px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Scope reset — Betheme and the child theme style bare elements (h2, p, ul, button, input…); the
 * redesign's markup starts from a clean slate inside its own roots.
 * ------------------------------------------------------------------------------------------- */

.nglv2,
.nglv2-header,
.nglv2-drawer,
.nglv2-footer {
	font-family: var(--nglv2-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.nglv2 *,
.nglv2 *::before,
.nglv2 *::after,
.nglv2-header *,
.nglv2-header *::before,
.nglv2-header *::after,
.nglv2-drawer *,
.nglv2-drawer *::before,
.nglv2-drawer *::after,
.nglv2-footer *,
.nglv2-footer *::before,
.nglv2-footer *::after {
	box-sizing: border-box;
}

/* :where() keeps these resets at one-class specificity, so every component rule below (also one
 * class, loaded later) wins, while they still beat Betheme's bare element selectors. */
.nglv2 :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, figcaption),
.nglv2-header :where(h1, h2, h3, p, ul, ol),
.nglv2-drawer :where(h1, h2, h3, p, ul, ol),
.nglv2-footer :where(h1, h2, h3, p, ul, ol) {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.nglv2 :where(ul, ol),
.nglv2-header :where(ul, ol),
.nglv2-drawer :where(ul, ol),
.nglv2-footer :where(ul, ol) {
	list-style: none;
}

.nglv2 :where(ul, ol) > :where(li),
.nglv2-header :where(ul, ol) > :where(li),
.nglv2-drawer :where(ul, ol) > :where(li),
.nglv2-footer :where(ul, ol) > :where(li) {
	margin: 0;
	padding: 0;
}

.nglv2 :where(ul, ol) > :where(li)::before,
.nglv2-footer :where(ul, ol) > :where(li)::before {
	content: none;
}

.nglv2 :where(img),
.nglv2-header :where(img),
.nglv2-drawer :where(img),
.nglv2-footer :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.nglv2 :where(a),
.nglv2-header :where(a),
.nglv2-drawer :where(a),
.nglv2-footer :where(a) {
	text-decoration: none;
}

/*
 * Betheme underlines every link on hover (be.css `a:hover`, specificity 0,1,1), which beats the reset
 * above (0,1,0); the design never underlines on hover. `:hover` lifts this to 0,2,0: just enough to win
 * over Betheme while a component can still ask for a line (e.g. `.nglv2 .nglv2-cert__warn a`).
 */
.nglv2 :where(a):hover,
.nglv2-header :where(a):hover,
.nglv2-drawer :where(a):hover,
.nglv2-footer :where(a):hover {
	text-decoration: none;
}

.nglv2 :where(svg),
.nglv2-header :where(svg),
.nglv2-drawer :where(svg),
.nglv2-footer :where(svg) {
	display: block;
	flex-shrink: 0;
}

/* The child theme turns on IRANSansX "ss01" site-wide (Persian-shaped digits). That suits Persian
 * content, but English/Arabic pages need plain digits; where the design wants Persian digits
 * (the IRANSansXFaNum parts) the markup already uses Persian/Arabic code points. */
html:not([lang|="fa"]) :is(.nglv2, .nglv2-header, .nglv2-drawer, .nglv2-footer),
html:not([lang|="fa"]) :is(.nglv2, .nglv2-header, .nglv2-drawer, .nglv2-footer) * {
	font-feature-settings: normal; /* style.css sets ss01 on almost every element, not just body */
}

.nglv2-home {
	display: block;
	background: var(--nglv2-bg);
	color: var(--nglv2-ink);
	overflow-x: clip;
	padding-bottom: var(--nglv2-gap-sm);
	outline: none;
}

.nglv2 .screen-reader-text,
.nglv2-header .screen-reader-text,
.nglv2-drawer .screen-reader-text,
.nglv2-footer .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------------------------------------
 * Layout helpers
 * ------------------------------------------------------------------------------------------- */

.nglv2-container {
	width: min(var(--nglv2-container), 100% - 2 * var(--nglv2-pad));
	margin-inline: auto;
}

.nglv2-section {
	margin-top: var(--nglv2-gap);
}

.nglv2-hero + .nglv2-section,
.nglv2-hero + .nglv2-band {
	margin-top: var(--nglv2-gap-sm);
}

.nglv2-block {
	display: block;
}

.nglv2-center {
	display: flex;
	justify-content: center;
}

.nglv2-accent {
	color: var(--nglv2-accent);
}

.nglv2-accent--brand {
	color: var(--nglv2-green);
}

/* The design's vertical "quote bar" beside intro paragraphs. */
.nglv2 .nglv2-quote-bar,
.nglv2-footer .nglv2-quote-bar {
	border-inline-start: 2px solid var(--nglv2-accent-30);
	padding-inline-start: 24px;
}

/* Icons drawn for RTL (arrow-left = "forward") point the other way in LTR languages. */
html:not([dir="rtl"]) .nglv2-flip-ltr {
	transform: scaleX(-1);
}

/* ----------------------------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------------------------- */

.nglv2 .nglv2-h2 {
	font-family: var(--nglv2-font);
	font-weight: 800;
	font-size: clamp(28px, calc(16px + 2.222vw), 48px);
	line-height: 1.333;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-h2--light {
	color: #f7fcfe;
}

.nglv2 .nglv2-lead {
	font-weight: 400;
	font-size: clamp(18px, calc(8px + 1.667vw), 32px);
	line-height: 1.25;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-lead--loose {
	line-height: 1.5;
}

.nglv2 .nglv2-lead--sm {
	font-size: clamp(16px, calc(10px + 0.833vw), 24px);
	line-height: 1.233;
}

.nglv2-center-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nglv2-swoosh {
	width: min(479px, 80%);
	height: auto;
	margin-top: -8px;
	color: rgba(109, 190, 69, 0.35);
}

/* ----------------------------------------------------------------------------------------------
 * Buttons & links
 * ------------------------------------------------------------------------------------------- */

/* Betheme's rtl.css makes every button left-to-right. The redesign's buttons follow the page: on
   fa/ar an FAQ question starts at the right edge with its chevron at the left, and "Back to top"
   has its arrow at the left, as drawn. */
.nglv2 button,
.nglv2-header button,
.nglv2-drawer button,
.nglv2-footer button {
	direction: inherit;
}

.nglv2 .nglv2-btn,
.nglv2-footer .nglv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 16px;
	font-family: var(--nglv2-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--nglv2-ease), box-shadow 0.3s;
}

.nglv2 .nglv2-btn:focus-visible,
.nglv2 .nglv2-link-arrow:focus-visible,
.nglv2 .nglv2-nav-btn:focus-visible,
.nglv2-header :is(a, button):focus-visible,
.nglv2-drawer :is(a, button):focus-visible,
.nglv2-footer :is(a, button, input):focus-visible,
.nglv2 .nglv2-diff__panel:focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 3px;
}

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

.nglv2 .nglv2-btn--hero {
	width: 270px;
	height: 68px;
	border-radius: 20px;
	background: var(--nglv2-green);
	color: var(--nglv2-navy-2);
}

.nglv2 .nglv2-btn--hero:hover {
	background: var(--nglv2-green-dark);
	color: var(--nglv2-navy-2);
	box-shadow: 0 12px 28px rgba(129, 201, 29, 0.28);
}

.nglv2 .nglv2-btn--glass {
	width: 270px;
	height: 68px;
	border-radius: 20px;
	border-color: #999;
	color: #fff;
	background: linear-gradient(100.04deg, rgba(109, 127, 165, 0.36) 3.2%, rgba(42, 48, 63, 0.36) 99.67%);
	-webkit-backdrop-filter: blur(4.95px);
	backdrop-filter: blur(4.95px);
}

.nglv2 .nglv2-btn--glass:hover {
	border-color: #fff;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
}

.nglv2 .nglv2-btn--outline {
	height: 64px;
	border-color: var(--nglv2-green);
	background: transparent;
	color: var(--nglv2-green);
	font-weight: 700;
}

.nglv2 .nglv2-btn--outline:hover {
	border-color: var(--nglv2-green-dark);
	background: var(--nglv2-green-50);
	color: var(--nglv2-green-dark);
}

.nglv2 .nglv2-btn--wide {
	width: 240px;
	font-weight: 600;
}

.nglv2 .nglv2-btn--icon .nglv2-icon {
	width: 30px;
	height: 30px;
}

.nglv2 .nglv2-btn--accent {
	background: var(--nglv2-accent);
	color: #f7fcfe;
	font-weight: 700;
}

.nglv2 .nglv2-btn--accent:hover {
	background: var(--nglv2-accent-dark);
	color: #fff;
	box-shadow: 0 12px 28px rgba(109, 190, 69, 0.3);
}

.nglv2 .nglv2-btn--sm {
	width: 260px;
	height: 52px;
	font-size: 18px;
	font-weight: 500;
}

.nglv2 .nglv2-btn--lg {
	width: 320px;
	height: 72px;
}

.nglv2 .nglv2-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--nglv2-green);
	white-space: nowrap;
	transition: color 0.25s;
}

.nglv2 .nglv2-link-arrow:hover {
	color: var(--nglv2-green-dark);
}

.nglv2 .nglv2-link-arrow .nglv2-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.35s var(--nglv2-ease);
}

.nglv2 .nglv2-link-arrow--lg {
	font-size: 20px;
}

.nglv2 .nglv2-link-arrow--lg .nglv2-icon {
	width: 32px;
	height: 32px;
}

/* Arrow slides "forward" on hover: left in RTL, right in LTR (the icon is flipped there). */
.nglv2 .nglv2-link-arrow:hover .nglv2-icon {
	transform: translateX(-6px);
}

html:not([dir="rtl"]) .nglv2 .nglv2-link-arrow:hover .nglv2-icon {
	transform: scaleX(-1) translateX(-6px);
}

/* Carousel arrows (Figma: 42px, 2px green border, 8.864px radius). */
.nglv2-carousel-nav {
	display: flex;
	gap: 20px;
}

.nglv2-carousel-nav[hidden] {
	display: none;
}

.nglv2-carousel-nav--end {
	justify-content: flex-end;
}

.nglv2 .nglv2-nav-btn {
	display: grid;
	place-items: center;
	width: 42.5px;
	height: 42.5px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--nglv2-accent);
	border-radius: 8.864px;
	background: transparent;
	color: var(--nglv2-accent);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}

.nglv2 .nglv2-nav-btn .nglv2-icon {
	width: 21.27px;
	height: 21.27px;
}

.nglv2 .nglv2-nav-btn:hover {
	background: var(--nglv2-accent);
	color: #fff;
}

.nglv2 .nglv2-nav-btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	background: transparent;
	color: var(--nglv2-accent);
}

/* The chevron points right: "next" goes left in RTL, "previous" goes left in LTR. */
html[dir="rtl"] .nglv2 .nglv2-nav-btn--next .nglv2-icon,
html:not([dir="rtl"]) .nglv2 .nglv2-nav-btn--prev .nglv2-icon {
	transform: scaleX(-1);
}

.nglv2 .nglv2-carousel-nav--light .nglv2-nav-btn {
	border-color: #fff;
	color: #fff;
}

.nglv2 .nglv2-carousel-nav--light .nglv2-nav-btn:hover {
	background: #fff;
	color: var(--nglv2-navy);
}

.nglv2-carousel-nav--vertical {
	flex-direction: column;
}

html .nglv2 .nglv2-carousel-nav--vertical .nglv2-nav-btn--prev .nglv2-icon {
	transform: rotate(-90deg);
}

html .nglv2 .nglv2-carousel-nav--vertical .nglv2-nav-btn--next .nglv2-icon {
	transform: rotate(90deg);
}

/* ----------------------------------------------------------------------------------------------
 * Reveal on scroll — only once JS has flagged the page (see ngl_v2_js_flag), so content never stays
 * hidden without it.
 * ------------------------------------------------------------------------------------------- */

.nglv2-js [data-nglv2-reveal] {
	opacity: 0;
	transform: translate3d(0, 48px, 0);
	transition: opacity 0.9s var(--nglv2-ease-out), transform 0.9s var(--nglv2-ease-out);
	transition-delay: var(--nglv2-delay, 0s);
}

.nglv2-js [data-nglv2-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Section-title underline draws itself when its title is revealed. */
.nglv2-js .nglv2-swoosh path {
	stroke-dasharray: 560;
	stroke-dashoffset: 560;
	transition: stroke-dashoffset 1.4s var(--nglv2-ease-out) 0.35s;
}

.nglv2-js .is-in .nglv2-swoosh path {
	stroke-dashoffset: 0;
}

/* Editors only: sections showing the design's placeholder content until real content exists. */
.nglv2 .nglv2-is-preview {
	position: relative;
	outline: 2px dashed rgba(255, 170, 0, 0.85);
	outline-offset: 16px;
}

.nglv2 .nglv2-is-preview::before {
	content: attr(data-nglv2-preview-label);
	position: absolute;
	z-index: 5;
	inset-block-start: -44px;
	inset-inline-start: max(var(--nglv2-pad), calc(50% - 600px));
	padding: 4px 12px;
	border-radius: 6px;
	background: #ffaa00;
	color: var(--nglv2-navy-2);
	font: 600 12px/1.6 var(--nglv2-font);
}

@media (prefers-reduced-motion: reduce) {
	.nglv2-js [data-nglv2-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nglv2-js .nglv2-swoosh path {
		stroke-dashoffset: 0;
		transition: none;
	}
}