/* ============================================================
   Alnahil — Design System + Base Styles
   Figma source: HPE Graphik · Section padding 150px
   Section padding 150px and font scale per the design tiers:
     1920, 1440, 1280, Mob
   Breakpoints implemented (per spec):
     1920, 1536, 1280, 1024, 425, 393
============================================================ */

/* --- Fonts ---
   Drop the font files into wp-content/themes/alnahil/assets/fonts/
   and the @font-face below will activate them.
   Until the files are present, the stack falls back to system-ui. */

@font-face {
	font-family: 'HPE Graphik';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/HPEGraphik-Regular.woff2') format('woff2'),
	     url('../fonts/HPEGraphik-Regular.woff')  format('woff');
}
@font-face {
	font-family: 'HPE Graphik';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/HPEGraphik-Medium.woff2') format('woff2'),
	     url('../fonts/HPEGraphik-Medium.woff')  format('woff');
}
@font-face {
	font-family: 'HPE Graphik';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/HPEGraphik-Bold.woff2') format('woff2'),
	     url('../fonts/HPEGraphik-Bold.woff')  format('woff');
}

/* ============================================================
   Design tokens (CSS custom properties)

   Breakpoint ranges (mobile-first, min-width thresholds):
     <1024            → Mob   (covers 393 / 425)
     1024–1279        → 1024  (small desktop / lg tablet)
     1280–1439        → 1280  (1280 design tier)
     1440–1535        → 1440  (1440 design tier)
     1536–1919        → 1536  (large desktop)
     ≥1920            → 1920  (1920 design tier)
============================================================ */
:root {
	/* Brand colors */
	--color-primary:        #01A982;
	--color-dark:           #1D1F27;
	--color-text:           #1D1F27;
	--color-neutral-light:  #F7F7F7;
	--color-neutral-mid:    #D5D5D5;
	--color-white:          #FFFFFF;

	/* Typography */
	--font-family:          'HPE Graphik', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Type scale — Mob (default, <1024) */
	--fs-h1: 28px;
	--fs-h2: 24px;
	--fs-h3: 22px;
	--fs-h4: 20px;
	--fs-h5: 16px;
	--fs-p:  14px;

	/* Layout — Mob */
	--section-padding:   60px;
	--container-max:     100%;
	--container-gutter:  16px;
	--grid-columns:      4;
	--grid-gap:          16px;

	/* Spacing tokens — locked from spec */
	--header-pad-l:      20px;
	--header-pad-r:      10px;
	--header-pad-t:      16px;
	--header-pad-b:      15px;
	--banner-mid-btn:    30px;
	--section-my:        25px;
	--section-pl:        8px;
	--section-pr:        30px;
	--footer-pad-x:      30px;
	--footer-pad-y:      40px;
}

/* 1024–1279 — uses 1280 design tier type (next tier up from Mob) */
@media (min-width: 1024px) {
	:root {
		--fs-h1: 52px;
		--fs-h2: 42px;
		--fs-h3: 28px;
		--fs-h4: 24px;
		--fs-h5: 16px;
		--fs-p:  16px;

		--section-padding:   80px;
		--container-max:     960px;
		--container-gutter:  24px;
		--grid-columns:      12;
		--grid-gap:          24px;

		--header-pad-l:      50px;
		--header-pad-r:      50px;
		--header-pad-t:      20px;
		--header-pad-b:      20px;
		--banner-mid-btn:    50px;
		--section-my:        25px;
		--section-pl:        50px;
		--section-pr:        50px;
		--footer-pad-x:      100px;
		--footer-pad-y:      70px;
	}
}

/* 1280–1439 — design "1280" tier */
@media (min-width: 1280px) {
	:root {
		--fs-h1: 52px;
		--fs-h2: 42px;
		--fs-h3: 28px;
		--fs-h4: 24px;
		--fs-h5: 16px;
		--fs-p:  16px;

		--section-padding:   100px;
		--container-max:     1200px;
		--container-gutter:  24px;
		--grid-gap:          24px;

		--header-pad-l:      90px;
		--header-pad-r:      90px;
		--header-pad-t:      20px;
		--header-pad-b:      20px;
		--banner-mid-btn:    90px;
		--section-my:        30px;
		--section-pl:        90px;
		--section-pr:        90px;
		--footer-pad-x:      150px;
		--footer-pad-y:      90px;
	}
}

/* 1440–1535 — design "1440" tier */
@media (min-width: 1440px) {
	:root {
		--fs-h1: 64px;
		--fs-h2: 42px;
		--fs-h3: 32px;
		--fs-h4: 24px;
		--fs-h5: 20px;
		--fs-p:  18px;

		--section-padding:   120px;
		--container-max:     1320px;
		--container-gutter:  32px;
		--grid-gap:          32px;

		--header-pad-l:      100px;
		--header-pad-r:      100px;
		--header-pad-t:      20px;
		--header-pad-b:      20px;
		--banner-mid-btn:    100px;
		--section-my:        30px;
		--section-pl:        100px;
		--section-pr:        100px;
		--footer-pad-x:      150px;
		--footer-pad-y:      100px;
	}
}

/* 1536–1919 — uses 1440 design tier type (next tier down from 1920) */
@media (min-width: 1536px) {
	:root {
		--fs-h1: 64px;
		--fs-h2: 42px;
		--fs-h3: 32px;
		--fs-h4: 24px;
		--fs-h5: 20px;
		--fs-p:  18px;

		--section-padding:   130px;
		--container-max:     1440px;
		--container-gutter:  32px;
		--grid-gap:          32px;

		--header-pad-l:      100px;
		--header-pad-r:      100px;
		--header-pad-t:      20px;
		--header-pad-b:      20px;
		--banner-mid-btn:    100px;
		--section-my:        50px;
		--section-pl:        100px;
		--section-pr:        100px;
		--footer-pad-x:      200px;
		--footer-pad-y:      100px;
	}
}

