/*
 * NGL v2 — Home v2 sections (Figma "Landing Page" 149:7269), top to bottom.
 * Desktop values match the 1440px frame; breakpoints: ≤1199 laptop/tablet, ≤1023 tablet, ≤767 phone.
 */

/* ==============================================================================================
 * Hero (149:7273) — V-cut bottom, blurred rotated photo, maaden-style load animation.
 * ============================================================================================ */

.nglv2-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(640px, 67.5vw, 972px);
	/* Padding centres the content 65.5px above the middle, as in Figma, and keeps it clear of the header and the V. */
	padding: calc(var(--nglv2-header-h) + 24px) var(--nglv2-pad) calc(var(--nglv2-header-h) + 24px + 131px);
	overflow: hidden;
	background: #262d3d;
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.nglv2-hero__media {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
}

/* The optional background video shares the photo's box and settling zoom, but not its blur (below). */
.nglv2 .nglv2-hero__img,
.nglv2 .nglv2-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: blur(5.45px);
	transform: scale(1.06);
	transition: transform 2.4s var(--nglv2-ease-out);
}

.nglv2-js .nglv2-hero .nglv2-hero__img,
.nglv2-js .nglv2-hero .nglv2-hero__video {
	transform: scale(1.16);
}

.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__img,
.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__video {
	transform: scale(1.06);
}

/*
 * Over the image (its poster) and invisible until it actually plays, so it never flashes black.
 *
 * No blur: Figma's hero is a blurred photo, and the video inherited that treatment until the owner
 * said on 2026-10-06 that the background looked low quality next to ngllab.com, which plays the same
 * file sharp (a Slider Revolution slide background, same dark overlay, no filter). The photo under it
 * keeps the design's blur.
 */
.nglv2 .nglv2-hero__video {
	filter: none;
	opacity: 0;
	transition: transform 2.4s var(--nglv2-ease-out), opacity 0.8s ease-out;
}

.nglv2 .nglv2-hero__video.is-playing {
	opacity: 1;
}

.nglv2-hero__overlay {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: rgba(38, 45, 61, 0.57);
}

.nglv2-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: min(768px, 100%);
	text-align: center;
}

.nglv2 .nglv2-hero__badge {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	max-width: 100%;
	padding: 12px 24px;
	border: 1px solid #7f7f7f;
	border-radius: 62px;
	background: #7f7f7f;
	font-weight: 600;
	font-size: clamp(13px, calc(8px + 0.694vw), 18px);
	line-height: 1.4;
	color: #fff;
}

.nglv2-hero__sep {
	color: #6aa617;
}

.nglv2-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #6aa617;
}

.nglv2 .nglv2-hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 7px clamp(0px, 6vw, 86px);
	font-weight: 800;
	line-height: normal;
	color: #fff;
}

.nglv2-hero__line1 {
	display: block;
	margin-bottom: -8px;
	font-size: clamp(40px, calc(8px + 5vw), 80px);
	color: var(--nglv2-green);
}

.nglv2-hero__line2 {
	display: block;
	font-size: clamp(30px, calc(6px + 3.75vw), 60px);
}

.nglv2 .nglv2-hero__text {
	font-weight: 700;
	font-size: clamp(16px, calc(10px + 0.694vw), 20px);
	line-height: 1.5;
	color: #fff;
}

/* English/Arabic headlines run longer than the Persian design copy. */
html:not([lang|="fa"]) .nglv2-hero__content {
	width: min(980px, 100%);
}

html:not([lang|="fa"]) .nglv2 .nglv2-hero__title {
	padding-inline: 0;
}

html:not([lang|="fa"]) .nglv2-hero__line1 {
	font-size: clamp(36px, calc(8px + 4.2vw), 70px);
}

html:not([lang|="fa"]) .nglv2-hero__line2 {
	font-size: clamp(28px, calc(6px + 3.2vw), 54px);
}

.nglv2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

/* Load sequence (maaden.com): rise 100px + fade, ease-out-cubic ~0.9s, staggered; buttons only fade. */
.nglv2-js .nglv2-hero__anim {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition: opacity 0.9s var(--nglv2-ease-out), transform 0.9s var(--nglv2-ease-out);
	transition-delay: var(--nglv2-delay, 0s);
}

.nglv2-js .nglv2-hero__anim--fade {
	transform: none;
	transition-duration: 1s;
}

.nglv2-js .nglv2-hero.is-loaded .nglv2-hero__anim {
	opacity: 1;
	transform: none;
}