/* ≥1920 — design "1920" tier */
@media (min-width: 1920px) {
	:root {
		--fs-h1: 82px;
		--fs-h2: 56px;
		--fs-h3: 42px;
		--fs-h4: 32px;
		--fs-h5: 24px;
		--fs-p:  20px;

		--section-padding:   150px;
		--container-max:     1600px;
		--container-gutter:  32px;
		--grid-gap:          32px;

		--header-pad-l:      150px;
		--header-pad-r:      150px;
		--header-pad-t:      20px;
		--header-pad-b:      20px;
		--banner-mid-btn:    100px;
		--section-my:        75px;
		--section-pl:        100px;
		--section-pr:        150px;
		--footer-pad-x:      280px;
		--footer-pad-y:      120px;
	}
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

/* Anchor scroll offset so sticky-header doesn't cover the section heading
   when navigating via the menu (#about, #products, #resources, #contact). */
[id="home"],
[id="about"],
[id="products"],
[id="product-feature"],
[id="resources"],
[id="contact"] {
	scroll-margin-top: clamp(80px, 9vw, 130px);
}

body {
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--fs-p);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-white);
}

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

a { color: var(--color-primary); }

/* ============================================================
   Typography
============================================================ */
h1, .h1 { font-size: var(--fs-h1); line-height: 1.1;  margin: 0 0 .5em; font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; margin: 0 0 .5em; font-weight: 400; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2;  margin: 0 0 .5em; font-weight: 700; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.25; margin: 0 0 .5em; font-weight: 600; }
h5, .h5 { font-size: var(--fs-h5); line-height: 1.3;  margin: 0 0 .5em; font-weight: 600; }
p       { font-size: var(--fs-p);  line-height: 1.6;  margin: 0 0 1em; }

/* ============================================================
   Layout — container + grid
============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	/* padding-inline: var(--container-gutter); */
}

.grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	gap: var(--grid-gap);
}

/* ============================================================
   Header
============================================================ */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-neutral-light);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding:
		var(--header-pad-t)
		var(--header-pad-r)
		var(--header-pad-b)
		var(--header-pad-l);
}

/* --- Branding (logo + separator + secondary logo) --- */
.site-branding {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.site-logo,
.site-logo img {
	display: block;
}

.site-logo--primary img   { max-height: 48px; width: auto; }
.site-logo--secondary img { max-height: 36px; width: auto; }

.site-branding__separator {
	width: 1px;
	height: 36px;
	background: var(--color-neutral-mid);
}

/* Mobile/tablet: smaller header logos. */
@media (max-width: 1023px) {
	.site-logo--primary img   { max-height: 42px; }
	.site-logo--secondary img { max-height: 32px; }
	.site-branding__separator { height: 32px; }
	.site-branding            { gap: 12px; }
}

@media (min-width: 1280px) {
	.site-logo--primary img   { max-height: 56px; }
	.site-logo--secondary img { max-height: 40px; }
	.site-branding__separator { height: 44px; }
	.site-branding            { gap: 20px; }
}

@media (min-width: 1920px) {
	.site-logo--primary img   { max-height: 64px; }
	.site-logo--secondary img { max-height: 48px; }
	.site-branding__separator { height: 50px; }
	.site-branding            { gap: 24px; }
}

/* --- Primary nav --- */
.main-navigation {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

.primary-menu .menu-item > a {
	color: var(--color-text);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--fs-p);
	line-height: 1;
	padding: 6px 0;
	transition: color .15s ease;
}

.primary-menu .menu-item.current-menu-item > a,
.primary-menu .menu-item.current_page_item > a,
.primary-menu .menu-item.current-menu-ancestor > a,
.primary-menu .menu-item.current-menu-parent > a,
.primary-menu .menu-item:hover > a,
.primary-menu .menu-item > a:hover,
.primary-menu .menu-item > a:focus,
.primary-menu .menu-item.is-active > a {
	color: var(--color-primary);
}

@media (min-width: 1280px) {
	.primary-menu          { gap: 40px; }
	.primary-menu .menu-item > a { font-size: 16px; }
}

@media (min-width: 1536px) {
	.primary-menu          { gap: 48px; }
	.primary-menu .menu-item > a { font-size: 18px; }
}

@media (min-width: 1920px) {
	.primary-menu          { gap: 56px; }
	.primary-menu .menu-item > a { font-size: 20px; }
}

/* --- Header CTA button --- */
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
	background: transparent;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-p);
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
	flex-shrink: 0;
}

.header-cta:hover,
.header-cta:focus {
	background: var(--color-primary);
	color: var(--color-white);
}

.header-cta--mobile  { display: none; }   /* shown only inside the mobile drawer */

@media (min-width: 1280px) { .header-cta { padding: 12px 28px; font-size: 16px; } }
@media (min-width: 1536px) { .header-cta { padding: 14px 32px; font-size: 18px; } }
@media (min-width: 1920px) { .header-cta { padding: 16px 36px; font-size: 20px; } }

/* --- Hamburger (mobile only) --- */
.menu-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	padding: 0;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	align-items: center;
}

.menu-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Below 1024: hamburger + full-screen overlay menu --- */
@media (max-width: 1023px) {
	.menu-toggle { display: flex; position: relative; z-index: 110; }

	/* Hamburger lines turn white when the overlay is open (against dark bg). */
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: var(--color-white); }

	.header-cta--desktop { display: none; }
	.header-cta--mobile  { display: inline-flex; margin-top: 24px; }

	/* Full-viewport overlay menu, fades + slides in from the top. */
	.main-navigation {
		position: fixed;
		inset: 0;
		background: var(--color-dark);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: clamp(24px, 5vw, 40px) clamp(24px, 8vw, 48px) 48px;
		gap: 24px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
		z-index: 105;
		overflow-y: auto;
	}

	.main-navigation.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Lock body scroll while the overlay is open. */
	body.menu-open { overflow: hidden; }

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		text-align: left;
		width: 100%;
		max-width: 360px;
	}

	.primary-menu .menu-item {
		width: 100%;
	}

	.primary-menu .menu-item > a {
		display: block;
		padding: 16px 12px;
		font-size: clamp(20px, 5vw, 26px);
		font-weight: 500;
		color: var(--color-white);
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		transition: color .2s ease, background .2s ease;
	}

	.primary-menu .menu-item > a:hover,
	.primary-menu .menu-item > a:focus,
	.primary-menu .menu-item.current-menu-item > a {
		color: var(--color-primary);
		background: rgba(255, 255, 255, .04);
	}

	.header-cta--mobile {
		min-width: 200px;
		padding: 14px 32px;
		font-size: 16px;
	}

	/* Header inner becomes relative anchor for the toggle button (keep the
	   header sticky; sticky also establishes a positioning context). */
	.site-header__inner { position: relative; }
}

/* ============================================================
   Footer
============================================================ */
.site-footer {
	background: var(--color-neutral-light);
	margin-top: 0;
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(24px, 3.5vw, 50px) clamp(20px, 10vw, 150px);
}

/* 1024–1279 tier: cap horizontal padding at 50px (per design spec). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.site-footer__inner {
		padding: clamp(24px, 3.5vw, 50px) clamp(20px, 10vw, 50px);
	}
}

/* 1280–1535 tier: cap horizontal padding at 90px (per design spec). */
@media (min-width: 1280px) and (max-width: 1535.98px) {
	.site-footer__inner {
		padding: clamp(24px, 3.5vw, 50px) clamp(20px, 10vw, 90px);
	}
}

/* 1536–1919 tier: cap horizontal padding at 100px (per design spec). */
@media (min-width: 1536px) and (max-width: 1919.98px) {
	.site-footer__inner {
		padding: clamp(24px, 3.5vw, 50px) clamp(20px, 10vw, 100px);
	}
}

/* --- Footer branding (reuses .site-logo + .site-branding__separator) --- */
.site-footer__branding {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.site-footer .site-logo--primary img   { max-height: 40px; width: auto; }
.site-footer .site-logo--secondary img { max-height: 32px; width: auto; }
.site-footer .site-branding__separator { height: 32px; }

/* Mobile/tablet: smaller footer logos. */
@media (max-width: 1023px) {
	.site-footer .site-logo--primary img   { max-height: 28px; }
	.site-footer .site-logo--secondary img { max-height: 22px; }
	.site-footer .site-branding__separator { height: 22px; }
}

@media (min-width: 1280px) {
	.site-footer .site-logo--primary img   { max-height: 48px; }
	.site-footer .site-logo--secondary img { max-height: 36px; }
	.site-footer .site-branding__separator { height: 38px; }
}

@media (min-width: 1920px) {
	.site-footer .site-logo--primary img   { max-height: 56px; }
	.site-footer .site-logo--secondary img { max-height: 42px; }
	.site-footer .site-branding__separator { height: 44px; }
}

/* --- Social icons --- */
.social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	background: var(--color-text);
	transition: transform .15s ease, opacity .15s ease;
}

.social-links__link img {
	border-radius: 50%;
}

.social-links__link svg {
	width: 55%;
	height: 55%;
	display: block;
}

.social-links__link:hover,
.social-links__link:focus {
	transform: translateY(-2px);
	opacity: .85;
}

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

/* Brand-colored backgrounds per platform */
.social-links__link[data-platform="facebook"]  { background: #1877F2; }
.social-links__link[data-platform="linkedin"]  { background: #0A66C2; }
.social-links__link[data-platform="twitter"]   { background: #000000; }
.social-links__link[data-platform="youtube"]   { background: #FF0000; }
.social-links__link[data-platform="instagram"] {
	background:
		radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

@media (min-width: 1280px) {
	.social-links { gap: 14px; }
	.social-links__link { width: 36px; height: 36px; }
}

@media (min-width: 1536px) {
	.social-links { gap: 16px; }
	.social-links__link { width: 40px; height: 40px; }
}

@media (min-width: 1920px) {
	.social-links { gap: 18px; }
	.social-links__link { width: 44px; height: 44px; }
}

/* --- Copyright --- */
.site-copyright {
	margin: 0;
	font-size: var(--fs-p);
	color: var(--color-text);
	text-align: right;
	flex-shrink: 0;
}

/* --- Below 1024: stack columns, center everything --- */
@media (max-width: 1023px) {
	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 20px;
	}

	.site-copyright { text-align: center; }
}

/* ============================================================
   Scroll to top
============================================================ */
.scroll-to-top {
	position: fixed;
	right: clamp(16px, 2.4vw, 32px);
	bottom: clamp(16px, 2.4vw, 32px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(44px, 4.4vw, 56px);
	height: clamp(44px, 4.4vw, 56px);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(80, 82, 92, .92) 0%, rgba(28, 30, 38, .96) 55%, rgba(8, 9, 14, 1) 100%);
	border: 1.5px solid rgba(255, 255, 255, .42);
	color: var(--color-white);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .2s ease, border-color .2s ease;
	box-shadow:
		0 6px 20px rgba(0, 0, 0, .45),
		0 2px 4px rgba(0, 0, 0, .3),
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	z-index: 999;
	padding: 0;
}

.scroll-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
	transform: translateY(-2px) scale(1.06);
	background:
		radial-gradient(circle at 32% 28%, rgba(58, 211, 168, 1) 0%, var(--color-primary) 55%, #017A5E 100%);
	border-color: rgba(255, 255, 255, .85);
	box-shadow:
		0 10px 28px rgba(1, 169, 130, .45),
		0 3px 8px rgba(0, 0, 0, .35),
		inset 0 1px 0 rgba(255, 255, 255, .3),
		inset 0 -1px 0 rgba(0, 0, 0, .25);
}

.scroll-to-top:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 4px;
}

.scroll-to-top__icon {
	width: 42%;
	height: 42%;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

/* ============================================================
   WhatsApp floating action button (mirror of scroll-to-top, on the LEFT).
============================================================ */
.whatsapp-fab {
	position: fixed;
	left: clamp(16px, 2.4vw, 32px);
	bottom: clamp(16px, 2.4vw, 32px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(48px, 5vw, 64px);
	height: clamp(48px, 5vw, 64px);
	border-radius: 50%;
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	color: var(--color-white);
	text-decoration: none;
	box-shadow:
		0 8px 24px rgba(37, 211, 102, .45),
		0 2px 6px rgba(0, 0, 0, .25),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		inset 0 -1px 0 rgba(0, 0, 0, .15);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
	z-index: 999;
	animation: wa-pulse 2.4s ease-in-out infinite;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
	transform: translateY(-3px) scale(1.06);
	background: linear-gradient(135deg, #2BE574 0%, #169d8c 100%);
	box-shadow:
		0 14px 32px rgba(37, 211, 102, .55),
		0 4px 10px rgba(0, 0, 0, .3),
		inset 0 1px 0 rgba(255, 255, 255, .3),
		inset 0 -1px 0 rgba(0, 0, 0, .15);
	animation-play-state: paused;
}

.whatsapp-fab:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 4px;
}

.whatsapp-fab__icon {
	width: 58%;
	height: 58%;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

@keyframes wa-pulse {
	0%, 60%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 0 0 rgba(37, 211, 102, .55); }
	30%           { box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 0 0 14px rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp-fab { animation: none; }
}

/* ============================================================
   Sections (flexible content)
============================================================ */
.section {
	/* margin-block: var(--section-my); */
	padding-inline: var(--section-pl) var(--section-pr);
}

.section__inner   { display: flex; flex-direction: column; gap: 1rem; }

.section--hero {
	color: var(--color-white);
	background: var(--color-dark) center/cover no-repeat;
	min-height: 60vh;
	display: flex;
	align-items: center;
}

/* --- Hero with background video ---
   Edge-to-edge banner. Video covers the full width; <h1> is centered;
   pause/play toggle sits bottom-right. Fluid sizing via clamp() so the
   single ruleset handles 360px → 1920px+ without fixed breakpoints. */
.section--hero-video {
	margin: 0;
	padding: 0;
	width: 100%;
}

.hero-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: clamp(420px, 72vh, 760px);
	max-height: 92vh;
	border-radius: 0;
	overflow: hidden;
	background: #000 center/cover no-repeat;
	isolation: isolate;
}

@media (max-width: 767px) {
	.hero-video {
		aspect-ratio: auto;
		height: 62vh;
		min-height: 380px;
		max-height: 560px;
	}
}

.hero-video__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

/* HTML5 <video>: native object-fit covers the container. */
.hero-video__el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* YouTube iframe scaled so it always covers the container — emulates object-fit: cover.
   177.78vh = 16/9 width derived from height; 56.25vw = 16/9 height derived from width. */
.hero-video__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.78vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	border: 0;
	pointer-events: none;
}

/* Uniform dark overlay across the whole video for legibility. */
.hero-video__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.45);
}

/* Heading is dead-centered both axes. */
.hero-video__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* Asymmetric top/bottom padding so the heading sits at ~60% vertical
	   (slightly below center) — matches the reference design. */
	padding: clamp(80px, 16vw, 220px) clamp(20px, 5vw, 64px) clamp(20px, 5vw, 64px);
	color: var(--color-white);
	pointer-events: none;
}

.hero-video__heading {
	margin: 0;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: clamp(28px, 5.6vw, 76px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-white);
	max-width: min(34ch, 96%);
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .5);

	/* Mobile: force each sentence onto its own line via the per-line spans
	   injected by hero-video.php. Larger screens keep inline default. */
}