/* ==============================================================================================
 * Services (149:7322) — adportsgroup.com-style: scroll-linked heading, parallax photos, hover zoom.
 * ============================================================================================ */

.nglv2-services__head {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 64px;
	will-change: opacity, transform;
}

.nglv2-services__title {
	max-width: 945px;
}

.nglv2-services__head .nglv2-lead {
	max-width: 897px;
}

.nglv2-services__grid {
	display: flex;
	align-items: stretch;
	gap: 21px;
}

/* The English design (370:11433) is not a mirror of the Persian one: the big laboratories card and the
   test-directory box stay at the right, the two small cards at the left, so the row runs the other way
   in LTR. The same is true of the accordion below and of the two bands (see data.php). Both stack below
   768, where there is no row to reverse. */
@media (min-width: 768px) {
	html:not([dir="rtl"]) .nglv2-services__grid,
	html:not([dir="rtl"]) .nglv2-diff__stage {
		flex-direction: row-reverse;
	}
}

.nglv2-services__col {
	display: flex;
	flex: 568 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.nglv2-services__col--main {
	flex: 611 1 0;
	gap: 64px;
}

.nglv2 .nglv2-scard {
	position: relative;
	isolation: isolate;
	display: block;
	height: 360px;
	overflow: hidden;
	border-radius: 2px;
	background: #1a1f28;
	color: #e8ecf0;
}

.nglv2 .nglv2-scard--lg {
	height: 520px;
}

.nglv2-scard__media {
	position: absolute;
	z-index: -3;
	inset: 0;
	overflow: hidden;
	background: #0f172b;
	transform: scale(var(--nglv2-zoom, 1));
	transition: transform 0.9s var(--nglv2-ease);
}

.nglv2 .nglv2-scard__img {
	position: absolute;
	inset: -9% 0;
	width: 100%;
	height: 118%;
	max-width: none;
	object-fit: cover;
	transform: translate3d(0, var(--nglv2-parallax, 0%), 0);
	will-change: transform;
}

.nglv2 .nglv2-scard:hover,
.nglv2 .nglv2-scard:focus-visible {
	--nglv2-zoom: 1.07;
}

.nglv2-scard__shade {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: linear-gradient(to top, #0a0d12 0%, rgba(10, 13, 18, 0.44) 60%, rgba(10, 13, 18, 0.08) 100%);
	transition: opacity 0.6s;
}

.nglv2-scard__bar {
	position: absolute;
	z-index: -1;
	top: 0;
	inset-inline: 0;
	height: 4px;
	background: rgba(109, 190, 69, 0.35);
}

.nglv2-scard__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--nglv2-green);
	transform: scaleX(0);
	transform-origin: var(--nglv2-bar-origin, right);
	transition: transform 0.6s var(--nglv2-ease);
}

html:not([dir="rtl"]) .nglv2-scard__bar::after {
	--nglv2-bar-origin: left;
}

.nglv2 .nglv2-scard:hover .nglv2-scard__bar::after {
	transform: scaleX(1);
}

.nglv2-scard__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px;
}

.nglv2-scard__title {
	font-weight: 700;
	font-size: clamp(21px, calc(9px + 1.21vw), 26.4px);
	line-height: 1.375;
	color: #e8ecf0;
}

.nglv2-scard__text {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.43;
	color: rgba(232, 236, 240, 0.72);
}

.nglv2-scard__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-top: 20px;
	font-weight: 700;
	font-size: 18px;
	color: var(--nglv2-green);
}

.nglv2-scard__cta .nglv2-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.4s var(--nglv2-ease-out);
}

.nglv2 .nglv2-scard:hover .nglv2-scard__cta .nglv2-icon {
	transform: translateX(-8px);
}

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

.nglv2-testlist {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-inline: 24px;
}