/* Two heading copies are emitted so each screen size shows the right
   line breaks without touching the other. Desktop shows the original
   heading (with author-provided <br>); mobile shows the version where
   each sentence is wrapped in its own block. */
.hero-video__heading--mobile { display: none; }
@media (max-width: 767.98px) {
	.hero-video__heading--desktop { display: none; }
	.hero-video__heading--mobile  { display: block; }
	.hero-video__heading .hero-video__heading-line { display: block; }
}

.hero-video__subheading {
	margin: clamp(10px, 1.6vw, 18px) 0 0;
	font-size: clamp(14px, 1.4vw, 20px);
	line-height: 1.45;
	max-width: min(60ch, 90%);
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}

.hero-video__cta {
	margin-top: clamp(18px, 2vw, 28px);
	pointer-events: auto;
}

.hero-video__toggle {
	all: unset;
	position: absolute;
	z-index: 10;
	right: max(16px, clamp(20px, 2.8vw, 44px));
	bottom: max(16px, clamp(20px, 2.8vw, 44px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(56px, 6.4vw, 92px);
	height: clamp(56px, 6.4vw, 92px);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(80, 82, 92, .92) 0%, rgba(28, 30, 38, .96) 55%, rgba(8, 9, 14, 1) 100%);
	border: 1.5px solid rgba(255, 255, 255, .42);
	color: var(--color-white);
	cursor: pointer;
	box-shadow:
		0 8px 28px rgba(0, 0, 0, .55),
		0 2px 6px rgba(0, 0, 0, .35),
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .35);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hero-video__toggle:hover,
.hero-video__toggle:focus-visible {
	transform: scale(1.06);
	border-color: rgba(255, 255, 255, .65);
	box-shadow:
		0 12px 36px rgba(0, 0, 0, .6),
		0 3px 10px rgba(0, 0, 0, .4),
		inset 0 1px 0 rgba(255, 255, 255, .25),
		inset 0 -1px 0 rgba(0, 0, 0, .4);
}

.hero-video__toggle:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 4px;
}

.hero-video__toggle-icon {
	display: none;
	width: 38%;
	height: 38%;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.hero-video__toggle-icon svg { width: 100%; height: 100%; display: block; }

.hero-video__toggle.is-playing .hero-video__toggle-icon--pause { display: block; }
.hero-video__toggle.is-paused  .hero-video__toggle-icon--play  { display: block; }

/* Reduced motion: don't autoplay the video — show poster + play icon. */
@media (prefers-reduced-motion: reduce) {
	.hero-video__media { display: none; }
	.hero-video__toggle { display: none; }
}


.section--image-text .section__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.section--image-right .section__grid              { direction: rtl; }
.section--image-right .section__grid > *          { direction: ltr; }

.section--cta { background: var(--color-neutral-light); text-align: center; }

@media (max-width: 1023px) {
	.section--image-text .section__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Buttons
============================================================ */
.button {
	display: inline-block;
	padding: .75rem 1.5rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	transition: background .2s, color .2s, opacity .2s;
}

.button--primary { background: var(--color-primary); color: var(--color-white); }
.button--primary:hover { opacity: .9; }

.button--dark    { background: var(--color-dark); color: var(--color-white); }
.button--dark:hover { opacity: .9; }

/* ============================================================
   Container helper — used by every non-hero section
============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	/* padding-inline: var(--container-gutter); */
	box-sizing: border-box;
}

/* ============================================================
   About section
============================================================ */
.section--about {
	padding-block: clamp(40px, 6vw, 96px);
}

/* <1024 tier: tighter mobile/tablet padding (per design spec). */
@media (max-width: 1023.98px) {
	.section--about {
		padding: 50px 20px;
	}
}

.section--about__heading {
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-dark);
	line-height: 1.2;
}