.nglv2-testlist__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nglv2 .nglv2-testlist__title {
	font-weight: 700;
	font-size: clamp(22px, calc(8px + 1.667vw), 32px);
	line-height: 1.365;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-testlist__desc {
	max-width: 321px;
	padding-top: 10px;
	font-size: 16px;
	line-height: 1.58;
	color: var(--nglv2-grey);
}

.nglv2-testlist .nglv2-btn {
	flex-shrink: 0;
	width: 189px;
}

/* ==============================================================================================
 * Differentiators (149:7380 + states 149:10776) — overlapping panels, hover opens one.
 * ============================================================================================ */

.nglv2-diff .nglv2-center-head {
	margin-bottom: 64px;
}

.nglv2-diff__stage {
	--nglv2-open: 60%;
	--nglv2-overlap: 5.3333%;
	--nglv2-closed: calc((100% - var(--nglv2-open) + (var(--nglv2-count) - 1) * var(--nglv2-overlap)) / (var(--nglv2-count) - 1));
	--nglv2-stage-w: min(var(--nglv2-container), 100vw - 2 * var(--nglv2-pad));
	display: flex;
	height: clamp(380px, 42.8vw, 616px);
	overflow: hidden;
}

.nglv2 .nglv2-diff__panel {
	position: relative;
	z-index: calc(20 - var(--nglv2-i));
	flex: 0 0 var(--nglv2-closed);
	margin-inline-end: calc(var(--nglv2-overlap) * -1);
	overflow: hidden;
	cursor: pointer;
	box-shadow: calc(var(--nglv2-dir) * -4px) 0 16px #192431;
	transition: flex-basis 0.75s var(--nglv2-ease);
	outline-offset: -3px;
}

.nglv2 .nglv2-diff__panel:last-child {
	margin-inline-end: 0;
	box-shadow: none;
}

/* With the row reversed, the panel that closes the row is the first one. */
@media (min-width: 768px) {
	html:not([dir="rtl"]) .nglv2 .nglv2-diff__panel:last-child {
		margin-inline-end: calc(var(--nglv2-overlap) * -1);
		box-shadow: calc(var(--nglv2-dir) * -4px) 0 16px #192431;
	}

	html:not([dir="rtl"]) .nglv2 .nglv2-diff__panel:first-child {
		margin-inline-end: 0;
	}
}

/* The open panel sits above its neighbours (as in every Figma state) so its caption is never covered. */
.nglv2 .nglv2-diff__panel.is-active,
.nglv2 .nglv2-diff__panel.is-active:last-child {
	z-index: 30;
	flex-basis: var(--nglv2-open);
	cursor: default;
	box-shadow: 0 0 16px #192431;
}

.nglv2-diff__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* The photo keeps the open-panel width while panels resize, so opening reveals rather than rescales it. */
.nglv2 .nglv2-diff__img {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(var(--nglv2-stage-w) * 0.6);
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: translateX(-50%) scale(var(--nglv2-zoom, 1));
	transition: transform 1s var(--nglv2-ease);
}

/* Designer note: hovering zooms the photo slightly… */
.nglv2 .nglv2-diff__panel.is-active:hover {
	--nglv2-zoom: 1.07;
}

.nglv2-diff__shade {
	position: absolute;
	inset: 0;
	transition: opacity 0.6s;
}

.nglv2-diff__shade--closed {
	background: linear-gradient(to top, #203049 0%, rgba(32, 48, 73, 0.44) 60%, rgba(32, 48, 73, 0.08) 100%);
}

.nglv2-diff__shade--open {
	opacity: 0;
	background: linear-gradient(to top, #0a0d12 0%, rgba(10, 13, 18, 0.44) 60%, rgba(10, 13, 18, 0.08) 100%);
}

.nglv2-diff__panel.is-active .nglv2-diff__shade--closed {
	opacity: 0;
}

.nglv2-diff__panel.is-active .nglv2-diff__shade--open {
	opacity: 1;
}

.nglv2-diff__caption {
	position: absolute;
	inset-inline: 32px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transform-origin: var(--nglv2-caption-origin, 100% 100%);
	transition: opacity 0.35s, transform 0.6s var(--nglv2-ease);
	pointer-events: none;
}

html:not([dir="rtl"]) .nglv2-diff__caption {
	--nglv2-caption-origin: 0 100%;
}

.nglv2-diff__panel.is-active .nglv2-diff__caption {
	opacity: 1;
	transform: none;
	transition-delay: 0.3s, 0.3s;
}

/* …and the caption grows slightly. */
.nglv2 .nglv2-diff__panel.is-active:hover .nglv2-diff__caption {
	transform: scale(1.05);
	transition-delay: 0s;
}

.nglv2-diff__bar {
	width: 112px;
	height: 12px;
	background: var(--nglv2-green);
}

.nglv2 .nglv2-diff__title {
	font-weight: 700;
	font-size: clamp(22px, 2.78vw, 40px);
	line-height: 1.4;
	color: #f7fcfe;
	white-space: nowrap;
}

/* ==============================================================================================
 * Standards & certificates (149:7397)
 * ============================================================================================ */

.nglv2-certs__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 96px;
}

.nglv2-certs__text {
	display: flex;
	flex: 0 1 573px;
	flex-direction: column;
	gap: 32px;
}

.nglv2-certs__slider {
	display: flex;
	flex: 0 0 532px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.nglv2-certs__swiper {
	width: 100%;
}

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

.nglv2 .nglv2-certs__badge {
	width: 266px;
	height: 266px;
	object-fit: contain;
	transition: transform 0.6s var(--nglv2-ease);
}

.nglv2 .nglv2-certs__badge:hover {
	transform: scale(1.04) rotate(-1.5deg);
}

.nglv2-certs .nglv2-carousel-nav {
	justify-content: center;
}

/* ==============================================================================================
 * Dark pixel band — stats (149:7412) and testimonials (149:8630) share it
 * ============================================================================================ */

.nglv2-band {
	position: relative;
	margin-top: var(--nglv2-gap);
	color: var(--nglv2-navy);
}

.nglv2-band__cap,
.nglv2-band__tab {
	display: block;
	width: 100%;
	height: auto;
}

.nglv2-band__cap {
	aspect-ratio: 1440 / 140;
}

.nglv2-band__tab {
	aspect-ratio: 1440 / 62;
}

html:not([dir="rtl"]) .nglv2-band__cap,
html:not([dir="rtl"]) .nglv2-band__tab {
	transform: scaleX(-1);
}

/* The tab sits under the body, so order: cap, body, tab. */
.nglv2-band {
	display: flex;
	flex-direction: column;
}

.nglv2-band__cap {
	order: 1;
}

.nglv2-band__body {
	order: 2;
	background: var(--nglv2-navy);
	color: #fff;
}

.nglv2-band__tab {
	order: 3;
}

/* Stats */

.nglv2-stats__inner {
	padding-bottom: 79px;
}

.nglv2-stats__title {
	margin-bottom: 32px;
	text-align: center;
}

.nglv2-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: min(var(--nglv2-container), 100% - 2 * var(--nglv2-pad));
	margin-inline: auto;
}

/* Figma lays the cells out left-to-right even on the RTL page (tag left, icon right, text left). */
.nglv2-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 260px;
	padding: 24px 32px;
	border-block: 2px solid var(--nglv2-accent-30);
	border-inline-end: 2px solid var(--nglv2-accent-30);
	direction: ltr;
	text-align: left;
	transition: background-color 0.4s;
}

/* Every cell draws the line at its own end, so the frame still needs one at the start of the row.
 * `direction: ltr` above makes the cell's inline-start its physical left whichever way the page runs,
 * while the grid itself fills from the page's side — so the cell sitting at the left end of the row is
 * the first one in LTR and the last one in RTL. Keying this to :first-child alone left the RTL band
 * open at the left (owner report, 2026-10-06) and doubled the line between the first two cells. */
.nglv2-stat:last-child {
	border-inline-start: 2px solid var(--nglv2-accent-30);
}

html:not([dir="rtl"]) .nglv2-stat:last-child {
	border-inline-start: 0;
}

html:not([dir="rtl"]) .nglv2-stat:first-child {
	border-inline-start: 2px solid var(--nglv2-accent-30);
}

.nglv2-stat:hover {
	background: rgba(109, 190, 69, 0.06);
}

.nglv2-stat__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nglv2-stat__tag {
	padding: 2px 4px;
	border-radius: 2px;
	background: rgba(232, 236, 240, 0.3);
	font: 400 12px/18px var(--nglv2-font-mono);
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-stat__icon {
	width: auto;
	height: 32px;
	color: var(--nglv2-accent);
}

.nglv2-stat__bottom {
	display: flex;
	flex-direction: column;
}

.nglv2-stat__num {
	display: block;
	/* Latin digits here, as in Figma (IRANSansX, not the FaNum variant). */
	font-feature-settings: normal;
	font-weight: 800;
	font-size: clamp(40px, 4.44vw, 64px);
	line-height: 1.3;
	color: var(--nglv2-accent);
	font-variant-numeric: tabular-nums;
}

.nglv2-stat__label {
	display: block;
	font-weight: 500;
	font-size: clamp(16px, 1.67vw, 24px);
	line-height: 1.5;
	color: #e8ecf0;
	unicode-bidi: plaintext;
	text-align: left;
}

@media (min-width: 1200px) {
	/* Figma writes each label on one line, and the Persian and Arabic ones fit. The English
	 * translations are two to three times longer, and a cell that cannot wrap takes the whole phrase
	 * as its minimum width: the four 1fr tracks then grew past the 1200 container (the band ended
	 * 100px wide of every other section at 1440) and the dividers stopped being evenly spaced. Only
	 * the RTL languages keep the single line. */
	[dir="rtl"] .nglv2-stat__label {
		white-space: nowrap;
	}
}

/* ==============================================================================================
 * Projects (149:8494)
 * ============================================================================================ */

.nglv2-row-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 64px;
}

.nglv2-row-head .nglv2-h2 {
	max-width: 945px;
}

/* The cards and their grid: projects.css (shared with the projects pages since 2026-10-04). */

/* ==============================================================================================
 * Catalogs (149:8537) — addepto.com "Company insights" slider feel, one whole card at a time.
 * ============================================================================================ */

.nglv2-catalogs__inner {
	display: flex;
	align-items: stretch;
	min-height: 676px;
}

.nglv2-catalogs__panel {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-width: 0;
	padding: 64px 32px;
	background: var(--nglv2-navy);
}

.nglv2-catalogs__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2 .nglv2-catalogs__title {
	font-weight: 800;
	font-size: clamp(34px, 4.44vw, 64px);
	line-height: 1.328;
	color: #f7fcfe;
}

.nglv2 .nglv2-catalogs__desc {
	padding-inline: 16px;
	font-size: clamp(18px, 1.81vw, 26px);
	line-height: 1.14;
	color: var(--nglv2-grey);
}

.nglv2-catalogs__slider {
	display: flex;
	flex: 0 0 786px;
	flex-direction: column;
	gap: 20px;
	max-width: 65.5%;
	min-width: 0;
	padding-block: 24px;
	padding-inline-start: 32px;
	overflow: hidden;
}

.nglv2-catalogs__swiper {
	width: 100%;
}

.nglv2 .nglv2-catalog {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: auto;
	opacity: 0.3;
	transition: opacity 0.8s ease-out;
}

.nglv2 .nglv2-catalog.swiper-slide-active {
	opacity: 1;
}

/* Figma "image 5": a 754 × 339 frame; keeping its ratio shows the whole banner at every width. */
.nglv2 .nglv2-catalog__media {
	position: relative;
	display: block;
	aspect-ratio: 754 / 339;
	overflow: hidden;
	border-radius: 32px;
	background: #fff;
}

.nglv2 .nglv2-catalog__img,
.nglv2 .nglv2-catalog__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nglv2 .nglv2-catalog__img {
	transition: transform 0.8s var(--nglv2-ease);
}

.nglv2 .nglv2-catalog__media:hover .nglv2-catalog__img {
	transform: scale(1.05);
}

/* A portrait PDF cover (no slide image yet): the whole page, over a blurred copy of itself. */
.nglv2 .nglv2-catalog__media--portrait .nglv2-catalog__img {
	object-fit: contain;
}

.nglv2 .nglv2-catalog__backdrop {
	filter: blur(28px);
	opacity: 0.6;
	transform: scale(1.2);
}

/*
 * Swiper stretches every slide to the tallest card, so the body fills whatever is left under the
 * image and the button sits on the card's bottom edge (margin-top: auto below). The owner asked for
 * this on 2026-10-06: the descriptions differ in length, and without it a short one pulled the
 * button up, so it jumped as the slider stepped from card to card.
 */
.nglv2-catalog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/*
 * Figma gives the 32px title a 29.6px line box. The negative margin reproduces that spacing for the
 * one-line title of the design, while the real line-height keeps a title that wraps legible:
 * (29.6 / 32 − 1.3) / 2 = −0.1875em.
 */
.nglv2 .nglv2-catalog__title {
	margin-block: -0.1875em;
	font-weight: 700;
	font-size: clamp(20px, 2.22vw, 32px);
	line-height: 1.3;
	color: #000;
}

.nglv2 .nglv2-catalog__text {
	font-size: 16px;
	line-height: 1.85;
	color: #000;
}

/* Fixed position for "download and view": the card's bottom edge, whatever the text above it does. */
.nglv2 .nglv2-catalog__body .nglv2-btn {
	margin-top: auto;
}

/* ==============================================================================================
 * News and articles (149:8560) — addepto.com "Customer stories" layout. The designer's revision of
 * 2026-10-02 added the meta row above each title, shortened the excerpt to three lines and made the
 * "read more" link smaller.
 * ============================================================================================ */

.nglv2-news .nglv2-center-head {
	margin-bottom: 64px;
}

.nglv2-news__list {
	display: flex;
	flex-direction: column;
	gap: 64px;
	margin-bottom: 64px;
}

/* ==============================================================================================
 * Testimonials (149:8630)
 * ============================================================================================ */

.nglv2-testi .nglv2-band__body {
	padding-block: 80px;
}

.nglv2-testi__inner {
	display: flex;
	align-items: center;
}

.nglv2-testi .nglv2-carousel-nav--vertical {
	flex-shrink: 0;
	margin-inline-end: 48px;
}

.nglv2-testi__intro {
	flex: 0 1 441px;
	min-width: 0;
}

.nglv2-testi__inner--solo .nglv2-testi__intro {
	flex-basis: 640px;
}

.nglv2 .nglv2-testi__title {
	font-weight: 800;
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.4;
	color: #fff;
}

.nglv2 .nglv2-testi__desc {
	margin-top: 24px;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.6;
	color: #f3f3f3;
	text-align: justify;
}

.nglv2 .nglv2-testi__rule {
	height: 1px;
	margin: 26px 0;
	border: 0;
	background: rgba(243, 243, 243, 0.28);
}

.nglv2-testi__stats {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.nglv2-testi__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nglv2-testi__num {
	font-weight: 700;
	font-size: clamp(24px, 2.08vw, 30px);
	line-height: 1.3;
	color: #f3f3f3;
	font-variant-numeric: tabular-nums;
}

.nglv2-testi__label {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: #e5e5e5;
}

.nglv2-testi__slider {
	position: relative;
	flex: 0 1 545px;
	min-width: 0;
	margin-inline-start: auto;
}

.nglv2-testi__glow {
	position: absolute;
	inset: 0;
	border-radius: 32px;
	background: linear-gradient(to left, #334e8f, #235a35);
	filter: blur(12.6px);
}

html:not([dir="rtl"]) .nglv2-testi__glow {
	background: linear-gradient(to right, #334e8f, #235a35);
}

.nglv2-testi__swiper {
	position: relative;
	height: 340px;
	border-radius: 32px;
}

.nglv2 .nglv2-tcard {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	height: 100%;
	margin: 0;
	padding: 32px 48px;
	border-radius: 32px;
	background: var(--nglv2-navy);
}

.nglv2-tcard__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-tcard__avatar {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 73px;
	height: 73px;
	overflow: hidden;
	border: 3px solid #c6c9cf;
	border-radius: 50%;
	background: #fff;
}

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

.nglv2-tcard__initial {
	font-weight: 800;
	font-size: 28px;
	color: var(--nglv2-navy);
}

.nglv2-tcard__who {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.nglv2-tcard__name {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

.nglv2-tcard__role {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	color: #ccc;
}

.nglv2 .nglv2-tcard__quote-icon {
	width: 45px;
	height: auto;
	margin-inline-start: auto;
}

.nglv2 .nglv2-tcard__text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.nglv2 .nglv2-tcard__text p {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.7;
	color: #f3f3f3;
	text-align: justify;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* The English design shows the whole quote in five lines (370:12768); Persian needs four. */
html:not([dir="rtl"]) .nglv2 .nglv2-tcard__text p {
	-webkit-line-clamp: 5;
}

.nglv2-tcard__stars {
	display: flex;
	gap: 4px;
}

.nglv2-tcard__stars .nglv2-icon {
	width: 26px;
	height: 26px;
	color: #ffd400;
}

.nglv2-tcard__stars .nglv2-icon.is-off {
	color: rgba(255, 255, 255, 0.2);
}

/* ==============================================================================================
 * Equipment (149:8682) — two endless rows in opposite directions.
 * ============================================================================================ */

.nglv2-equip__head {
	margin-bottom: 64px;
}

.nglv2-equip__accent {
	position: relative;
	display: inline-block;
}

.nglv2 .nglv2-swoosh--short {
	position: absolute;
	inset-inline-start: 0;
	bottom: -6px;
	width: 160px;
	margin: 0;
}

.nglv2-marquee {
	display: flex;
	flex-direction: column;
	gap: 64px;
	overflow: hidden;
	padding-block: 6px;
}

.nglv2-marquee__track {
	display: flex;
	gap: 30px;
	width: max-content;
	animation: nglv2-marquee-rtl var(--nglv2-marquee-duration, calc(var(--nglv2-marquee-items, 5) * 8s)) linear infinite;
}

html:not([dir="rtl"]) .nglv2-marquee__track {
	animation-name: nglv2-marquee-ltr;
}

.nglv2-marquee__row--reverse .nglv2-marquee__track {
	animation-direction: reverse;
	animation-delay: calc(var(--nglv2-marquee-items, 5) * -3s);
}

.nglv2-marquee:hover .nglv2-marquee__track,
.nglv2-marquee.is-paused .nglv2-marquee__track {
	animation-play-state: paused;
}

/* One copy + one gap = 50% + 15px of the doubled track. */
@keyframes nglv2-marquee-rtl {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(50% + 15px), 0, 0);
	}
}

@keyframes nglv2-marquee-ltr {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-50% - 15px), 0, 0);
	}
}

/* 320px as in the design; longer real names widen the card instead of wrapping out of its fixed height. */
.nglv2-ecard {
	display: flex;
	flex: 0 0 auto;
	min-width: 320px;
	max-width: 560px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	height: 135px;
	padding: 32px;
	border-radius: 32px;
	background: #fff;
	transition: box-shadow 0.3s, transform 0.3s var(--nglv2-ease);
}

.nglv2-ecard:hover {
	box-shadow: 0 14px 34px rgba(25, 36, 49, 0.1);
	transform: translateY(-4px);
}

.nglv2-ecard__name {
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	color: var(--nglv2-ink);
}

.nglv2-ecard__area {
	font-size: 20px;
	line-height: 30px;
	color: var(--nglv2-accent);
}

.nglv2-ecard__name,
.nglv2-ecard__area {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.nglv2-marquee__row {
		overflow-x: auto;
	}

	.nglv2-marquee__track {
		animation: none;
	}

	.nglv2-marquee__track > [aria-hidden="true"] {
		display: none;
	}
}

/* ==============================================================================================
 * Call to action (149:8728)
 * ============================================================================================ */

.nglv2-cta .nglv2-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2 .nglv2-cta__title {
	font-family: var(--nglv2-font-cta);
	font-weight: 800;
	font-size: clamp(24px, 2.78vw, 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* Consult + "Back to top" actions row, matching the inner pages (inner.css). The home CTA shows
 * both buttons since the design of 2026-10-16; home.css carries the rules because inner.css is
 * not loaded on the homepage. */
.nglv2-consult__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 32px;
}

.nglv2 .nglv2-btn--consult,
.nglv2 .nglv2-btn--totop {
	min-width: 240px;
	height: 56px;
	margin: 0;
	box-shadow: none;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-transform: none;
}

.nglv2 .nglv2-btn--consult {
	padding: 0 24px;
	border-radius: 20px;
	background: var(--nglv2-green);
	color: #f7fcfe;
}

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

.nglv2 .nglv2-btn--totop {
	padding: 0 24px;
	border-color: var(--nglv2-green);
	border-radius: 16px;
	background: transparent;
	color: var(--nglv2-green);
}

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

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

.nglv2 .nglv2-btn--totop:hover .nglv2-icon {
	transform: translateY(-3px);
}

@media (max-width: 479px) {
	.nglv2 .nglv2-btn--consult,
	.nglv2 .nglv2-btn--totop {
		flex: 1 1 100%;
	}
}

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

@media (max-width: 1199px) {
	.nglv2-certs__inner {
		gap: 48px;
	}

	.nglv2-certs__slider {
		flex-basis: 440px;
	}

	.nglv2 .nglv2-certs__badge {
		width: 220px;
		height: 220px;
	}

	.nglv2-testi .nglv2-carousel-nav--vertical {
		margin-inline-end: 28px;
	}

	.nglv2-testi__slider {
		margin-inline-start: 40px;
	}
}

@media (max-width: 1023px) {
	.nglv2 .nglv2-scard--lg {
		height: 440px;
	}

	.nglv2 .nglv2-scard {
		height: 300px;
	}

	.nglv2-services__col--main {
		gap: 32px;
	}

	.nglv2-testlist {
		flex-direction: column;
		align-items: flex-start;
	}

	.nglv2 .nglv2-diff__title {
		white-space: normal;
	}

	.nglv2-certs__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.nglv2-certs__text {
		flex-basis: auto;
	}

	.nglv2-certs__slider {
		flex-basis: auto;
	}

	.nglv2-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.nglv2-stat {
		height: 220px;
	}

	.nglv2-stat:nth-child(n + 3) {
		border-top: 0;
	}

	/* Two columns: the cell at the left end of each row closes the frame — the even cells in RTL, the
	 * odd ones in LTR (see the four-column rules above). */
	.nglv2-stat:nth-child(2n) {
		border-inline-start: 2px solid var(--nglv2-accent-30);
	}

	.nglv2-stat:nth-child(2n + 1) {
		border-inline-start: 0;
	}

	html:not([dir="rtl"]) .nglv2-stat:nth-child(2n) {
		border-inline-start: 0;
	}

	html:not([dir="rtl"]) .nglv2-stat:nth-child(2n + 1) {
		border-inline-start: 2px solid var(--nglv2-accent-30);
	}

	.nglv2-catalogs__inner {
		flex-direction: column;
		min-height: 0;
	}

	.nglv2-catalogs__slider {
		flex-basis: auto;
		max-width: none;
		padding-inline-start: 0;
		padding-top: 32px;
	}

	.nglv2-testi__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.nglv2-testi .nglv2-carousel-nav--vertical {
		flex-direction: row;
		order: 3;
		justify-content: center;
		margin: 0;
	}

	.nglv2-testi__slider {
		flex-basis: auto;
		width: min(545px, 100%);
		margin-inline: auto;
	}

	.nglv2-testi__intro {
		flex-basis: auto;
	}
}

@media (max-width: 767px) {
	.nglv2-hero {
		clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
		padding-bottom: calc(var(--nglv2-header-h) + 40px);
	}

	.nglv2-hero__content {
		gap: 24px;
	}

	.nglv2-hero__actions {
		flex-direction: column;
		width: 100%;
		gap: 14px;
	}

	.nglv2 .nglv2-btn--hero,
	.nglv2 .nglv2-btn--glass {
		width: 100%;
		max-width: 320px;
		height: 56px;
		font-size: 17px;
	}

	.nglv2-services__head,
	.nglv2-row-head,
	.nglv2-diff .nglv2-center-head,
	.nglv2-news .nglv2-center-head,
	.nglv2-equip__head {
		margin-bottom: 36px;
	}

	.nglv2-services__grid {
		flex-direction: column;
		gap: 16px;
	}

	.nglv2 .nglv2-scard,
	.nglv2 .nglv2-scard--lg {
		height: 320px;
	}

	.nglv2-testlist {
		padding-block: 8px;
	}

	/* Differentiators become a vertical accordion. */
	.nglv2-diff__stage {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}

	.nglv2 .nglv2-diff__panel,
	.nglv2 .nglv2-diff__panel.is-active,
	.nglv2 .nglv2-diff__panel.is-active:last-child {
		flex: 0 0 auto;
		height: 96px;
		margin: 0;
		box-shadow: none;
		transition: height 0.6s var(--nglv2-ease);
	}

	.nglv2 .nglv2-diff__panel.is-active,
	.nglv2 .nglv2-diff__panel.is-active:last-child {
		height: 340px;
	}

	.nglv2 .nglv2-diff__img {
		left: 0;
		width: 100%;
		transform: scale(var(--nglv2-zoom, 1));
	}

	.nglv2-diff__caption {
		inset-inline: 20px;
		bottom: 20px;
		gap: 14px;
	}

	.nglv2-diff__bar {
		width: 72px;
		height: 8px;
	}

	.nglv2 .nglv2-certs__badge {
		width: min(266px, 70vw);
		height: auto;
		aspect-ratio: 1;
	}

	.nglv2-stats__inner {
		padding-bottom: 48px;
	}

	.nglv2-stats__grid {
		grid-template-columns: 1fr 1fr;
	}

	.nglv2-stat {
		height: auto;
		min-height: 170px;
		gap: 18px;
		padding: 18px 16px;
	}

	.nglv2-stat__label {
		font-size: 14px;
	}


	.nglv2-catalogs__panel {
		padding: 36px 20px;
	}

	.nglv2 .nglv2-catalog__media {
		border-radius: 20px;
	}

	.nglv2 .nglv2-btn--sm {
		width: 100%;
	}

	.nglv2-news__list {
		gap: 40px;
	}

	.nglv2-testi .nglv2-band__body {
		padding-block: 48px;
	}

	.nglv2 .nglv2-tcard {
		padding: 24px;
	}

	.nglv2-testi__swiper {
		height: 380px;
	}

	.nglv2-marquee {
		gap: 24px;
	}

	.nglv2-ecard {
		min-width: 250px;
		height: 110px;
		padding: 24px;
		border-radius: 24px;
	}

	.nglv2-ecard__name {
		font-size: 19px;
	}

	.nglv2-ecard__area {
		font-size: 16px;
	}

	.nglv2 .nglv2-btn--lg {
		width: 100%;
		max-width: 320px;
		height: 60px;
	}
}