.section--about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch;
}

/* Left column: heading on top, image fills remaining vertical space below.
   Image bottom always lines up with the right column's text bottom because
   the image stretches to fill whatever height is left after the heading. */
.section--about__left {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 32px);
}

.section--about__media {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.section--about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right column: text top aligns with heading top, and paragraphs flow
   naturally with comfortable spacing so the last paragraph lands near the
   image bottom — matches the reference (no big distributed gaps). */
.section--about__body {
	color: var(--color-text);
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.7;
}

.section--about__body p { margin: 0 0 clamp(20px, 2.4vw, 36px); }
.section--about__body p:last-child { margin-bottom: 0; }

/* About CTA — "Book a Demo" button, responsive on every breakpoint. */
.section--about__cta {
	margin-top: clamp(24px, 3vw, 44px);
}

.section--about__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(.7rem, 1.1vw, .95rem) clamp(1.8rem, 2.8vw, 2.8rem);
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.2;
	white-space: nowrap;
	/* Pill outline style — green border + green text on transparent bg. */
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: 999px;
	transition: background .2s ease, color .2s ease;
}

/* Hover/focus — fill green, text turns white. */
.section--about__cta-button:hover,
.section--about__cta-button:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
	opacity: 1;
}

@media (max-width: 767px) {
	.section--about__grid { grid-template-columns: 1fr; gap: 24px; }
	/* Full-width tap target on phones. */
	.section--about__cta { margin-top: 24px; }
	.section--about__cta-button {
		display: flex;
		width: 100%;
		padding-block: .85rem;
	}
}

/* 1280-1439 tier: keep "About Al Nahil Computers" on one line by giving
   the left column more room and allowing the heading to not wrap. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
	.section--about__grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
	.section--about__heading {
		white-space: nowrap;
	}
}

/* ============================================================
   Solution Feature (HPE Zerto) — dark teal gradient card
============================================================ */
.section--solution-feature {
	padding-block: clamp(20px, 3vw, 60px);
}

/* <1024 tier: tighter mobile/tablet padding (per design spec). */
@media (max-width: 1023.98px) {
	.section--solution-feature {
		padding: 20px 20px;
	}
}

.solution-card {
	position: relative;
	padding: clamp(28px, 4.5vw, 64px);
	color: var(--color-white);
	background:
		radial-gradient(110% 120% at 80% 20%, #5BAFB0 0%, #2C5C7A 40%, #1A3258 80%, #0E1F3D 100%);
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .15);
}

/* When an editor uploads a Background Image in the WP admin, it overrides
   the default gradient. Image is set inline via background-image; we only
   need to manage size/position/repeat here. */
.solution-card--has-bg-image {
	background-color: var(--color-dark);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.solution-card__header {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	margin-bottom: clamp(20px, 3vw, 44px);
}

.solution-card__heading {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-white);
}

.solution-card__description {
	margin: 0;
	font-size: var(--fs-p);
	line-height: 1.6;
	max-width: 80ch;
	color: rgba(255, 255, 255, .92);
}

.solution-card__description p {
	margin: 0 0 clamp(10px, 1.2vw, 16px);
}

.solution-card__description p:last-child {
	margin-bottom: 0;
}

.solution-card__logo {
	background: var(--color-white);
	padding: clamp(20px, 2vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(140px, 13vw, 210px);
	max-width: clamp(200px, 18vw, 320px);
	margin-left: auto;
}

.solution-card__logo img {
	max-height: clamp(90px, 10vw, 150px);
}

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

.solution-card__benefits-heading {
	margin: 0 0 clamp(24px, 2.8vw, 40px);
	font-size: var(--fs-h4);
	font-weight: 600;
	color: var(--color-white);
}

.solution-card__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3.2vw, 48px) clamp(40px, 5vw, 80px);
}

.solution-benefit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(14px, 1.6vw, 22px);
}

.solution-benefit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: clamp(32px, 2.6vw, 44px);
	height: clamp(32px, 2.6vw, 44px);
	flex-shrink: 0;
	/* animation: benefit-icon-orbit 3.6s cubic-bezier(.5, .1, .5, 1) infinite; */
}

/* Glowing aura behind each icon — radial green gradient that pulses,
   creating a "mind-blowing" halo effect. */
.solution-benefit__icon::before {
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(1, 169, 130, .55) 0%, rgba(1, 169, 130, 0) 65%);
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	/* animation: benefit-icon-aura 3.6s ease-in-out infinite; */
	will-change: opacity, transform;
}

.solution-benefit:nth-child(1) .solution-benefit__icon,
.solution-benefit:nth-child(1) .solution-benefit__icon::before { animation-delay: 0s; }
.solution-benefit:nth-child(2) .solution-benefit__icon,
.solution-benefit:nth-child(2) .solution-benefit__icon::before { animation-delay: .45s; }
.solution-benefit:nth-child(3) .solution-benefit__icon,
.solution-benefit:nth-child(3) .solution-benefit__icon::before { animation-delay: .9s; }
.solution-benefit:nth-child(4) .solution-benefit__icon,
.solution-benefit:nth-child(4) .solution-benefit__icon::before { animation-delay: 1.35s; }
.solution-benefit:nth-child(5) .solution-benefit__icon,
.solution-benefit:nth-child(5) .solution-benefit__icon::before { animation-delay: 1.8s; }
.solution-benefit:nth-child(6) .solution-benefit__icon,
.solution-benefit:nth-child(6) .solution-benefit__icon::before { animation-delay: 2.25s; }

@keyframes benefit-icon-orbit {
	0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
	20%      { transform: translateY(-3px) scale(1.06) rotate(-6deg); }
	50%      { transform: translateY(-9px) scale(1.14) rotate(0deg); }
	80%      { transform: translateY(-3px) scale(1.06) rotate(6deg); }
}

@keyframes benefit-icon-aura {
	0%, 100% { opacity: 0; transform: scale(.7); }
	50%      { opacity: 1; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
	.solution-benefit__icon,
	.solution-benefit__icon::before { animation: none; }
}

.solution-benefit__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1); /* force-white if asset has color */
}

.solution-benefit__body {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 1vw, 14px);
}

.solution-benefit__title {
	margin: 0;
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-white);
}

.solution-benefit__description {
	margin: 0;
	font-size: var(--fs-p);
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

@media (max-width: 767px) {
	.solution-card__header { grid-template-columns: 1fr; }
	.solution-card__logo   { min-height: 110px; margin: 0 auto; }
	.solution-card__benefits { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Product Feature (HPE ProLiant) — heading + check list + image
============================================================ */
.section--product-feature {
	padding-block: clamp(40px, 6vw, 96px);
}

/* <1024 tier: tighter mobile/tablet padding (per design spec). */
@media (max-width: 1023.98px) {
	.section--product-feature {
		padding: 50px 20px;
	}
}

.section--product-feature__heading {
	margin: 0 0 clamp(8px, 1vw, 14px);
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-dark);
	line-height: 1.2;
}

.section--product-feature__description {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	font-size: var(--fs-p);
	line-height: 1.6;
	color: var(--color-text);
	max-width: 80ch;
}

.section--product-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.section--product-feature__benefits-heading {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	font-size: var(--fs-h5);
	font-weight: 600;
	color: var(--color-dark);
}

.product-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.2vw, 18px) clamp(20px, 2.4vw, 32px);
}

.product-benefit {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	font-size: var(--fs-p);
	line-height: 1.5;
	color: var(--color-text);
}

.product-benefit__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--color-primary);
}
.product-benefit__check svg { width: 100%; height: 100%; display: block; }

.section--product-feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.section--product-feature__media img {
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.section--product-feature__grid { grid-template-columns: 1fr; gap: 24px; }
	.product-benefits { grid-template-columns: 1fr; }
}

/* ============================================================
   Resources Grid — 4 cards in a 4-col grid (1 col on mobile, 2 on tablet)
============================================================ */
.section--resources-grid {
	background: var(--color-neutral-light);
	padding-block: clamp(40px, 6vw, 96px);
}

/* <1024 tier: tighter mobile/tablet padding (per design spec). */
@media (max-width: 1023.98px) {
	.section--resources-grid {
		padding: 50px 20px;
	}
}

.section--resources-grid__heading {
	margin: 0 0 clamp(8px, 1vw, 14px);
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-dark);
	line-height: 1.2;
	text-align: left;
}

.section--resources-grid__description {
	margin: 0 0 clamp(28px, 3vw, 44px);
	font-size: var(--fs-p);
	line-height: 1.5;
	color: var(--color-text);
	max-width: 100%;
	text-align: left;
}

.resources-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Equal-height rows: all small cards match the tallest in their row,
	   and the row sets a minimum so single-line content doesn't shrink. */
	grid-auto-rows: minmax(clamp(170px, 14vw, 220px), 1fr);
	gap: clamp(14px, 1.6vw, 24px);
}

.resource-card {
	position: relative;
	overflow: hidden;
	background-color: var(--card-bg, var(--color-dark));
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	color: var(--color-white);
	min-height: clamp(170px, 14vw, 220px);
	transition: transform .25s ease, box-shadow .25s ease;
}


.resource-card--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

/* Top-image card style: image at top, text below (no overlay scrim). */
.resource-card--top-image {
	display: flex;
	flex-direction: column;
}

.resource-card__top-image {
	flex: 0 0 auto;
	width: 100%;
	padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 24px) 0;
	box-sizing: border-box;
}

.resource-card__top-image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	max-height: clamp(80px, 9vw, 130px);
}

/* Tall cards (1×2 rows) get a larger top image so the proportions match
   the reference design — title sits closer below the image. */
.resource-card--tall .resource-card__top-image img {
	max-height: clamp(180px, 20vw, 280px);
}

.resource-card--top-image .resource-card__inner {
	flex: 1 1 auto;
	padding-top: clamp(12px, 1.4vw, 20px);
}

/* Tall card: link sits right below the title with a moderate gap,
   not pushed to the very bottom (avoids huge empty green space). */
.resource-card--tall .resource-card__link {
	margin-top: clamp(18px, 2vw, 32px);
}

.resource-card--tall {
	grid-row: span 2;
}

.resource-card--text-dark { color: var(--color-dark); }

.resource-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .15);
}

.resource-card__inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: clamp(14px, 1.5vw, 22px);
	box-sizing: border-box;
	gap: 8px;
}

.resource-card__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.resource-card--text-dark .resource-card__title { text-shadow: none; }

.resource-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	font-size: var(--fs-h5);
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	transition: gap .2s ease, color .2s ease;
	align-self: flex-start;
	position: relative;
}

/* Animated underline: a 2px bar that grows from left to right on hover. */
.resource-card__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.resource-card__link:hover::after,
.resource-card__link:focus-visible::after {
	transform: scaleX(1);
}

.resource-card__link:hover { gap: 12px; }

/* On brand-color backgrounds (green tall card #01A982, HPE ProLiant teal
   #1FB6A8), green link text would clash. Keep the link white. */
.resource-card[style*="--card-bg: #01A982"] .resource-card__link,
.resource-card[style*="--card-bg:#01A982"] .resource-card__link,
.resource-card[style*="--card-bg: #1FB6A8"] .resource-card__link,
.resource-card[style*="--card-bg:#1FB6A8"] .resource-card__link {
	color: inherit;
}

/* Cards with a background image: group title + link together at the bottom
   (image fills the card; text reads clearly against the bottom dark scrim). */
.resource-card--has-image .resource-card__inner {
	justify-content: flex-end;
}

.resource-card--has-image .resource-card__link {
	margin-top: 0;
}

.resource-card__arrow {
	display: inline-flex;
	width: 1em;
	height: 1em;
}
.resource-card__arrow svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1023px) {
	.resources-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: minmax(220px, auto);
	}
	.resource-card        { min-height: 220px; }
	.resource-card--tall  { grid-column: auto; grid-row: auto; }
}

@media (max-width: 599px) {
	.resources-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(200px, auto);
	}
	.resource-card        { min-height: 200px; }
}

/* ============================================================
   Contact form — dark card with grid of inputs
============================================================ */
.section--contact {
	padding-block: var(--footer-pad-y);
	padding-inline: var(--footer-pad-x);
}

/* <1024 tier: tighter mobile/tablet padding. */
@media (max-width: 1023.98px) {
	.section--contact {
		padding-block: 50px;
		padding-inline: var(--footer-pad-x);
	}
}

/* <480 tier: tighter side padding on small phones. */
@media (max-width: 479.98px) {
	.section--contact {
		padding-inline: 16px;
	}
}

.section--contact__heading {
	margin: 0 0 clamp(20px, 2.4vw, 36px);
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-dark);
	line-height: 1.2;
	text-align: center;
}

.contact-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: clamp(12px, 1.4vw, 20px) 0 0;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	animation: contact-alert-in .35s cubic-bezier(.2, .9, .3, 1.1);
}
.contact-alert[hidden] { display: none; }

/* Submit button loading state (AJAX submission in flight). */
.contact-form__submit.is-loading {
	opacity: 0.7;
	cursor: progress;
}
.contact-alert__icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 1px;
}
.contact-alert__icon svg { display: block; }
.contact-alert--success { background: #e6f9f1; color: #0a5d4a; border: 1px solid #01a982; }
.contact-alert--error   { background: #fde8e8; color: #7a1f1f; border: 1px solid #c2410c; }

@keyframes contact-alert-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Invalid field marker (set by JS when client-side validation fails). */
.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea,
.contact-field.is-invalid .custom-select__trigger {
	border-color: #c2410c !important;
	box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.15);
}
/* Labels keep their normal colour even when the field is invalid — only
   the border and the inline error message turn red. */

/* Inline per-field error message — appears directly below the input
   when validation fails. Reference design pattern: small, red, no icon. */
.contact-field__error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.4;
	color: #f87171;
}

/* Phone group: country-code select + number input side-by-side.
   Selectors bump specificity past `.contact-field select { width:100% }`
   so the code dropdown stays narrow and the number input takes the rest. */
.contact-field .contact-field__phone {
	display: flex;
	gap: 0;
	align-items: stretch;
	width: 100%;
}
/* Code dropdown and number input sit flush; remove the shared edge so they
   read as one combined field. */
.contact-field__phone .custom-select .custom-select__trigger { border-right: 0; }
.contact-field__phone > input[type="tel"] { border-left: 0; }
.contact-field select.contact-field__phone-code {
	flex: 0 0 118px;
	width: 118px;
	min-width: 0;
	padding-right: 32px;
	background-position: right 10px center;
}

/* Phone-code custom-select sits inside the flex .contact-field__phone row,
   so we constrain its WRAPPER (not just the native select) to the dropdown width. */
.contact-field__phone .custom-select {
	flex: 0 0 132px;
	width: 132px;
}
.custom-select__flag {
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-right: 8px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
	object-fit: cover;
	vertical-align: middle;
	flex-shrink: 0;
}
.custom-select__label { display: inline-flex; align-items: center; }
.custom-select__option {
	display: flex;
	align-items: center;
}
.custom-select__option .custom-select__flag { margin-right: 10px; }
.contact-field .contact-field__phone > input[type="tel"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.contact-form {
	background: var(--color-dark);
	padding: clamp(30px, 6vw, 90px) clamp(20px, 7vw, 100px);
	color: var(--color-white);
}

/* <480 tier: tighter form padding on small phones. */
@media (max-width: 479.98px) {
	.contact-form {
		padding: 28px 18px;
	}
}

.contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 28px);
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
}

.contact-field--full { grid-column: 1 / -1; }

.contact-field__label {
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
}

.contact-field__required {
	color: #ff6b6b;
	margin-left: 2px;
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field select,
.contact-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--color-white);
	border: 1px solid #d5d5d5;
	font: inherit;
	font-size: 14px;
	color: var(--color-dark);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Custom dropdown arrow on plain select fields (without [data-custom-select]). */
.contact-field select:not([data-custom-select]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1F27' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* Custom select component (replaces native dropdown UI for [data-custom-select]). */
.custom-select {
	position: relative;
	width: 100%;
}

.custom-select select[data-custom-select] {
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.custom-select__trigger {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--color-white);
	border: 1px solid #d5d5d5;
	font: inherit;
	font-size: 14px;
	color: var(--color-dark);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.custom-select__trigger:focus-visible,
.custom-select.is-open .custom-select__trigger {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(1, 169, 130, .25);
}

.custom-select__label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-select__caret {
	display: inline-flex;
	width: 12px;
	height: 8px;
	flex-shrink: 0;
	transition: transform .2s ease;
}

.custom-select__caret svg { width: 100%; height: 100%; display: block; }

.custom-select.is-open .custom-select__caret { transform: rotate(180deg); }

.custom-select__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--color-white);
	border: 1px solid #d5d5d5;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.custom-select.is-open .custom-select__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.custom-select__option {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--color-dark);
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}

.custom-select__option:hover,
.custom-select__option:focus {
	background: rgba(1, 169, 130, .08);
	color: var(--color-primary);
}

.custom-select__option.is-selected {
	background: var(--color-primary);
	color: var(--color-white);
}

.custom-select__option.is-placeholder {
	color: #8c8f94;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #9a9da3; }

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(1, 169, 130, .25);
}

/* Invalid-state styling (post-validation): red border + soft red glow.
   Only applies after the user has interacted with the field so initial
   render doesn't look broken. */
.contact-field input:not(:placeholder-shown):invalid,
.contact-field select:not(:focus):invalid,
.contact-field textarea:not(:placeholder-shown):invalid {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba(214, 54, 56, .2);
}

/* Honeypot field — visually hidden but submitted by bots. */
.contact-form__hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.contact-field textarea { resize: vertical; min-height: 100px; }

.contact-field--checkbox {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
}
.contact-field--checkbox input { width: 16px; height: 16px; accent-color: var(--color-primary); margin: 0; }

.contact-form__actions {
	margin-top: clamp(18px, 2vw, 28px);
}

.contact-form__submit {
	min-width: 160px;
	padding: 14px 40px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
}

/* Mobile: collapse the contact form to one clean, uniform-width column.
   Covers all phones + small tablets (was 599px — too narrow, left the
   600-767px range on the staggered 2-column grid). */
@media (max-width: 767px) {
	.contact-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   404 — Page Not Found
============================================================ */
.section--404 {
	min-height: clamp(420px, 60vh, 700px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: clamp(60px, 8vw, 120px);
	background: var(--color-neutral-light);
}

.section--404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(12px, 1.4vw, 20px);
}

.section--404__code {
	margin: 0;
	font-size: clamp(96px, 18vw, 240px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
	letter-spacing: -0.04em;
}

.section--404__heading {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-dark);
	line-height: 1.2;
}

.section--404__description {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.6;
	color: var(--color-text);
}

.section--404__cta {
	margin-top: clamp(8px, 1vw, 16px);
}

/* ============================================================
   Cookie Consent Banner — bottom-right notification (no overlay)
============================================================ */
.cookie-consent {
	position: fixed;
	right: clamp(12px, 1.6vw, 24px);
	bottom: clamp(12px, 1.6vw, 24px);
	left: auto;
	z-index: 9000;
	width: min(460px, calc(100vw - 24px));
	pointer-events: none;
	animation: cookie-slide-in .35s cubic-bezier(.2, .9, .3, 1.1);
}

.cookie-consent[hidden] { display: none; }

@keyframes cookie-slide-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.cookie-consent__panel {
	pointer-events: auto;
	background: var(--color-white);
	border-radius: 10px;
	padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
	text-align: center;
}

.cookie-consent__text {
	margin: 0 0 clamp(16px, 2vw, 24px);
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.55;
	color: var(--color-text);
}

.cookie-consent__link {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cookie-consent__link:hover { opacity: .85; }

.cookie-consent__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(10px, 1.2vw, 16px);
}

.cookie-consent__btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	padding: 12px 28px;
	border-radius: 8px;
	font: 600 14px/1 var(--font-family);
	cursor: pointer;
	transition: opacity .2s ease, transform .15s ease, background .2s ease;
}

.cookie-consent__btn--reject {
	background: #E5E7EB;
	color: var(--color-dark);
}

.cookie-consent__btn--reject:hover { background: #D5D7DB; }

.cookie-consent__btn--accept {
	background: linear-gradient(90deg, var(--color-primary) 0%, #2A8FCF 100%);
	color: var(--color-white);
}

.cookie-consent__btn--accept:hover { opacity: .92; }

.cookie-consent__btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.cookie-consent__btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
	.cookie-consent__panel { padding: 22px 20px; }
	.cookie-consent__btn   { flex: 1 1 130px; padding: 12px 18px; }
}

/* ============================================================
   Entrance animation — IntersectionObserver based reveal-on-scroll.
   JS adds [data-reveal] to selected elements and toggles .is-visible
   when they enter the viewport.
============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity .8s cubic-bezier(.2, .8, .2, 1),
		transform .8s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-reveal-fade] {
	opacity: 0;
	transition: opacity .9s cubic-bezier(.2, .8, .2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal-fade].is-visible { opacity: 1; }

/* Honor users who prefer reduced motion: render everything in its final
   state without animation. */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal-fade] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ============================================================
   User-friendly hover effects across the site
============================================================ */

/* Buttons: gentle lift + scale */
.button {
	transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.button:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 18px rgba(1, 169, 130, .25);
}
.button:active { transform: translateY(0) scale(.98); }

/* Header CTA pill: stronger glow on hover */
.header-cta {
	transition: background-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.header-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(1, 169, 130, .3);
}

/* Submit (pill): soft glow + lift */
.contact-form__submit {
	transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease, box-shadow .2s ease;
}
.contact-form__submit:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 10px 24px rgba(1, 169, 130, .35);
}

/* Logos in header + footer: subtle zoom on hover */
.site-logo a,
.site-footer__branding .site-logo a {
	display: inline-block;
	transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.site-logo a:hover { transform: scale(1.06); }

/* About image: zoom-in inside its frame */
.section--about__media {
	overflow: hidden;
}
.section--about__media img {
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.section--about__media:hover img { transform: scale(1.04); }

/* Product image (HPE ProLiant DL380): float lift */
.section--product-feature__media img {
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.section--product-feature__media:hover img {
	transform: translateY(-4px) scale(1.03);
}

/* Resource cards already lift on hover; bump it slightly + add subtle scale */
.resource-card:hover {
	transform: translateY(-5px) scale(1.005);
	box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
}

/* Top-image inside a resource card: zoom slightly */
.resource-card__top-image img {
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.resource-card--top-image:hover .resource-card__top-image img {
	transform: scale(1.05);
}

/* Solution Feature benefit: icon scales + title shifts on hover */
.solution-benefit__title,
.solution-benefit__icon img {
	transition: transform .3s cubic-bezier(.2,.8,.2,1), color .25s ease;
}
.solution-benefit:hover .solution-benefit__icon img {
	transform: scale(1.18);
}
.solution-benefit:hover .solution-benefit__title {
	transform: translateX(2px);
	color: var(--color-primary);
}

/* Product Feature benefit row: checkmark wiggles, text shifts */
.product-benefit {
	transition: transform .25s ease;
}
.product-benefit__check {
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.product-benefit:hover .product-benefit__check {
	transform: scale(1.25) rotate(-8deg);
}
.product-benefit:hover {
	transform: translateX(3px);
}

/* Solution card logo: subtle zoom on hover */
.solution-card__logo {
	transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.solution-card__logo:hover {
	transform: scale(1.04);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
}

/* Footer copyright text: subtle highlight on hover */
.site-copyright {
	transition: color .2s ease;
}
.site-copyright:hover { color: var(--color-primary); }

/* Disable all the above for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.button,
	.header-cta,
	.contact-form__submit,
	.site-logo a,
	.section--about__media img,
	.section--product-feature__media img,
	.resource-card,
	.resource-card__top-image img,
	.solution-benefit__title,
	.solution-benefit__icon img,
	.product-benefit,
	.product-benefit__check,
	.solution-card__logo {
		transition: none !important;
		transform: none !important;
	}
}