:root {
  --brand: #c10037;
  --brand-dark: #700021;
  --brand-soft: #f5dfe6;
  --ink: #1c1719;
  --ink-soft: #51484c;
  --muted: #71676b;
  --canvas: #f7f3f4;
  --surface: #ffffff;
  --warm: #f0e9eb;
  --line: #ded4d7;
  /* --shell: min(1280px, calc(100vw - 80px)); */
  /* --shell: calc(100vw - 80px); */
  --shell: min(1600px, calc(100vw - 80px));
  --shadow: 0 24px 70px rgba(50, 14, 28, 0.1);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Tajawal, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;

}

body.nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.site-shell { width: var(--shell); margin-inline: auto; }

/* Header */
.utility-bar { height: 45px; border-bottom: 1px solid var(--line); background: #f1ebed; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
/* .utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: #f1ebed;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
} */


/* ============ Sticky header (appears on scroll) ============ */
.main-header { position: relative; }

.sticky-header {
	position: fixed; top: 0; inset-inline: 0; z-index: 70;
	height: 92px;
	background: rgba(255,255,255,.88);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	border-bottom: 1px solid rgba(222,212,215,.9);
	box-shadow: 0 12px 34px rgba(50,14,28,.12);
	transform: translateY(-105%);
	opacity: 0;
	visibility: hidden;
	transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility 0s linear .5s;
}
.sticky-header.is-visible,
body.nav-open .sticky-header {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility 0s;
}
.sticky-layout { height: 100%; display: flex; align-items: center; gap: 28px; }
.sticky-brand { flex: 0 0 auto; }
.sticky-brand img { height: 65px; width: 148px; transition: transform .3s ease; }
.sticky-brand:hover img { transform: scale(1.04); }

/* Nav: reuses .desktop-nav, only sizing and link underline are changed */
.sticky-nav { flex: 0 1 auto; gap: 22px; font-size: 13.5px; }
.sticky-nav > a { position: relative; padding: 8px 0; }
.sticky-nav > a::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
	background: var(--brand);
	transform: scaleX(0); transform-origin: center;
	transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.sticky-nav > a:hover::after { transform: scaleX(1); }

/* Dropdown panels open just under the slimmer bar */
.sticky-header .nav-popover { top: 64px; }
.sticky-header .publish-panel { top: 46px; }

.sticky-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.sticky-icon-btn {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.sticky-icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }

.sticky-lang {
	height: 40px; padding: 0 14px;
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--line); color: var(--ink);
	font-size: 13px; font-weight: 800; white-space: nowrap;
	transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
/* .sticky-lang svg { transition: transform .6s cubic-bezier(.16,1,.3,1); } */
.sticky-lang:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.sticky-lang:hover svg { transform: rotate(180deg); }

/* Publish button, slimmer version of the header one */
.sticky-header .publish-action { min-height: 40px; padding: 0 14px; font-size: 12.5px; }

.sticky-cta {
	position: relative; overflow: hidden;
	height: 40px; padding: 0 18px;
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--brand); color: #fff;
	font-size: 13px; font-weight: 800; white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sticky-cta::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
	transform: translateX(-140%);
	animation: sticky-shine 5s ease-in-out 2s infinite;
}
@keyframes sticky-shine { 0%, 60% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
.sticky-cta:hover { transform: translateY(-2px); 
				   /* box-shadow: 0 12px 26px rgba(198,0,61,.28); */
				  }
.sticky-cta svg { position: relative; transition: transform .2s ease; }
.sticky-cta:hover svg { transform: translateX(-3px); }
[dir="ltr"] .sticky-cta:hover svg { transform: translateX(3px); }
.sticky-cta-short { display: none; }

.sticky-menu-btn {
	display: none; width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
}


/* .header-action-group .publish-action {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
} */

/* Items fade in when the bar appears (backwards = no leftover transform, so dropdowns stay clean) */
.sticky-header.is-visible .sticky-nav > *,
.sticky-header.is-visible .sticky-actions > * { animation: sticky-item-in .5s cubic-bezier(.16,1,.3,1) backwards; }
.sticky-header.is-visible .sticky-nav > *:nth-child(1) { animation-delay: .08s; }
.sticky-header.is-visible .sticky-nav > *:nth-child(2) { animation-delay: .12s; }
.sticky-header.is-visible .sticky-nav > *:nth-child(3) { animation-delay: .16s; }
.sticky-header.is-visible .sticky-nav > *:nth-child(4) { animation-delay: .2s; }
.sticky-header.is-visible .sticky-actions > *:nth-child(1) { animation-delay: .1s; }
.sticky-header.is-visible .sticky-actions > *:nth-child(2) { animation-delay: .14s; }
.sticky-header.is-visible .sticky-actions > *:nth-child(3) { animation-delay: .18s; }
.sticky-header.is-visible .sticky-actions > *:nth-child(4) { animation-delay: .22s; }
.sticky-header.is-visible .sticky-actions > *:nth-child(5) { animation-delay: .26s; }
@keyframes sticky-item-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode */
:root[data-theme="dark"] .sticky-header { background: rgba(28,21,25,.88); border-color: var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
:root[data-theme="dark"] .sticky-header .publish-action { background: transparent; }
:root[data-theme="dark"] .sticky-icon-btn,
:root[data-theme="dark"] .sticky-lang,
:root[data-theme="dark"] .sticky-menu-btn { border-color: var(--line); }

/* Responsive: the full bar has a lot in it, so it slims down step by step */
@media (max-width: 1400px) {
	.sticky-layout { gap: 20px; }
	.sticky-nav { gap: 16px; font-size: 13px; }
	.sticky-cta-full { display: none; }
	.sticky-cta-short { display: inline; }
}
@media (max-width: 1280px) {
	.sticky-search { display: none; }
}
@media (max-width: 980px) {
	.sticky-header { height: 64px; }
	.sticky-menu-btn { display: inline-flex; }
	.sticky-cta { display: none; }
	.sticky-brand img { height: 34px; }
	/* Mobile menu lives outside the header, below the 64px sticky bar */
	.mobile-nav { inset: 64px 0 0; height: auto; z-index: 65; }
}
@media (max-width: 480px) {
	.sticky-lang span { display: none; }
	.sticky-lang { padding: 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.sticky-header, .sticky-header * { animation: none !important; transition-duration: .01ms !important; }
}



















.utility-layout { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.utility-layout nav, .utility-layout > div { display: flex; align-items: center; gap: 24px; }
.utility-layout a { transition: color .2s ease; font-size:14px;}
.utility-layout a:hover { color: var(--brand); }
.utility-layout > div a { display: inline-flex; align-items: center; gap: 6px; }
.utility-layout > div span { width: 1px; height: 14px; background: #cbbfc3; }
.utility-layout button { border: 0; background: transparent; padding: 0; cursor: pointer; font-size: 12px; }

.main-header { position: sticky; top: 0px; z-index: 50; height: 90px; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(222,212,215,.9); backdrop-filter: blur(14px); }
.header-layout { height: 100%; display: grid; grid-template-columns: 158px 1fr auto; align-items: center; gap: 34px; }
.site-brand img { width: 148px; height: 65px; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-start; gap: 26px; height: 100%; font-size: 16px; font-weight: 700; white-space: nowrap; }
.desktop-nav > a, .desktop-nav summary { transition: color .2s ease; }
.desktop-nav > a:hover, .desktop-nav summary:hover { color: var(--brand); }
.desktop-nav details { position: relative; height: 100%; display: flex; align-items: center; }
.desktop-nav summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px; height: 100%; }
.desktop-nav summary::-webkit-details-marker { display: none; }
.nav-popover { position: absolute; inset-inline-start: 0; top: 72px; min-width: 300px; padding: 22px; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.nav-popover p { margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 800; }
.nav-popover a { padding: 10px 0; border-top: 1px solid #eee7e9; font-size: 14px; }
.nav-popover a:first-of-type { border-top: 0; }
.nav-products { min-width: 380px; }
.nav-products a { display: grid; gap: 2px; }
.nav-products a span { color: var(--muted); font-size: 12px; font-weight: 500; }
.header-action-group { display: flex; align-items: center; gap: 9px; }
.publish-action, .primary-action { min-height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--brand); font-size: 13px; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.publish-action { color: var(--brand); background: #fff; }
.primary-action { color: #fff; background: var(--brand); }
/* .publish-action:hover, .primary-action:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(151,0,45,.18); } */
.publish-action:hover { background: #fff7f9; }
.primary-action:hover { background: #a90033; }
.publish-menu { position: relative; }
.publish-menu summary { list-style: none; cursor: pointer; }
.publish-menu summary::-webkit-details-marker { display: none; }
.publish-menu[open] .publish-action { background: #fff7f9; }
.publish-menu[open] .publish-action svg { transform: rotate(180deg); }
.publish-panel { position: absolute; inset-inline-end: 0; top: 57px; width: 330px; padding: 19px; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.publish-panel > p { margin: 0 0 7px; color: var(--brand); font-size: 11px; font-weight: 800; }
.publish-panel > a { padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #eee7e9; }
.publish-panel > a span { display: grid; gap: 2px; }
.publish-panel > a b { font-size: 14px; }
.publish-panel > a small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.55; }
.publish-panel > a svg { flex: 0 0 auto; color: var(--brand); }
.mobile-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.mobile-nav { display: none; }

/* Hero */
.hero-section { position: relative; min-height: 640px; padding: 0; background: #3c001a; color: #fff; overflow: hidden; }
.hero-backdrop, .hero-shade { position: absolute; inset: 0; width: 84%; height: 95%; }
.hero-backdrop { object-fit: cover; 
	/* object-position: center 25%;   */
/* center 47% , ok and width:100% ; height: 100%; */ }
.hero-shade { background: linear-gradient(90deg, rgba(24,7,14,.08) 0%, rgba(55,0,24,.25) 42%, rgba(91,0,37,.89) 73%, rgba(63,0,27,.98) 100%); }
.hero-layout { position: relative; z-index: 1; min-height: 640px; display: flex;
   align-items: center; 
   justify-content: flex-start; }
.hero-copy { width: min(610px, 52%); padding: 64px 0 100px; }
.eyebrow { margin: 0 0 22px; color: var(--brand); font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.hero-section .eyebrow { color: #f5a7be; }
.hero-copy h1 { margin: 0; max-width: 600px; font-size: clamp(47px, 4.4vw, 61px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }

[dir="ltr"] .hero-copy h1 {
  font-size: clamp(40px, 2.5vw, 55px); 
}
/* [dir="ltr"] .hero-copy h1 {
  font-size: clamp(37px, 1.2vw, 55px); 
} */
.hero-copy h1 em { display: block; color: #ffc1d4; font-style: normal; }
.hero-copy > span { display: block; max-width: 585px; margin-top: 40px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.85; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; }
.text-action { display: inline-flex; padding-top:10px; align-items: center; gap: 7px; color: var(--brand-dark); font-size: 14px; font-weight: 800; border-bottom: 1px solid rgba(112,0,33,.35); padding-bottom: 3px; }
.text-action svg { transition: transform .2s ease; }
.text-action:hover svg { transform: translateX(-4px); }
.hero-section .primary-action { background: #fff; border-color: #fff; color: var(--brand-dark); }
.hero-section .primary-action:hover { background: #f8edf0; }
.hero-section .text-action { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.hero-trust { margin-top: 42px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.3); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hero-trust div { display: grid; gap: 2px; }
.hero-trust b { font-size: 14px; }
.hero-trust small { color: rgba(255,255,255,.67); font-size: 13px; }

/* Journey gateway */
.journey-section { position: relative; z-index: 4; margin-top: -20px; padding: 25px; display: grid; grid-template-columns: 190px 1fr; gap: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 55px rgba(47,15,27,.08); }
.journey-intro { padding: 12px 5px; }
.journey-intro p, .leadership-intro > p, .request-layout p, .about-story p, .about-purpose p, .operating-model header p, .about-sectors p, .about-cta p { margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 800; }
.journey-intro h2 { margin: 0; font-size: 23px; line-height: 1.35; }
.journey-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); }
.journey-grid a { position: relative; min-height: 175px; padding: 19px 17px 17px; border-inline-start: 1px solid var(--line); transition: background .2s ease, color .2s ease; }
.journey-grid a:first-child { border-inline-start: 0; }
.journey-grid a:hover { background: var(--brand); color: #fff; }
.journey-grid a > span { color: var(--brand); font: 700 11px Arial, sans-serif; }
.journey-grid a:hover > span, .journey-grid a:hover p { color: rgba(255,255,255,.78); }
.journey-grid h3 { margin: 22px 0 7px; font-size: 16px; line-height: 1.4; }
.journey-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.journey-grid svg { position: absolute; inset-inline-end: 15px; bottom: 14px; }

/* Shared editorial sections */
.products-section, .services-section, .insights-section { padding: 98px 0; }
.products-section { background: var(--canvas); }
.services-section { background: #efe8ea; overflow: hidden; }
.services-section { padding-bottom: 86px; }
.editorial-heading { width: min(920px, 100%); margin: 0 0 36px; margin-inline-end: auto; padding-inline-start: 24px; border-inline-start: 3px solid var(--brand); }
.editorial-kicker { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.editorial-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(198,0,61,.28); color: var(--brand); background: rgba(255,255,255,.45); }
.editorial-label { display: flex; align-items: baseline; gap: 10px; }
.editorial-label small { color: var(--brand); font: 700 10px Arial, sans-serif; }
.editorial-label b {
					color: #c10037; 
					/* color: var(--brand-dark);  */
					font-size: 25px; }
.editorial-heading h2 { margin: 0; 
					   /* max-width: 820px;  */
					   font-size: clamp(34px, 3vw, 42px); line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.editorial-summary { max-width: 720px; margin: 13px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; text-wrap: pretty; }

/* Product experience */
.product-experience { display: grid; grid-template-columns: 270px 1fr; min-height: 650px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.product-selector { padding: 18px; display: flex; flex-direction: column; gap: 7px; background: #21171b; color: #fff; }
.product-selector > button { width: 100%; min-height: 105px; padding: 17px 15px; display: grid; grid-template-columns: 28px 1fr 18px; gap: 8px; align-items: center; text-align: start; border: 1px solid rgba(255,255,255,.1); background: transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.product-selector > button:hover, .product-selector > button.is-active { background: #710022; border-color: #a91a47; }
.product-selector > button > span { color: #dca2b4; font: 700 11px Arial, sans-serif; }
.product-selector button div { display: grid; gap: 3px; }
.product-selector b { font-size: 15px; }
.product-selector small { color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.45; }
.product-selector .video-trigger { margin-top: auto; min-height: 82px; grid-template-columns: 30px 1fr; }
.video-trigger > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.product-stage { position: relative; min-width: 0; padding: 42px 48px 36px; display: grid; grid-template-columns: 1fr; gap: 25px; align-content: start; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fff 74%, #fbf8f9 100%); }
.product-copy { max-width: 880px; }
.product-copy > p { margin: 0 0 13px; display: flex; align-items: center; gap: 6px; color: var(--brand); font-size: 12px; font-weight: 800; }
.product-copy h3 { margin: 0; max-width: 760px; font-size: clamp(28px, 2.6vw, 32px); line-height: 1.4; letter-spacing: -.012em; text-wrap: balance; }
.product-copy > span { display: block; max-width: 70ch; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.product-search { margin-top: 24px; }
.product-search label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.product-search > div { min-height: 60px; padding: 6px 7px 6px 14px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid #d8cdd1; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.product-search > div:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(198,0,61,.08); }
.product-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.product-search button { min-width: 148px; padding-inline: 17px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: var(--brand); color: #fff; cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 800; transition: background .2s ease, opacity .2s ease; }
.product-search button:hover:not(:disabled) { background: #a90033; }
.product-search button:disabled { opacity: .42; cursor: not-allowed; }
.product-helper { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.product-launch { margin-top: 24px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #d8cdd1; background: #fbf8f9; }
.product-launch > span { color: var(--muted); font-size: 12px; }
.product-launch a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
.product-message { display: block; margin-top: 11px; color: var(--brand); }
.product-interface { position: relative; display: block; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #d8cdd1; box-shadow: 0 16px 42px rgba(48,12,27,.11); }
.interface-top { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #e8e0e3; }
.interface-top span { width: 6px; height: 6px; border-radius: 50%; background: #d7cdd0; }
.interface-top span:first-child { background: var(--brand); }
.interface-top b { margin-inline-start: auto; color: var(--muted); font-size: 9px; }
.product-interface img { width: 100%; height: 410px; object-fit: cover; object-position: top; transition: transform .45s ease, filter .3s ease; }
.interface-open { position: absolute; z-index: 2; inset: 34px 0 58px; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(48, 9, 24, .74); color: #fff; opacity: 0; font-size: 14px; font-weight: 800; transition: opacity .25s ease; }
.product-interface:hover .interface-open, .product-interface:focus-visible .interface-open { opacity: 1; }
.product-interface:hover img { transform: scale(1.012); filter: saturate(.82); }
.interface-caption { min-height: 58px; padding: 11px 14px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.interface-caption b { color: var(--brand); font-size: 11px; }
.interface-caption span { color: var(--muted); font-size: 10px; }
.database-list { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.database-list span { padding-top: 11px; color: var(--brand-dark); font: 700 9px Arial, sans-serif; text-align: center; }

.video-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(20,10,14,.88); }
.video-modal > div { position: relative; width: min(980px, 92vw); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.video-modal iframe { width: 100%; height: 100%; border: 0; }
.video-modal button { position: absolute; z-index: 2; inset-inline-end: -12px; top: -50px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }

/* Services */
.services-rail-window { overflow: hidden; }
.services-track { display: flex; gap: 22px; transition: transform .55s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.service-card { flex: 0 0 calc(47% - 11px); min-width: 0; background: #fff; border: 1px solid #d9cdd1; }
.service-photo { position: relative; height: 272px; overflow: hidden; }
.service-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(39,8,20,.35), transparent 58%); }
.service-photo img { width: 100%; height: 130%; object-fit: cover; transition: transform .6s ease; }
.service-card:hover .service-photo img { transform: scale(1.025); }
.service-photo > span { position: absolute; z-index: 1; inset-inline-start: 20px; bottom: 18px; color: #fff; font: 700 12px Arial, sans-serif; }
.service-body { min-height: 300px; padding: 27px 28px 25px; }
.service-body > p { margin: 0; color: var(--brand); font-size: 20px; font-weight: 800; }
.service-body h3 { margin: 12px 0 13px; max-width: 500px; font-size: 26px; line-height: 1.38; }
.service-body > span { display: block; color: var(--muted); font-size: 14px; line-height: 1.8; }
.service-body > div { margin-top: 18px; display: flex; gap: 7px; flex-wrap: wrap; }
.service-body small { padding: 5px 9px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }
.service-body > a { margin-top: 23px; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 13px; font-weight: 800; }
.rail-controls { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.rail-controls > span { color: var(--brand-dark); font: 700 12px Arial, sans-serif; }
.rail-controls > div { display: flex; gap: 8px; }
.rail-controls button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #cfc1c6; background: transparent; cursor: pointer; }
.rail-controls button:disabled { opacity: .3; cursor: default; }
.rail-controls .rail-next svg { transform: rotate(180deg); }

/* Proof */
.proof-section { padding: 108px 0; background: #21161a; color: #fff; }
.proof-story { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: #1b1115; }
.proof-story > img, .proof-story-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.proof-story > img { object-fit: cover; object-position: center; }
/* .proof-story-shade { background: linear-gradient(90deg, rgba(25,12,17,.08) 0%, rgba(28,9,17,.25) 43%, rgba(45,7,23,.93) 72%, rgba(37,8,19,.99) 100%); } */
/* .proof-story-shade {
  background: linear-gradient(
    270deg,
    rgba(25, 12, 17, .08) 0%,
    rgba(28, 9, 17, .25) 43%,
    rgba(45, 7, 23, .93) 72%,
    rgba(37, 8, 19, .99) 100%
  );
} */

/* 
html[dir="rtl"] .proof-story-shade {
  background: linear-gradient(
    90deg,
    rgba(25, 12, 17, .08) 0%,
    rgba(28, 9, 17, .25) 43%,
    rgba(45, 7, 23, .93) 72%,
    rgba(37, 8, 19, .99) 100%
  );
} */


@media (max-width: 680px) {
  .proof-story { display: block; min-height: 0; background: #1b1115; }
  .proof-story > img {
    position: static;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: 90% center; /* adjust to where the people are in the photo */
  }
  .proof-story-shade,
  html[dir="rtl"] .proof-story-shade { display: none; }
  .proof-copy { width: 100%; 
	padding: 28px 24px 36px;
 }
}


.proof-copy { position: relative; z-index: 1; width: min(590px, 52%); padding: 58px; }
.proof-copy > p { margin: 0 0 15px; color: #f19ab5; font-size: 20px; font-weight: 800; }
.proof-copy h2 { margin: 0; font-size: clamp(38px, 3.6vw, 50px); line-height: 1.24; letter-spacing: -.025em; }
.proof-copy > span { display: block; margin-top: 22px; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.9; }
.proof-signals { margin-top: 30px; padding-top: 21px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid rgba(255,255,255,.2); }
.proof-signals div { display: grid; gap: 2px; }
.proof-signals b { color: #fff; font-size: 14px; }
.proof-signals small { color: rgba(255,255,255,.58); font-size: 11px; }
.proof-copy > a { margin-top: 28px; display: inline-flex; align-items: center; gap: 7px; color: #f4b1c5; border-bottom: 1px solid rgba(244,177,197,.42); padding-bottom: 3px; font-size: 13px; font-weight: 800; }

.internal-page .proof-grid article p,
article.stat-block p {
	color: var(--ink-soft);
}






.proof-grid { gap:30px;margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.proof-grid article { min-height: 200px; padding: 27px 30px; border-inline-start: 1px solid rgba(255,255,255,.14); }
.proof-grid article:first-child { border-inline-start: 0; }
.proof-grid span { color: #f1a0b8; font: 700 11px Arial, sans-serif; }
.proof-grid h3 { margin: 34px 0 10px; font-size: 24px; }
.proof-grid p { margin: 0; max-width: 310px; color: white; font-size: 14px; line-height: 1.8; }
.sector-strip { padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 17px 30px; color: rgba(255,255,255,.68); font-size: 13px; }
.sector-strip b { color: #fff; }

/* Leadership */
.leadership-section { padding: 110px 0; background: var(--canvas); }
.leadership-layout { display: grid; grid-template-columns: .74fr 1.26fr; gap: 72px; align-items: start; }
.leadership-intro h2 { margin: 0; font-size: clamp(34px, 3vw, 44px); line-height: 1.3; }
.leadership-intro > span { display: block; margin: 22px 0 28px; max-width: 480px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.leadership-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.leadership-list article { background: #fff; border: 1px solid var(--line); }
.leadership-list article > div { position: relative; height: 300px; overflow: hidden; background: #ebe4e6; }
.leadership-list img { width: 100%; height: 100%; object-fit: cover;
	 /* filter: saturate(.74);  */
	 transition: filter .3s ease; }
.leadership-list article:hover img { filter: saturate(1); }
.leadership-list small { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 4px 7px; background: rgba(255,255,255,.9); color: var(--brand); font-size: 9px; font-weight: 800; }
.leadership-list h3 { margin: 17px 17px 4px; font-size: 17px; line-height: 1.4; }


.leadership-list p { margin: 0 17px 18px; color: #333333; font-size: 14px; }

/* Insights */
.insights-section { background: #fff; }
.insights-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.insight-feature { position: relative; min-height: 440px; overflow: hidden; }
.insight-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29,8,16,.9), rgba(29,8,16,0) 66%); }
.insight-feature img { width: 100%; height: 100%; object-fit: cover; }
.insight-feature > div { position: absolute; z-index: 1; inset-inline: 32px; bottom: 28px; color: #fff; }
.insight-feature span, .insight-stack span { color: #c10037; font-size: 25px; font-weight: 800; }
.insight-feature h3 { margin: 9px 0 16px; max-width: 600px; font-size: 28px; line-height: 1.4; }
.insight-feature b, .insight-stack b { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.insight-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.insight-stack a { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; background: var(--canvas); border: 1px solid var(--line); }
.insight-stack h3 { margin: 13px 0 auto; font-size: 22px; line-height: 1.45; }
.insight-stack b { margin-top: 24px; color: var(--brand); }




/* Footer */
/* .site-footer { padding: 72px 0 24px; background: #1e1519; color: #fff; }
.footer-layout { display: grid; grid-template-columns: 1.55fr repeat(4, 1fr); gap: 52px; }
.footer-brand img { width: 158px; 
filter: brightness(0) invert(1);
}
.footer-brand p { max-width: 310px; margin: 22px 0 18px; color: rgba(255,255,255,.57); font-size: 13px; line-height: 1.8; }
.footer-brand a { display: inline-flex; align-items: center; gap: 7px; color: #f0a0b8; font-size: 12px; font-weight: 800; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.footer-links b { margin-bottom: 11px; color: #fff; font-size: 13px; }
.footer-links a, .footer-links span { color: rgba(255,255,255,.55); transition: color .2s ease; }
.footer-links a:hover { color: #fff; }
.footer-meta { margin-top: 58px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.38); font-size: 10px; }
.footer-meta div { display: flex; gap: 20px; } */



/* ============ Footer: redesigned ============ */
.site-footer { position: relative; background: #1a1216; color: #fff; overflow: hidden; }
/* .site-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 45%, #ff8fa8 100%);
} */
.footer-top { padding: 66px 0 54px; }
.footer-layout { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 52px; }

.footer-brand img { width: 158px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 300px; margin: 22px 0 20px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.85; }
.footer-search-link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 16px;
	border: 1px solid rgba(255,255,255,.16);
	color: #f0a0b8; font-size: 12px; font-weight: 800;
	transition: background .2s ease, border-color .2s ease;
}
.footer-search-link:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.32); }

.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; }
.footer-links b {
	position: relative;
	margin-bottom: 6px;
	padding-bottom: 12px;
	color: #fff; font-size: 13px; font-weight: 800;
	letter-spacing: .02em; text-transform: uppercase;
}
.footer-links b::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 26px; height: 2px; background: var(--brand); }
.footer-links a, .footer-links span { color: rgba(255,255,255,.55); transition: color .2s ease, padding-inline-start .2s ease; }
.footer-links a:hover { color: #fff; padding-inline-start: 3px; }

.footer-meta {
	padding: 22px 0;
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	border-top: 1px solid rgba(255,255,255,.1);
	background: #150f12;
	color: rgba(255,255,255,.4);
	font-size: 11px;
}
.footer-meta-links { display: flex; gap: 20px; }
.footer-meta-links a { color: rgba(255,255,255,.4); transition: color .2s ease; }
.footer-meta-links a:hover { color: #fff; }

.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 50%;
	color: rgba(255,255,255,.65);
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 15px; height: 15px; }

@media (max-width: 980px) {
	.footer-layout { grid-template-columns: 1.5fr repeat(2, 1fr); }
	.footer-meta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 680px) {
	.footer-top { padding: 54px 0 40px; }
	.footer-layout { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-contact { grid-column: auto; }
	.footer-meta { align-items: flex-start; }
	.footer-social { order: -1; }
}



/* About page */
.about-hero { padding: 78px 0 96px; background: #fbf9f9; }
.about-hero-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about-hero h1 { margin: 0; max-width: 650px; font-size: clamp(45px, 4.2vw, 59px); line-height: 1.15; letter-spacing: -.03em; }
.about-hero div > span { display: block; margin-top: 25px; max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.9; }
.about-hero figure { position: relative; margin: 0; height: 520px; overflow: hidden; }
.about-hero figure img { width: 100%; height: 100%; object-fit: cover; }
.about-hero figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 18px 22px; display: flex; justify-content: space-between; background: rgba(31,11,18,.86); color: #fff; }
.about-hero figcaption span { color: rgba(255,255,255,.65); font-size: 11px; }
.about-story { padding: 108px 0; display: grid; grid-template-columns: 300px minmax(0, 760px); gap: 90px; }
.story-date { padding-inline-start: 25px; border-inline-start: 3px solid var(--brand); display: flex; flex-direction: column; }
.story-date b { color: var(--brand); font: 700 62px Arial, sans-serif; line-height: 1; }
.story-date span { margin-top: 12px; color: var(--muted); font-size: 13px; }
.about-story h2, .about-purpose h2, .operating-model h2, .about-sectors h2, .about-cta h2 { margin: 0; font-size: clamp(34px, 3.3vw, 46px); line-height: 1.3; }
.about-story div:last-child > span { display: block; margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.95; }
.about-purpose { padding: 60px 0; background: #6f0021; color: #fff; }
.about-purpose-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.about-purpose p { color: #f0a2b9; }
.about-purpose-stack { border-top: 1px solid rgba(255,255,255,.24); }
.about-purpose-stack article { padding: 24px 0; display: grid; grid-template-columns: 100px 1fr; gap: 25px; border-bottom: 1px solid rgba(255,255,255,.24); }
.about-purpose-stack b { color: #f2a5bc; }
.about-purpose-stack span { color: rgba(255,255,255,.75); font-size: 15px; }
.operating-model { padding: 110px 0; }
.operating-model header { display: grid; grid-template-columns: 190px 1fr .8fr; gap: 32px; align-items: end; }
.operating-model header > span { color: var(--muted); font-size: 14px; }
.operating-model > div { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #fff; }
.operating-model article { min-height: 260px; padding: 28px; border-inline-start: 1px solid var(--line); }
.operating-model article:first-child { border-inline-start: 0; }
.operating-model article > span { color: var(--brand); font: 700 11px Arial, sans-serif; }
.operating-model h3 { margin: 55px 0 10px; font-size: 25px; }
.operating-model article p { margin: 0; color: var(--muted); font-size: 13px; }
.about-sectors { padding: 100px 0; background: #efe8ea; }
.about-sectors-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.about-sectors-layout > div:last-child { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #d1c4c8; }
.about-sectors-layout span { padding: 19px 0; border-bottom: 1px solid #d1c4c8; font-weight: 700; }
.about-leadership { padding: 105px 0; }
.about-leadership > header { max-width: 790px; }
.about-leadership > header p, .about-projects header p { margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 800; }
.about-leadership > header h2, .about-projects header h2 { margin: 0; font-size: clamp(34px, 3.3vw, 46px); line-height: 1.3; }
.about-leadership > header span { display: block; margin-top: 17px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.about-leadership > div { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-leadership article { background: #fff; border: 1px solid var(--line); }
.about-leadership article > div { position: relative; height: 330px; overflow: hidden; background: #e6dde0; }
.about-leadership article img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
.about-leadership article small { position: absolute; inset-inline-start: 12px; bottom: 12px; padding: 4px 8px; color: var(--brand); background: rgba(255,255,255,.9); font-size: 9px; font-weight: 800; }
.about-leadership article p { margin: 20px 22px 5px; color: var(--brand); font-size: 11px; font-weight: 800; }
.about-leadership article h3 { margin: 0 22px 23px; font-size: 20px; line-height: 1.45; }
.about-projects { padding: 100px 0; background: #21161a; color: #fff; }
.about-projects header { max-width: 780px; }
.about-projects header p { color: #f0a0b8; }
.about-projects .site-shell > div { margin-top: 42px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.18); border-inline-end: 1px solid rgba(255,255,255,.18); }
.about-projects article { min-height: 235px; padding: 30px; border-bottom: 1px solid rgba(255,255,255,.18); border-inline-start: 1px solid rgba(255,255,255,.18); }
.about-projects article > span { color: #f0a0b8; font: 700 10px Arial, sans-serif; }
.about-projects h3 { margin: 42px 0 10px; font-size: 23px; }
.about-projects article p { margin: 0; color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.8; }
.about-cta { padding: 72px 0; background: #fff; }
.about-cta > div { display: flex; justify-content: space-between; align-items: center; gap: 40px; }

/* Request and publication forms */
.request-hero { padding: 74px 0 110px; background: linear-gradient(180deg, #fbf9f9 0%, #f4eef0 100%); }
.request-page-layout { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr); gap: clamp(48px, 6vw, 86px); align-items: start; }
.request-copy { position: sticky; top: 122px; }
.request-copy h1 { margin: 0; max-width: 620px; font-size: clamp(39px, 3.6vw, 52px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.request-copy > span { display: block; margin-top: 23px; max-width: 590px; color: var(--muted); font-size: 15px; line-height: 1.95; text-wrap: pretty; }
.request-assurance { margin-top: 38px; border-top: 1px solid var(--line); }
.request-assurance article { padding: 18px 0; display: grid; grid-template-columns: 112px 1fr; gap: 18px; border-bottom: 1px solid var(--line); }
.request-assurance b { color: var(--brand); font-size: 13px; }
.request-assurance span { color: var(--muted); font-size: 12px; line-height: 1.7; }
.request-form { min-width: 0; padding: clamp(30px, 3.2vw, 44px); display: grid; gap: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(50, 14, 28, .09); }
.form-step { display: grid; gap: 20px; }
.form-step[hidden] { display: none; }
.form-heading { margin-bottom: 3px; padding-bottom: 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.form-heading > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--brand); font: 700 11px Arial, sans-serif; }
.form-heading > div { display: grid; gap: 1px; }
.form-heading b { font-size: 20px; }
.form-heading small { color: var(--muted); font-size: 11px; font-weight: 500; }
.field-label { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.field-label b { color: var(--brand); font-size: 12px; }
.field-label small { padding: 1px 6px; color: var(--muted); background: #f0eaec; font-size: 9px; font-weight: 600; }
.request-form label { min-width: 0; display: grid; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.request-form input, .request-form select, .request-form textarea { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #d7ccd0; border-radius: 0; background: #fbf9f9; color: var(--ink); outline: 0; font-size: 14px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.request-form input, .request-form select { min-height: 50px; }
.request-form textarea { resize: vertical; line-height: 1.75; }
.request-form input::placeholder, .request-form textarea::placeholder { color: #93878c; font-weight: 400; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(198,0,61,.08); }
.request-form input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180,35,24,.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.form-row-single > label { grid-column: 1 / -1; }
.field-divider { margin-top: 5px; display: flex; align-items: center; gap: 14px; color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.field-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.field-help, .field-error { display: block; font-size: 10px; font-weight: 500; line-height: 1.6; }
.field-help { color: var(--muted); }
.field-error { color: #b42318; }

/* .request-form {
	margin: 48px 0 64px;
	padding: 40px;
	background: #fff;
	border: 1px solid var(--line);
}
@media (max-width: 720px) {
	.request-form { padding: 24px; margin: 32px 0 48px; }
} */



.form-progress { display: grid; gap: 9px; }
.form-progress > div { height: 3px; overflow: hidden; background: #eee6e9; }
.form-progress > div span { height: 100%; display: block; background: var(--brand); transition: width .35s ease; }
.form-progress p { margin: 0; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; }
.form-progress p b { color: var(--brand); font: 700 10px Arial, sans-serif; }
.form-progress p span { font-size: 11px; font-weight: 800; }
.form-progress p small { color: var(--muted); font-size: 10px; }

.path-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.path-selector > button { position: relative; min-height: 130px; padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; text-align: start; border: 1px solid #d7ccd0; background: #fbf9f9; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.path-selector > button:hover { transform: translateY(-2px); border-color: #b99da7; background: #fff; }
.path-selector > button.is-selected { border-color: var(--brand); background: #fff6f8; box-shadow: inset 0 -3px var(--brand); }
.path-selector > button > svg { color: var(--brand); }
.path-selector > button > span { display: grid; gap: 5px; }
.path-selector b { font-size: 17px; }
.path-selector small { color: var(--muted); font-size: 11px; line-height: 1.6; }
/* .service-type-selector { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.service-type-selector button { min-height: 108px; padding: 16px; display: flex; align-items: flex-start; flex-direction: column; gap: 7px; text-align: start; border: 0; border-inline-start: 1px solid var(--line); background: #fff; cursor: pointer; transition: color .2s ease, background .2s ease; }
.service-type-selector button:first-child { border-inline-start: 0; }
.service-type-selector button:hover { background: #fbf4f6; }
.service-type-selector button.is-selected { background: var(--brand-dark); color: #fff; }
.service-type-selector b { font-size: 13px; }
.service-type-selector span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.service-type-selector button.is-selected span { color: rgba(255,255,255,.66); } */

.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 10px; padding: 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.choice-card { min-height: 58px; padding: 12px 14px; display: flex !important; grid-template-columns: none !important; align-items: center; gap: 10px !important; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); background: #fff; cursor: pointer; }
.choice-card:nth-child(odd) { border-inline-start: 0; }
.choice-card:nth-last-child(-n + 2) { border-bottom: 0; }
.choice-card:hover { background: #fbf5f7; }
.choice-card input, .consent-check input { width: 17px; min-width: 17px; min-height: 17px; height: 17px; padding: 0; accent-color: var(--brand); }
.choice-card span { color: var(--ink-soft); font-size: 11px; font-weight: 650; }
.selected-service-summary { padding: 15px 17px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-inline-start: 3px solid var(--brand); background: #f8f1f3; }
.selected-service-summary span { color: var(--muted); font-size: 10px; }
.selected-service-summary b { font-size: 13px; }
.selected-service-summary button { padding: 5px 0; border: 0; border-bottom: 1px solid rgba(198,0,61,.35); background: transparent; color: var(--brand); cursor: pointer; font-size: 10px; font-weight: 800; }

.consent-check { padding: 15px 16px; display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 11px !important; border: 1px solid var(--line); background: #fbf9f9; cursor: pointer; }
.consent-check span { color: var(--ink-soft); font-size: 11px; font-weight: 600; line-height: 1.75; }
.consent-check small { color: var(--muted); font-size: 9px; }
.optional-consent { border-style: dashed; }
.delivery-note { padding: 15px 16px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(198,0,61,.22); background: #fff7f9; color: var(--brand-dark); }
.delivery-note svg { margin-top: 2px; flex: 0 0 auto; }
.delivery-note > span { min-width: 0; display: grid; gap: 2px; color: var(--ink-soft); overflow-wrap: anywhere; font-size: 10px; line-height: 1.7; }
.delivery-note b { color: var(--brand-dark); }
.delivery-note small { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font: 600 9px Arial, sans-serif; }
.delivery-note i { color: var(--brand); font-style: normal; }
.form-navigation { padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-form .primary-action { border: 0; cursor: pointer; }
.request-form .primary-action:focus-visible, .secondary-action:focus-visible, .path-selector button:focus-visible, .service-type-selector button:focus-visible { outline: 3px solid rgba(198,0,61,.22); outline-offset: 3px; }
.secondary-action { min-height: 46px; padding: 0 18px; border: 1px solid #cdbfc4; background: #fff; color: var(--brand-dark); cursor: pointer; font-size: 12px; font-weight: 800; transition: border-color .2s ease, background .2s ease; }
.secondary-action:hover { border-color: var(--brand); background: #fff7f9; }

.publication-form { gap: 19px; }
.file-field { padding: 18px; border: 1px dashed #c5b4ba; background: #fbf8f9; }
.file-field input[type="file"] { padding: 9px; background: #fff; cursor: pointer; }
.file-field input[type="file"]::file-selector-button { min-height: 34px; margin-inline-end: 10px; padding: 0 13px; border: 0; background: var(--brand-dark); color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
.file-field > small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.7; }
.electronic-declaration { padding: 22px; border: 1px solid #cdbfc4; border-inline-start: 4px solid var(--brand); background: linear-gradient(135deg, #fff 0%, #faf3f5 100%); }
.electronic-declaration::before { content: "نص الإقرار"; display: block; margin-bottom: 8px; color: var(--brand); font-size: 10px; font-weight: 800; }
.electronic-declaration p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 2; }
.consent-stamp { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 15px; background: #23181c; color: #fff; }
.consent-stamp span { color: rgba(255,255,255,.58); font-size: 10px; }
.consent-stamp b { font-size: 11px; text-align: end; }
.form-submit { min-height: 52px; margin-top: 3px; width: 100%; }
.form-submit:disabled, .request-form button:disabled { cursor: wait; opacity: .62; }
.form-submit-error { padding: 13px 15px; border: 1px solid #d92d20; background: #fff4f2; color: #9b1c13; font-size: 12px; font-weight: 700; line-height: 1.75; }
.form-honeypot { position: absolute !important; inset-inline-start: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.form-success { min-height: 470px; padding: 52px 44px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-success > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 27px; }
.form-success p { margin: 19px 0 7px; color: var(--brand); font-size: 11px; font-weight: 800; }
.form-success h2 { margin: 0; max-width: 560px; font-size: 29px; line-height: 1.4; }
.form-success > div { margin-top: 12px; max-width: 590px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.form-success > small { margin-top: 22px; max-width: 560px; color: #877a7f; font-size: 10px; line-height: 1.7; }
.form-success .secondary-action { margin-top: 25px; }

/* Internal pages */
.internal-page { min-height: 100vh; background: var(--canvas); }
.breadcrumbs { min-height: 42px; padding-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.breadcrumbs > span { display: inline-flex; align-items: center; gap: 7px; }
.breadcrumbs b { color: #b8aaaf; font-weight: 400; }
.breadcrumbs em { color: var(--ink-soft); font-style: normal; }
.breadcrumbs a:hover { color: var(--brand); }

.internal-hero { padding: 0 0 15px; background: linear-gradient(180deg, #fbf9f9 0%, #f3edef 100%); border-bottom: 1px solid var(--line); }
.internal-hero-layout { 
	/* min-height: 250px; */
	 padding-top: 36px; display: grid;
   /* grid-template-columns: .92fr 1.08fr;
    gap: clamp(48px, 6vw, 84px); padding: 0 0 82px; */
     align-items: center; 
    
}
.internal-hero-copy { min-width: 0; }
.internal-hero-copy h1 { margin: 0;
  /* max-width: 833px; */
   font-size: clamp(39px, 3.6vw, 54px); line-height: 1.19; letter-spacing: -.028em; text-wrap: balance; }
.internal-hero-copy > span { display: block; max-width: 700px; margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.95; text-wrap: pretty; }
.internal-hero-media { position: relative; margin: 0; height: 430px; overflow: hidden; border: 1px solid #d8ccd0; background: #ded5d8; box-shadow: var(--shadow); }



.internal-listing-card {
	display: block;
	padding: 30px 32px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.internal-listing-card:hover { box-shadow: var(--shadow); }
.internal-listing-card h3 { margin: 0 0 10px; color: var(--ink); font-size: 22px; line-height: 1.35; }
.internal-listing-card p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.internal-listing-card .internal-listing-link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 700; font-size: 13px; }


.internal-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43, 8, 22, .18), transparent 48%); pointer-events: none; }
.internal-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.internal-hero-media > span { position: absolute; z-index: 1; inset-inline-start: 18px; bottom: 16px; padding: 6px 9px; background: rgba(255,255,255,.92); color: var(--brand); font-size: 10px; font-weight: 800; }
/* .internal-hero-plain { padding-bottom: 76px; } 28*/
.internal-hero-plain { padding-bottom: 12px; }
/* .internal-hero-plain .internal-hero-layout { min-height: 360px; grid-template-columns: minmax(0, 820px); } */
.internal-hero-plain .internal-hero-layout { min-height: auto; grid-template-columns: 1fr; }
.internal-actions { margin-top: 31px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.internal-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

.internal-section-heading { max-width: 820px; }
.internal-section-heading > p { margin: 0 0 11px; color: var(--brand); font-size: 12px; font-weight: 800; }
.internal-section-heading h2 { margin: 0; font-size: clamp(32px, 2.8vw, 43px); line-height: 1.32; letter-spacing: -.02em; text-wrap: balance; }
.internal-section-heading > span { display: block; max-width: 760px; margin-top: 15px; color: var(--muted); font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.internal-section-heading.is-centered { margin-inline: auto; text-align: center; }
.internal-section-heading.is-centered > span { margin-inline: auto; }

.internal-intro { padding: 20px 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: start; }
.audience-panel { padding: 28px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.audience-panel > b { display: block; margin-bottom: 20px; color: var(--brand-dark); font-size: 13px; }
.audience-panel > div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.audience-panel span { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 700; }

.internal-features { padding: 50px 0; background: #eee7e9; }
.internal-feature-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #d7cbd0; background: #fff; }
.internal-feature-grid article { min-height: 230px; padding: 30px 32px; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.internal-feature-grid article:nth-child(odd) { border-inline-start: 0; }
.internal-feature-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.internal-feature-grid article > span { color: var(--brand); font: 700 11px Arial, sans-serif; }
.internal-feature-grid h3 { margin: 35px 0 10px; font-size: 23px; line-height: 1.4; }
.internal-feature-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

.outcomes-section { padding: 95px 0; background: #21161a; color: #fff; }
.outcomes-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
.outcomes-section .internal-section-heading > p { color: #f0a0b8; }
.outcomes-section .internal-section-heading > span { color: rgba(255,255,255,.62); }
.outcomes-layout ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.outcomes-layout li { min-height: 72px; padding: 17px 0; display: grid; grid-template-columns: 50px 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); }
.outcomes-layout li span { color: #f0a0b8; font: 700 11px Arial, sans-serif; }
.outcomes-layout li b { font-size: 16px; line-height: 1.55; }

.process-section { padding: 100px 0; }
.internal-feature-grid.is-numbered { grid-template-columns: repeat(4, 1fr); }
.internal-feature-grid.is-numbered article { min-height: 260px; border-bottom: 0; border-inline-start: 1px solid var(--line); }
.internal-feature-grid.is-numbered article:first-child { border-inline-start: 0; }
.internal-feature-grid.is-numbered h3 { margin-top: 48px; }

.internal-cta { padding: 72px 0; background: #710022; color: #fff; }
.internal-cta > div { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.internal-cta p { margin: 0 0 8px; color: #efa1b8; font-size: 11px; font-weight: 800; }
.internal-cta h2 { margin: 0; max-width: 780px; font-size: clamp(30px, 2.7vw, 41px); line-height: 1.3; }
.internal-cta span { display: block; max-width: 760px; margin-top: 10px; color: rgba(255,255,255,.68); font-size: 13px; }
.internal-cta .primary-action { flex: 0 0 auto; background: #fff; border-color: #fff; color: var(--brand-dark); }

.index-section { padding: 100px 0; }
.index-grid { margin-top: 45px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.index-card { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.index-card:hover { transform: translateY(-4px); border-color: #c5b2b9; box-shadow: 0 22px 55px rgba(47,15,27,.09); }
.index-card-media { height: 230px; overflow: hidden; background: #ded5d8; }
.index-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.index-card:hover .index-card-media img { transform: scale(1.025); }
.index-card-copy { min-height: 300px; padding: 26px 27px; display: flex; flex-direction: column; align-items: flex-start; }
.index-card-copy > span { color: var(--brand); font-size: 11px; font-weight: 800; }
.index-card-copy h2 { margin: 12px 0 11px; font-size: 25px; line-height: 1.38; }
.index-card-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.index-card-copy > b { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 12px; }
.database-index-grid { margin-top: 45px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.database-index-grid .index-card { border-top: 0; border-inline-end: 0; }
.database-index-grid .index-card-copy { min-height: 275px; }
.sector-index-grid { grid-template-columns: repeat(2, 1fr); }
.sector-index-grid .index-card { display: grid; grid-template-columns: .78fr 1.22fr; }
.sector-index-grid .index-card-media { height: 100%; min-height: 320px; }
.sector-index-grid .index-card-copy { min-height: 320px; }
.publish-index-grid { grid-template-columns: repeat(2, 1fr); }

/* News */
.news-section { padding: 96px 0 110px; }
.featured-news { margin-top: 43px; min-height: 490px; display: grid; grid-template-columns: 1.15fr .85fr; background: #21161a; color: #fff; }
.featured-news > div { min-height: 490px; overflow: hidden; }
.featured-news img { width: 100%; height: 100%; object-fit: cover; }
.featured-news article { padding: 54px; display: flex; flex-direction: column; align-items: flex-start; }
.featured-news article > span { color: #f0a0b8; font-size: 11px; font-weight: 800; }
.featured-news h2 { margin: 25px 0 15px; font-size: 34px; line-height: 1.35; }
.featured-news p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.85; }
.featured-news b { margin-top: auto; padding-top: 28px; color: #f0a0b8; font-size: 12px; }
.news-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-grid > a { min-width: 0; background: #fff; border: 1px solid var(--line); transition: transform .22s ease, box-shadow .22s ease; }
.news-grid > a:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(47,15,27,.08); }
.news-grid > a > div { height: 265px; overflow: hidden; }
.news-grid img { width: 100%; height: 100%; object-fit: cover; }
.news-grid article { min-height: 300px; padding: 24px; display: flex; align-items: flex-start; flex-direction: column; }
.news-grid span { color: var(--brand); font-size: 10px; font-weight: 800; }
.news-grid small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.news-grid h2 { margin: 17px 0 10px; font-size: 20px; line-height: 1.5; }
.news-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.news-grid b { margin-top: auto; padding-top: 20px; color: var(--brand); font-size: 11px; }

.article-page { padding: 0 0 110px; background: #fbf9f9; }
.article-shell > .breadcrumbs { margin-bottom: 58px; }
.article-page header { width: min(900px, 100%); margin-inline: auto; text-align: center; }
.article-page header > span { color: var(--brand); font-size: 12px; font-weight: 800; }
.article-page h1 { margin: 22px 0 18px; font-size: clamp(39px, 4vw, 57px); line-height: 1.25; text-wrap: balance; }
.article-page header p { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.9; }
.article-page figure { margin: 55px 0 0; height: 600px; overflow: hidden; }
.article-page figure img { width: 100%; height: 100%; object-fit: cover; }
/* .article-body {  margin: 55px auto 0; } */
.article-body > p { margin: 0 0 22px; color: var(--ink-soft); font-size: 17px; line-height: 2.05; }
.article-body aside { margin-top: 42px; padding: 28px; display: grid; gap: 7px; border-inline-start: 4px solid var(--brand); background: #f1e9ec; }
.article-body aside b { color: var(--brand-dark); }
.article-body aside span { color: var(--muted); font-size: 13px; line-height: 1.8; }

/* Training */
.training-section { padding: 96px 0 110px; }
.training-grid { margin-top: 43px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.training-grid > a { min-height: 330px; padding: 30px; display: flex; align-items: flex-start; flex-direction: column; border-bottom: 1px solid var(--line); border-inline-start: 1px solid var(--line); background: #fff; transition: background .2s ease, color .2s ease; }
.training-grid > a:hover { background: #700021; color: #fff; }
.training-grid > a > span { color: var(--brand); font: 700 11px Arial, sans-serif; }
.training-grid > a > small { margin-top: 28px; color: var(--muted); font-size: 10px; font-weight: 700; }
.training-grid h2 { margin: 10px 0 12px; font-size: 27px; line-height: 1.4; }
.training-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.training-grid b { margin-top: auto; padding-top: 20px; color: var(--brand); font-size: 11px; }
.training-grid > a:hover > span, .training-grid > a:hover > small, .training-grid > a:hover p, .training-grid > a:hover b { color: rgba(255,255,255,.72); }
.training-detail { padding: 0 0 95px; background: linear-gradient(180deg, #fbf9f9, #f1eaec); }
.training-detail-layout { min-height: 570px; padding-top: 62px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 85px; align-items: center; }
.training-detail h1 { margin: 0; font-size: clamp(40px, 4vw, 58px); line-height: 1.22; }
.training-detail div > span { display: block; margin-top: 23px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.training-detail dl { margin: 38px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.training-detail dl div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.training-detail dt { color: var(--muted); font-size: 10px; }
.training-detail dd { margin: 3px 0 0; font-size: 13px; font-weight: 800; }
.training-detail aside { padding: 38px; background: #21161a; color: #fff; }
.training-detail aside > b { color: #f0a0b8; font-size: 12px; }
.training-detail ol { margin: 25px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.training-detail li { min-height: 67px; padding: 15px 0; display: grid; grid-template-columns: 44px 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 14px; font-weight: 700; }
.training-detail li span { color: #f0a0b8; font: 700 10px Arial, sans-serif; }
.training-note { padding: 90px 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.training-note div > p { margin: 0 0 10px; color: var(--brand); font-size: 11px; font-weight: 800; }
.training-note h2 { margin: 0; font-size: 39px; line-height: 1.35; }
.training-note > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.95; }

/* Support, contact and clients */
.support-section { padding: 96px 0 110px; }
.support-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #fff; }
.support-grid article { min-height: 250px; padding: 27px; border-inline-start: 1px solid var(--line); }
.support-grid article:first-child { border-inline-start: 0; }
.support-grid span { color: var(--brand); font: 700 11px Arial, sans-serif; }
.support-grid h2 { margin: 48px 0 10px; font-size: 21px; }
.support-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.support-form-layout { margin-top: 90px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 75px; align-items: start; }
.support-form-layout > div { position: sticky; top: 125px; }
.support-form-layout > div h2 { margin: 0; font-size: 38px; line-height: 1.35; }
.support-form-layout > div > span { display: block; margin-top: 16px; color: var(--muted); font-size: 13px; }
.compact-form { gap: 18px; }
.compact-success { min-height: 500px; padding: 45px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.compact-success > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #22c55e; font-size: 26px; }
.compact-success p { margin: 18px 0 7px; color: var(--brand); font-size: 11px; font-weight: 800; }
.compact-success h2 { margin: 0; max-width: 560px; font-size: 29px; line-height: 1.4; }
.compact-success small { margin-top: 15px; max-width: 580px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.compact-success button { margin-top: 24px; }

.contact-section { padding: 95px 0 110px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.contact-info { padding: 36px; background: #21161a; color: #fff; }
.contact-info .eyebrow { color: #f0a0b8; }
.contact-info h2 { margin: 0; font-size: 34px; }
.contact-info dl { margin: 34px 0 0; }
.contact-info dl div { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.17); }
.contact-info dt { color: rgba(255,255,255,.48); font-size: 10px; }
.contact-info dd { margin: 4px 0 0; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.7; }

.reach-section { padding: 95px 0; }
.reach-section > div { margin-top: 42px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: #fff; }
.reach-section article { min-height: 190px; padding: 28px; display: flex; justify-content: flex-end; flex-direction: column; border-inline-start: 1px solid var(--line); }
.reach-section article:first-child { border-inline-start: 0; }
.reach-section article b { color: var(--brand); font: 700 44px Arial, sans-serif; }
.reach-section article span { color: var(--muted); font-size: 12px; }
.client-groups { padding: 95px 0; background: #eee7e9; }
.client-groups .site-shell > div { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d2c5ca; border-inline-end: 1px solid #d2c5ca; }
.client-groups article { min-height: 180px; padding: 27px; border-bottom: 1px solid #d2c5ca; border-inline-start: 1px solid #d2c5ca; }
.client-groups article span { color: var(--brand); font: 700 10px Arial, sans-serif; }
.client-groups article h2 { margin: 45px 0 0; font-size: 21px; }

/* Legal and empty states */
.legal-content { padding: 30px 0 100px; width: min(1000px, var(--shell)); }
.legal-content h2 { margin: 38px 0 9px; font-size: 24px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.95; }
.legal-content aside { margin-top: 45px; padding: 20px 22px; border-inline-start: 4px solid var(--brand); background: #f0e8eb; color: var(--brand-dark); font-size: 12px; font-weight: 700; }
.faq-section { padding-top: 40px; padding-bottom: 110px; }
.faq-list { margin-top: 42px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 94px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 30px; align-items: center; gap: 18px; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: var(--brand); font: 700 10px Arial, sans-serif; }
.faq-list summary > b { font-size: 18px; line-height: 1.65; }
.faq-list summary > i { color: var(--brand); font: 300 28px Arial, sans-serif; font-style: normal; transition: transform .2s ease; }
.faq-list details[open] summary > i { transform: rotate(45deg); }
.faq-list details > p { margin: -6px 60px 30px 48px; max-width: 850px; color: var(--muted); font-size: 15px; line-height: 1.95; }
.not-found { min-height: 650px; padding: 100px 0; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.not-found > span { color: var(--brand); font: 700 88px Arial, sans-serif; line-height: 1; }
.not-found p { margin: 20px 0 7px; color: var(--brand); font-size: 12px; font-weight: 800; }
.not-found h1 { margin: 0; max-width: 700px; font-size: 38px; line-height: 1.4; }
.not-found div { margin-top: 28px; display: flex; gap: 10px; }

/* Motion */
.motion-enabled [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .48s ease, transform .48s ease; }
.motion-enabled [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.hero-copy { animation: hero-enter .55s ease both; }
.hero-backdrop { animation: hero-image-enter .9s ease both; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-image-enter { from { opacity: .82; transform: scale(1.012); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 1180px) {
  :root { --shell: min(100% - 56px, 1100px); }
  .header-layout { grid-template-columns: 150px 1fr auto; gap: 22px; }
  .desktop-nav { gap: 17px; font-size: 13px; }
  .publish-menu { display: none; }
  .hero-copy { width: min(610px, 58%); }
  .journey-section { grid-template-columns: 1fr; }
  .journey-intro { display: flex; align-items: center; justify-content: space-between; }
  .journey-grid a { min-height: 165px; }
  .product-stage { padding: 34px; gap: 24px; }
  .leadership-layout { grid-template-columns: 1fr; gap: 42px; }
  .leadership-intro { max-width: 700px; }
}

@media (max-width: 980px) {
  .utility-bar { display: none; }
  .main-header { height: 74px; }
   /* body { padding-top: 0; }
  .utility-bar { display: none; }
  .main-header { top: 0; height: 74px; } */
  .header-layout { grid-template-columns: 1fr auto auto; }
  .site-brand img { width: 132px; }
  .desktop-nav { display: none; }
  .header-action-group .primary-action { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .mobile-nav { position: fixed; height: 100vh; inset: 74px 0 0; padding: 28px; background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; display: block; }
  .mobile-nav.is-open { transform: translateX(0); }
  .mobile-nav nav { display: grid; }
  .mobile-nav nav a { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; }
  .mobile-nav-group { padding: 20px 0 8px; color: var(--brand); font-size: 12px; font-weight: 800; }
  .mobile-nav nav a.mobile-nav-sub { padding: 11px 17px; background: #f8f3f5; border-bottom: 1px solid #eadfe2; font-size: 15px; }
  .mobile-nav nav a.mobile-nav-sub + .mobile-nav-sub { margin-bottom: 7px; }
  .mobile-nav .primary-action { margin-top: 24px; width: 100%; }
  .hero-copy { width: min(620px, 66%); }
  .about-hero-layout, .request-page-layout { grid-template-columns: 1fr; }
  .journey-grid { grid-template-columns: repeat(3, 1fr); }
  .journey-grid a:nth-child(4) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .journey-grid a:nth-child(5) { border-top: 1px solid var(--line); }
  .product-experience { grid-template-columns: 1fr; }
  .product-selector { display: grid; grid-template-columns: repeat(3, 1fr); }
  .product-selector > button { min-height: 90px; }
  .product-selector .video-trigger { grid-column: 1 / -1; margin-top: 0; }
  .product-stage { min-height: 0; }
  .proof-copy { width: min(600px, 64%); padding: 46px; }
  .insights-grid { grid-template-columns: 1fr; }
  .insight-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .request-layout { grid-template-columns: 1fr; gap: 36px; }
  .footer-layout { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .footer-contact { grid-column: 2; }
  .about-story, .about-purpose-layout, .about-sectors-layout { grid-template-columns: 1fr; gap: 48px; }
  .operating-model header { grid-template-columns: 150px 1fr; }
  .operating-model header > span { grid-column: 2; }
  .operating-model > div { grid-template-columns: repeat(2, 1fr); }
  .operating-model article:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .operating-model article:nth-child(4) { border-top: 1px solid var(--line); }
  .request-copy { position: static; }
  .request-page-layout { grid-template-columns: 1fr; gap: 46px; }
  .request-copy { max-width: 760px; }
  .request-assurance { max-width: 690px; }
}

@media (max-width: 680px) {
  :root { --shell: calc(100% - 32px); }
  .hero-section, .hero-layout { min-height: 720px; }
  .hero-section { padding: 0; }
  .hero-layout { align-items: flex-end; }
  .hero-backdrop { object-position: 36% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(60,0,27,.99) 0%, rgba(82,0,35,.92) 52%, rgba(40,7,20,.35) 79%, rgba(20,9,13,.08) 100%); }
  .hero-copy { width: 100%; padding: 90px 0 88px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy > span { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-trust { grid-template-columns: 1fr; gap: 15px; margin-top: 35px; }
  .journey-section { margin-top: -26px; padding: 16px; }
  .journey-intro { display: block; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid a { min-height: 138px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .journey-grid a:first-child { border-top: 0; }
  .journey-grid h3 { margin-top: 15px; }
  .products-section, .services-section, .insights-section, .leadership-section { padding: 72px 0; }
  .editorial-heading { margin-bottom: 30px; padding-inline-start: 17px; }
  .editorial-kicker { margin-bottom: 13px; }
  .editorial-icon { width: 34px; height: 34px; }
  .editorial-heading h2 { font-size: 32px; }
  .editorial-summary { font-size: 14px; }
  .product-selector { grid-template-columns: 1fr; }
  .product-selector > button { min-height: 76px; }
  .product-stage { padding: 28px 20px 30px; grid-template-columns: 1fr; min-height: 0; }
  .product-copy h3 { font-size: 28px; }
  .product-search > div { padding: 9px; grid-template-columns: 20px minmax(0, 1fr); }
  .product-search button { grid-column: 1 / -1; min-height: 46px; }
  .product-launch { align-items: stretch; flex-direction: column; }
  .product-interface { display: none; }
  .database-list { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  /* .service-card { flex-basis: 84%; } */

	/* .services-rail-window { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.services-track { transform: none !important; } */
	.service-card { flex-basis: 84%; scroll-snap-align: start; }
  .service-photo { height: 225px; }
  .service-body { min-height: 330px; padding: 24px 22px; }
  .service-body h3 { font-size: 23px; }
  .proof-section { padding: 78px 0; }
  .proof-story { min-height: 700px; align-items: flex-end; }
  .proof-story > img { object-position: 90% center; }
  .proof-story-shade { background: linear-gradient(0deg, rgba(32,10,19,.99) 0%, rgba(45,7,23,.94) 56%, rgba(28,9,17,.28) 82%, rgba(25,12,17,.05) 100%); }
  .proof-copy { width: 100%; padding: 55px 24px 36px; }
  .proof-copy h2 { font-size: 35px; }
  .proof-signals { gap: 14px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid article { min-height: 190px; border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .proof-grid article:first-child { border-top: 0; }
  .proof-grid h3 { margin-top: 25px; }
  .leadership-list { grid-template-columns: 1fr; }
  .leadership-list article { display: grid; grid-template-columns: 130px 1fr; grid-template-rows: auto auto; }
  .leadership-list article > div { grid-row: 1 / 3; height: 180px; }
  .leadership-list h3 { align-self: end; }
  .leadership-list p { align-self: start; }
  .insight-feature { min-height: 390px; }
  .insight-feature h3 { font-size: 23px; }
  .insight-stack { grid-template-columns: 1fr; }
  .request-layout h2 { font-size: 34px; }
  .footer-layout { grid-template-columns: 1fr 1fr; gap: 38px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: auto; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 12px; }
  .about-hero { padding: 54px 0 72px; }
  .about-hero h1 { font-size: 40px; }
  .about-hero figure { height: 390px; }
  .about-story, .operating-model { padding: 78px 0; }
  .story-date b { font-size: 52px; }
  .about-purpose { padding: 78px 0; }
  .about-purpose-stack article { grid-template-columns: 75px 1fr; }
  .operating-model header { grid-template-columns: 1fr; gap: 8px; }
  .operating-model header > span { grid-column: auto; }
  .operating-model > div { grid-template-columns: 1fr; }
  .operating-model article { min-height: 210px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .operating-model article:first-child { border-top: 0; }
  .operating-model h3 { margin-top: 35px; }
  .about-cta > div { align-items: flex-start; flex-direction: column; }
  .request-hero { padding: 55px 0 80px; }
  .request-copy h1 { font-size: 39px; }
  .request-form { padding: 25px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .path-selector { grid-template-columns: 1fr; }
  .path-selector > button { min-height: 112px; }
  .service-type-selector { grid-template-columns: 1fr; }
  .service-type-selector button { min-height: 88px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .service-type-selector button:first-child { border-top: 0; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { border-inline-start: 0; }
  .choice-card:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .choice-card:last-child { border-bottom: 0; }
  .selected-service-summary { grid-template-columns: 1fr auto; }
  .selected-service-summary span { grid-column: 1 / -1; }
  .consent-stamp { align-items: flex-start; flex-direction: column; }
  .consent-stamp b { text-align: start; }
  .delivery-note { padding: 14px; }
  .form-navigation { align-items: stretch; }
  .form-navigation .primary-action, .form-navigation .secondary-action { flex: 1; }
  .form-success { min-height: 420px; padding: 42px 23px; }
}

@media (max-width: 980px) {
  .internal-hero-layout { grid-template-columns: 1fr; min-height: 0; padding-top: 46px; }
  .internal-hero-media { height: 420px; }
  .internal-hero-plain .internal-hero-layout { min-height: 310px; }
  .internal-intro, .outcomes-layout, .training-note, .contact-section, .support-form-layout { grid-template-columns: 1fr; gap: 46px; }
  .support-form-layout > div { position: static; }
  .internal-feature-grid.is-numbered { grid-template-columns: repeat(2, 1fr); }
  .internal-feature-grid.is-numbered article:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .internal-feature-grid.is-numbered article:nth-child(4) { border-top: 1px solid var(--line); }
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .index-grid-products .index-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 10px); }
  .database-index-grid { grid-template-columns: repeat(2, 1fr); }
  .sector-index-grid .index-card { grid-template-columns: 1fr; }
  .sector-index-grid .index-card-media { min-height: 230px; height: 230px; }
  .featured-news { grid-template-columns: 1fr; }
  .featured-news > div { min-height: 390px; }
  .featured-news article { min-height: 350px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .article-page figure { height: 470px; }
  .training-detail-layout { grid-template-columns: 1fr; gap: 50px; padding-top: 45px; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .support-grid article:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .support-grid article:nth-child(4) { border-top: 1px solid var(--line); }
  .reach-section > div { grid-template-columns: repeat(2, 1fr); }
  .reach-section article:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .reach-section article:nth-child(4) { border-top: 1px solid var(--line); }
  .client-groups .site-shell > div { grid-template-columns: repeat(2, 1fr); }
  .about-leadership > div { grid-template-columns: repeat(3, 1fr); }
  .about-leadership article > div { height: 270px; }
}

@media (max-width: 680px) {
  .breadcrumbs { padding-top: 13px; }
  /* .internal-hero { padding-bottom: 62px; } */
  .internal-hero-layout { gap: 38px; padding-top: 36px; }
  .internal-hero-copy h1 { font-size: 38px; }
  .internal-hero-copy > span { font-size: 15px; }
  .internal-hero-media { height: 300px; }
  .internal-actions { align-items: stretch; flex-direction: column; }
  .internal-actions > a { width: 100%; }
  .internal-section-heading h2 { font-size: 31px; }
  .internal-intro, .internal-features, .process-section, .index-section, .news-section, .training-section, .support-section, .reach-section, .client-groups, .contact-section, .faq-section { padding-top: 72px; padding-bottom: 76px; }
  .audience-panel > div { grid-template-columns: 1fr; }
  .internal-feature-grid { grid-template-columns: 1fr; }
  .internal-feature-grid article { min-height: 210px; border-inline-start: 0; border-bottom: 1px solid var(--line) !important; }
  .internal-feature-grid article:last-child { border-bottom: 0 !important; }
  .internal-feature-grid h3 { margin-top: 28px; }
  .outcomes-section { padding: 72px 0; }
  .outcomes-layout { gap: 38px; }
  .internal-feature-grid.is-numbered { grid-template-columns: 1fr; }
  .internal-feature-grid.is-numbered article { border-inline-start: 0; border-top: 1px solid var(--line); }
  .internal-feature-grid.is-numbered article:first-child { border-top: 0; }
  .internal-cta > div { align-items: flex-start; flex-direction: column; gap: 28px; }
  .internal-cta .primary-action { width: 100%; }
  .index-grid, .sector-index-grid, .publish-index-grid { grid-template-columns: 1fr; }
  .index-grid-products .index-card:last-child { grid-column: auto; max-width: none; }
  .index-card-media { height: 210px; }
  .index-card-copy { min-height: 270px; padding: 24px 22px; }
  .database-index-grid { grid-template-columns: 1fr; }
  .sector-index-grid .index-card { grid-template-columns: 1fr; }
  .featured-news > div { min-height: 280px; }
  .featured-news article { min-height: 360px; padding: 30px 24px; }
  .featured-news h2 { font-size: 27px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-grid > a > div { height: 230px; }
  .article-shell > .breadcrumbs { margin-bottom: 40px; }
  .article-page h1 { font-size: 37px; }
  .article-page figure { height: 320px; margin-top: 38px; }
  .article-body { margin-top: 38px; }
  .article-body > p { font-size: 16px; }
  .training-grid { grid-template-columns: 1fr; }
  .training-grid > a { min-height: 300px; }
  .training-detail-layout { min-height: 0; padding: 45px 0 20px; }
  .training-detail h1 { font-size: 38px; }
  .training-detail dl { grid-template-columns: 1fr; }
  .training-detail aside { padding: 28px 23px; }
  .training-note { padding: 72px 0; gap: 30px; }
  .training-note h2 { font-size: 32px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-grid article { min-height: 210px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .support-grid article:first-child { border-top: 0; }
  .support-grid h2 { margin-top: 30px; }
  .support-form-layout { margin-top: 65px; }
  .support-form-layout > div h2 { font-size: 32px; }
  .contact-info { padding: 28px 23px; }
  .reach-section > div { grid-template-columns: 1fr; }
  .reach-section article { min-height: 160px; border-inline-start: 0; border-top: 1px solid var(--line); }
  .reach-section article:first-child { border-top: 0; }
  .client-groups .site-shell > div { grid-template-columns: 1fr; }
  .about-leadership { padding: 76px 0; }
  .about-leadership > div, .about-projects .site-shell > div { grid-template-columns: 1fr; }
  .about-leadership article > div { height: 340px; }
  .legal-content { padding: 70px 0 85px; }
  .faq-list summary { min-height: 88px; grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 10px; }
  .faq-list summary > b { font-size: 16px; }
  .faq-list details > p { margin: -2px 40px 26px 34px; font-size: 14px; }
  .not-found h1 { font-size: 31px; }
  .not-found div { width: 100%; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .motion-enabled [data-reveal] { opacity: 1; transform: none; }
}
/* These css is added for the language  selector */
.lang-selector { display: inline-flex; gap: 10px; }
.lang-selector a { opacity: .55; }
.lang-selector a.is-active { opacity: 1; font-weight: 700; pointer-events: none; }


/* These css im adding for news.php ok for testign  */
:root{
  --news-ink: #1c1a19;
  --news-crimson: #C41E3A;
  --news-crimson-deep: #8e1029;
  --news-rule: #dfd7cb;
  --news-slate: #726b62;
  --news-card-bg: #fffdfa;
}

.news-grid-head{
  display:flex; align-items:center; gap:16px;
  margin:0 0 26px;
  color:var(--news-slate);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.news-grid-head::after{ content:""; flex:1; height:1px; background:var(--news-rule); }

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








.news-card{
  position: relative;
  background:var(--news-card-bg);
  border:1px solid var(--news-rule);
  display:flex; flex-direction:column;
  overflow:hidden;
  text-decoration:none; color:inherit;
  opacity: 0;
  transform: translateY(22px);
  animation: news-card-in .6s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
@keyframes news-card-in { to { opacity: 1; transform: translateY(0); } }

.news-card::before{
  content:"";
  position:absolute; inset-inline-start:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--news-crimson-deep), var(--news-crimson));
  transform:scaleX(0); transform-origin:inset-inline-start;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  z-index:2;
}
.news-card:hover::before{ transform:scaleX(1); }
.news-card:hover{
  border-color:var(--news-crimson);
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(47,15,27,.12);
}

.news-card-media{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.news-card-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(28,10,17,.28), transparent 55%);
  opacity:0; transition:opacity .3s ease;
}
.news-card:hover .news-card-media::after{ opacity:1; }
.news-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.news-card:hover .news-card-media img{ transform:scale(1.06); }

.news-card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.news-card-meta{
  display:flex; justify-content:space-between; gap:12px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--news-crimson-deep);
  border-bottom:1px dotted var(--news-rule);
  padding-bottom:10px; margin-bottom:10px;
}
.news-card-meta span:last-child{ color:var(--news-slate); white-space:nowrap; }

.news-card-body h3{ font-size:17px; line-height:1.4; margin:0 0 10px; transition:color .2s ease; }
.news-card:hover .news-card-body h3{ color:var(--news-crimson); }
.news-card-body p{
  font-size:14px; line-height:1.65; color:#5a5449; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-clamp:2;
}

.news-read-link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--news-ink);
  width:fit-content; padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease, gap .18s ease;
}
.news-card:hover .news-read-link{ color:var(--news-crimson); border-color:var(--news-crimson); gap:12px; }







/* .news-card{
  background:var(--news-card-bg);
  border:1px solid var(--news-rule);
  display:flex; flex-direction:column;
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.news-card:hover{ border-color:var(--news-crimson); transform:translateY(-3px); } */

/* .news-card--feature{
  grid-column:1 / -1;
  flex-direction:row;
}
.news-card--feature .news-card-media{ flex:1 1 50%; aspect-ratio:auto; }
.news-card--feature .news-card-body{ flex:1 1 50%; justify-content:center; }
.news-card--feature h3{ font-size:clamp(22px,2.6vw,32px); }
@media (max-width:920px){
  .news-card--feature{ flex-direction:column; }
} */

.news-card-media{ aspect-ratio:4/3; overflow:hidden; }
.news-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.news-card:hover .news-card-media img{ transform:scale(1.05); }

.news-card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.news-card-meta{
  display:flex; justify-content:space-between; gap:12px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--news-crimson-deep);
  border-bottom:1px dotted var(--news-rule);
  padding-bottom:10px; margin-bottom:10px;
}
.news-card-meta span:last-child{ color:var(--news-slate); white-space:nowrap; }

.news-card-body h3{ font-size:17px; line-height:1.4; margin:0 0 10px; }
.news-card-body p{
  font-size:14px; line-height:1.65; color:#5a5449; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden ;line-clamp: 2;
}

.news-read-link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--news-ink);
  width:fit-content; padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease, gap .18s ease;
}
.news-card:hover .news-read-link{ color:var(--news-crimson); border-color:var(--news-crimson); gap:12px; }

@media (max-width:920px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } }


/* These css im adding for news news-deail.php ok for testign  as a new design */

/* ---- Detail page: header meta ---- */
.article-meta{
  display:flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 16px;
}
.article-meta .cat{ color:var(--news-crimson-deep); }
.article-meta .dot{ width:4px; height:4px; background:var(--news-rule); border-radius:50%; }
.article-meta .date{ color:var(--news-slate); }
.article-title{
  font-size:clamp(28px,4vw,42px);
  line-height:1.2;
  font-weight:800;
  margin:0;
  max-width:18ch;
}

/* ---- Detail page: body ---- */
.article-shell{ margin:0 auto; padding:30px 0 50px; }

.article-media{ border:1px solid var(--news-rule); margin-bottom:40px; }
.article-media img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }

.article-body{ font-size:17px; line-height:1.85; color:#302c29;}
.article-body p{ margin:0 0 24px; }
/* .article-body p:first-of-type::first-letter{
  font-weight:800; font-size:3.2em; float:left; line-height:.85;
  padding-right:10px; padding-top:4px; color:var(--news-crimson);
} */
 /* .article-body p:first-of-type::first-letter {
	font-weight: 700;
	font-size: 1.4em;
	color: var(--brand);
} */

.article-footer{
  margin-top:48px; padding-top:24px;
  border-top:1px solid var(--news-rule);
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--news-ink); text-decoration:none;
  border-bottom:1px solid var(--news-ink); padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.back-link:hover{ color:var(--news-crimson); border-color:var(--news-crimson); }
.back-link svg{ transform:scaleX(-1); }

/* ---- Detail page: related strip ---- */
.related{ background:#fff; border-top:1px solid var(--news-rule); padding:64px 0 80px; margin-top:40px; }
.related-head{
  display:flex; align-items:center; gap:16px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--news-slate);
  margin-bottom:28px;
}
.related-head::after{ content:""; flex:1; height:1px; background:var(--news-rule); }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.rcard{
  background:var(--news-card-bg); border:1px solid var(--news-rule);
  display:flex; flex-direction:column; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease;
}
.rcard:hover{ border-color:var(--news-crimson); transform:translateY(-3px); }
.rcard-media{ aspect-ratio:4/3; overflow:hidden; }
.rcard-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.rcard:hover .rcard-media img{ transform:scale(1.05); }
.rcard-body{ padding:18px; }
.rcard-meta{
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--news-crimson-deep);
  border-bottom:1px dotted var(--news-rule);
  padding-bottom:9px; margin-bottom:9px;
  display:flex; justify-content:space-between;
}
.rcard-meta span:last-child{ color:var(--news-slate); }
.rcard h4{ font-size:15px; line-height:1.4; margin:0; font-weight:700; }

@media (max-width:920px){ .related-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .related-grid{ grid-template-columns:1fr; } }






/* csss rule for these hambwegfbe porpblem */

.internal-hero-plain .internal-hero-layout{
  display: block;
  position: static;
  transform: none;
  left: auto;
  right: auto;
  margin: 0 auto;
  max-width: 820px;
  padding: 0 40px;
  width: auto;
}

.internal-hero-plain .internal-hero-copy{
  position: static;
  transform: none;
  left: auto;
  margin: 0;
  width: auto;
  max-width: 100%;
}



/* csss rule for news-detail profesional design */

/* Article meta + title, sitting below the breadcrumb strip */
.article-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; }
.article-meta .cat { color: var(--brand); }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #c9bcc0; }
.article-meta .date { color: var(--muted); font-weight: 500; }
.article-title { margin: 0; max-width: 780px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }

/* Constrained, professional image size instead of full-width */
.article-media { max-width: 780px; margin: 8px auto 40px; }
.article-media img { width: 100%; height: 360px; object-fit: cover; display: block; border: 1px solid var(--line); }
@media (max-width: 720px) {
	.article-media img { height: 220px; }
}

.article-footer { max-width: 780px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 700; font-size: 14px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Related articles strip */
/* .related { padding: 64px 0; background: #f3edef; border-top: 1px solid var(--line); }
.related-head { margin: 0 0 28px; font-size: 22px; font-weight: 800; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rcard { display: block; background: #fff; border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: box-shadow .2s ease; }
.rcard:hover { box-shadow: var(--shadow); }
.rcard-media img { width: 100%; height: 160px; object-fit: cover; display: block; }
.rcard-body { padding: 18px 20px; }
.rcard-meta { display: flex; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.rcard-body h4 { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
@media (max-width: 900px) {
	.related-grid { grid-template-columns: 1fr; }
} */


.related { padding: 64px 0; background: #f3edef; border-top: 1px solid var(--line); }
.related-head { position: relative; margin: 0 0 32px; padding-bottom: 16px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); }
.related-head::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 46px; height: 3px; background: var(--brand); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.rcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.rcard-media { aspect-ratio: 16 / 10; background: #f3edef; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.rcard-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rcard-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.rcard-meta span:first-child { color: var(--brand); }
.rcard-meta span:not(:first-child)::before { content: "·"; margin-inline-end: 8px; color: #c9bcc0; }
.rcard-body h4 { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
@media (max-width: 900px) {
	.related-grid { grid-template-columns: 1fr; }
}



.signature-field { margin-block: 22px; }
.signature-pad-wrap {
	position: relative;
	max-width: 600px;
	border: 1.5px dashed var(--line, #d7d7d7);
	border-radius: 10px;
	background: #fcfcfb;
	overflow: hidden;
	transition: border-color .15s ease;
}
.signature-pad-wrap:focus-within,
.signature-pad-wrap:hover { border-color: #c10037; }
.signature-pad {
	display: block;
	width: 100%;
	height: 180px;
	touch-action: none;
	cursor: crosshair;
	background: transparent;
	position: relative;
	z-index: 2;
}
.signature-baseline {
	position: absolute;
	left: 24px; right: 24px; bottom: 40px;
	border-bottom: 1.5px solid #e2ddd6;
	z-index: 1;
}
.signature-placeholder {
	position: absolute;
	inset-inline-start: 24px;
	bottom: 44px;
	color: #b9b3aa;
	font-size: 14px;
	pointer-events: none;
	z-index: 1;
	user-select: none;
}
.signature-clear {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	padding: 5px 11px;
	border: 1px solid var(--line, #ddd);
	border-radius: 20px;
	background: #fff;
	color: #6a6a6a;
	cursor: pointer;
	z-index: 3;
	transition: color .15s ease, border-color .15s ease;
}
.signature-clear:hover { color: #c10037; border-color: #c10037; }


/* 
.mobile-nav-utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.mobile-nav-utility a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
}
.mobile-lang-selector { display: inline-flex; gap: 10px; }
.mobile-lang-selector a { opacity: .55; color: var(--ink); }
.mobile-lang-selector a.is-active { opacity: 1; font-weight: 700; pointer-events: none; color: var(--brand); } */


.mobile-nav-utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	background: #f9f5f6;
	border-bottom: 1px solid var(--line);
}
.mobile-nav-utility > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--brand);
	font-size: 13px;
	font-weight: 700;
}
.mobile-lang-selector {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	/* border-radius: 20px; */
	padding: 1px;
	flex-shrink: 0;
}
.mobile-lang-selector a {
	padding: 5px 12px;
	/* border-radius: 16px; */
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	transition: background .15s ease, color .15s ease;
}
.mobile-lang-selector a.is-active {
	background: var(--brand);
	color: #fff;
	pointer-events: none;
}




/* 
.feature-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  padding: 10px;
  display: block;
  background: var(--brand-soft);
  border: 1px solid rgba(198, 0, 61, .15);
  border-radius: 50%;
  object-fit: contain;
  transition: background .25s ease, transform .25s ease;
}

.internal-feature-grid article:hover .feature-icon {
  background: var(--brand);
  transform: translateY(-3px) scale(1.03);
}
 */




.feature-cards-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-cards-grid article {
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-cards-grid article:hover {
  transform: translateY(-4px);
  border-color: #d8bcc5;
  box-shadow: 0 18px 40px rgba(47, 15, 27, .09);
}

.feature-cards-grid article > span {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font: 700 14px Arial, sans-serif;
}

.feature-cards-grid h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.4;
}

.feature-cards-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.feature-icon {
  width: 110px;
  height: 110px;
  margin-bottom: 20px;
  display: block;
  object-fit: contain;
}


/* .feature-icon {
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  padding: 12px;
  display: block;
  background: var(--brand-soft);
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 8px 20px rgba(198, 0, 61, .12);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
} */


/* .feature-cards-grid article:hover .feature-icon {
  background: var(--brand);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 26px rgba(198, 0, 61, .22);
} */

@media (max-width: 980px) {
  .feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .feature-cards-grid { grid-template-columns: 1fr; }
}





.feature-cards-grid article {
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.feature-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  display: block;
  object-fit: contain;
}

.feature-cards-grid h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.4;
}

.feature-cards-grid p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.feature-cards-grid article {
  display: flex;
  flex-direction: column;
  height: 100%;
}



.about-stats-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}
.about-stats-grid article {
  min-height: 170px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-inline-start: 1px solid var(--line);
}
.about-stats-grid article:first-child { border-inline-start: 0; }
.about-stats-grid b { color: var(--brand); font-size: 26px; font-weight: 800; line-height: 1.3; }
.about-stats-grid span { color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 680px) {
  .about-stats-grid { grid-template-columns: 1fr; }
  .about-stats-grid article { border-inline-start: 0; border-top: 1px solid var(--line); }
  .about-stats-grid article:first-child { border-top: 0; }
}

.story-date b { font-size: 44px; }



/* Stats */
.reach-stats-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}
.reach-stats-grid article {
  min-height: 160px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-inline-start: 1px solid var(--line);
}
.reach-stats-grid article:first-child { border-inline-start: 0; }
.reach-stats-grid b { color: var(--brand); font-size: 34px; font-weight: 800; }
.reach-stats-grid span { color: var(--muted); font-size: 12px; line-height: 1.7; }

/* Logo marquee */
.logo-marquee-section { padding: 20px 0; background: var(--canvas); overflow: hidden; }
.logo-marquee { overflow: hidden; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; align-items: center; gap: 56px; width: max-content; padding: 22px 0; }
.logo-track-a { animation: marquee-left 46s linear infinite; }
.logo-track-b { animation: marquee-right 46s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; height: 56px; display: flex; align-items: center; }
/* .logo-item img { max-height: 56px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter .25s ease; }
.logo-item img:hover { filter: grayscale(0) opacity(1); } */

.logo-item img { max-height: 76px; max-width: 190px; width: auto; height: auto; object-fit: contain; opacity: .92; transition: opacity .25s ease, transform .25s ease; }
.logo-item img:hover { opacity: 1; transform: scale(1.04); }


@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 980px) {
  .reach-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .reach-stats-grid article:nth-child(3) { border-inline-start: 0; border-top: 1px solid var(--line); }
  .reach-stats-grid article:nth-child(4) { border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .reach-stats-grid { grid-template-columns: 1fr; }
  .reach-stats-grid article { border-inline-start: 0; border-top: 1px solid var(--line); }
  .reach-stats-grid article:first-child { border-top: 0; }
  .logo-track { gap: 36px; }
  .logo-item { height: 42px; }
  .logo-item img { max-height: 42px; max-width: 110px; }
}

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



.logo-track { display: flex; align-items: center; gap: 56px; width: max-content; padding: 22px 0; }
.logo-track-a { animation: marquee-left 90s linear infinite; }
.logo-track-b { animation: marquee-right 90s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; height: 76px; display: flex; align-items: center; }
.logo-item img { max-height: 76px; max-width: 190px; width: auto; height: auto; object-fit: contain; opacity: .92; transition: opacity .25s ease, transform .25s ease; }
.logo-item img:hover { opacity: 1; transform: scale(1.04); }

   /* .logo-track-a { animation: marquee-left 30s linear infinite; }
   .logo-track-a { animation: marquee-left 30s linear infinite; }
   .logo-track-b { animation: marquee-right 30s linear infinite; } */

@media (max-width: 680px) {
  .logo-track { gap: 36px; }
  .logo-item { height: 52px; }
  .logo-item img { max-height: 52px; max-width: 130px; }
}



/* .logo-marquee-section {
  padding: 90px 0;
  background: var(--canvas);
  overflow: hidden;
  direction: ltr;   

} */


.sector-groups-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.sector-groups-grid article {
  padding: 30px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  transition: background .2s ease, transform .2s ease;
}

.sector-groups-grid article:hover {
  background: #fff6f8;
  transform: translateY(-2px);
}

.sector-index {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font: 800 13px Arial, sans-serif;
  transition: background .2s ease, color .2s ease;
}

.sector-groups-grid article:hover .sector-index {
  background: var(--brand);
  color: #fff;
}

.sector-groups-grid h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .sector-groups-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .sector-groups-grid { grid-template-columns: 1fr; }
}



.hero-shade {
  background: linear-gradient(
    90deg,
    rgba(24, 7, 14, .08) 0%,
    rgba(55, 0, 24, .25) 42%,
    rgba(91, 0, 37, .89) 73%,
    rgba(63, 0, 27, .98) 100%
  );
}

[dir="ltr"] .hero-shade {
  background: linear-gradient(
    270deg,
    rgba(24, 7, 14, .08) 0%,
    rgba(55, 0, 24, .25) 42%,
    rgba(91, 0, 37, .89) 73%,
    rgba(63, 0, 27, .98) 100%
  );
}





/* ============ Service detail: intro ============ */
.service-intro-section { padding: 30px 0 10px; }

/* ============ Service detail: feature cards ============ */
.service-features-section { padding: 100px 0; background: var(--canvas); }

.service-feature-grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-feature-card {
  position: relative;
  padding: 38px 32px 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}

.service-feature-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--brand);
  box-shadow: 0 22px 50px rgba(47, 15, 27, .1);
}

.service-feature-index {
  position: absolute;
  top: 14px;
  inset-inline-end: 22px;
  z-index: 0;
  color: rgba(198, 0, 61, .08);
  font: 800 60px/1 Arial, sans-serif;
  pointer-events: none;
}

.service-feature-card h3 {
  position: relative;
  z-index: 1;
  margin: 6px 0 12px;
  font-size: 20px;
  line-height: 1.4;
}

.service-feature-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

/* ============ Service detail: process timeline ============ */
.service-process-section { padding: 100px 0; background: #fff; }

.service-process-track {
  position: relative;
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.service-process-track::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 1;
  background-image: repeating-linear-gradient(to right, var(--brand-soft) 0 8px, transparent 8px 16px);
}

.service-process-step {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  text-align: center;
}

.service-process-node {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font: 800 20px Arial, sans-serif;
  /* box-shadow: 0 10px 24px rgba(198, 0, 61, .28); */
}

.service-process-step h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.4;
}

.service-process-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

/* ============ Service detail: outcomes + audience ============ */
.service-outcomes-section { padding: 100px 0; background: var(--canvas); }

.service-outcomes-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.service-outcomes-panel,
.service-audience-panel {
  padding: 40px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
}

.service-audience-panel { border-top-color: var(--ink); }

.service-outcomes-panel h3,
.service-audience-panel h3 {
  margin: 0 0 26px;
  font-size: 21px;
  line-height: 1.4;
}

.service-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.service-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.service-check-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

.service-check-list li > span:last-child {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

.service-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-audience-tags span {
  padding: 10px 18px;
  background: var(--canvas);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.service-audience-tags span:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .service-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .service-process-track { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
  .service-process-track::before { display: none; }
  .service-outcomes-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .service-features-section,
  .service-process-section,
  .service-outcomes-section { padding: 72px 0; }
  .service-feature-grid { grid-template-columns: 1fr; }
  .service-process-track { grid-template-columns: 1fr; row-gap: 40px; }
  .service-outcomes-panel,
  .service-audience-panel { padding: 30px 24px; }
}










/* ============ FAQ page ============ */
.faq-section { padding-top: 40px; padding-bottom: 110px; background: var(--canvas); }

.faq-list {
  margin-top: 46px;
  max-width: 880px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-inline-start: 3px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item[open] {
  border-inline-start-color: var(--brand);
  box-shadow: 0 18px 40px rgba(47, 15, 27, .08);
}

.faq-item summary {
  min-height: 84px;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-index {
  color: var(--brand);
  font: 800 15px Arial, sans-serif;
  opacity: .45;
  transition: opacity .2s ease;
}

.faq-item[open] .faq-index { opacity: 1; }

.faq-item summary b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.faq-toggle-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--brand);
  transition: background .2s ease, color .2s ease, transform .25s ease;
}

.faq-item[open] .faq-toggle-icon {
  background: var(--brand);
  color: #fff;
  transform: rotate(135deg);
}

.faq-answer {
  overflow: hidden;
  padding: 0 28px 28px 88px;
}

.faq-answer p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.9;
  max-width: 65ch;
}

.request-banner-text { display: block; max-width: 480px; margin-top: 10px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.8; }

@media (max-width: 680px) {
  .faq-section { padding-top: 72px; padding-bottom: 76px; }
  .faq-item summary { min-height: auto; padding: 18px 20px; grid-template-columns: 30px minmax(0, 1fr) 26px; gap: 12px; }
  .faq-index { font-size: 13px; }
  .faq-item summary b { font-size: 14.5px; }
  .faq-toggle-icon { width: 26px; height: 26px; }
  .faq-answer { padding: 0 20px 22px 62px; }
}



/* ============ Sector detail: intro ============ */
.sector-intro-section { padding: 30px 0 10px; }

/* ============ Sector detail: feature cards ============ */
.sector-features-section { padding: 50px 0; background: var(--canvas); }

/* (uses .service-feature-grid / .service-feature-card / .service-feature-index
   already defined for the services pages — no need to duplicate) */

/* ============ Sector detail: outcomes band ============ */
.sector-outcomes-section { padding: 100px 0; background: #21161a; color: #fff; }

.sector-outcomes-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  align-items: start;
}

.sector-outcomes-intro p {
  margin: 0 0 14px;
  color: #f0a0b8;
  font-size: 12px;
  font-weight: 800;
}

.sector-outcomes-intro h2 {
  margin: 0;
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.3;
}

.sector-outcomes-intro span {
  display: block;
  margin-top: 16px;
  max-width: 320px;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1.85;
}

.sector-outcomes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.18);
  border-inline-start: 1px solid rgba(255,255,255,.18);
}

.sector-outcomes-list li {
  min-height: 110px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  border-inline-end: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease;
}

.sector-outcomes-list li:hover { background: rgba(255,255,255,.03); }

.sector-outcome-index {
  color: #f0a0b8;
  font: 700 12px Arial, sans-serif;
}

.sector-outcomes-list li b {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .sector-outcomes-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 680px) {
  .sector-features-section,
  .sector-outcomes-section { padding: 72px 0; }
  .sector-outcomes-list { grid-template-columns: 1fr; }
  .sector-outcomes-intro span { max-width: 100%; }
}




/* ============ Services showcase (zig-zag editorial) ============ */
.service-showcase-list {
  margin-top: 60px;
  display: grid;
  gap: 90px;
}

.service-showcase-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.service-showcase-item:nth-child(even) { direction: rtl; }
.service-showcase-item:nth-child(even) > * { direction: initial; }
[dir="rtl"] .service-showcase-item:nth-child(even) { direction: ltr; }
[dir="rtl"] .service-showcase-item:nth-child(even) > * { direction: rtl; }

.service-showcase-media {
  position: relative;
  height: 400px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.service-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.service-showcase-item:hover .service-showcase-media img { transform: scale(1.04); }

.service-showcase-number {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  min-width: 50px;
  height: 50px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.95);
  color: var(--brand);
  font: 800 16px Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.service-showcase-body { min-width: 0; }

.service-showcase-label {
  margin: 0 0 16px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.service-showcase-body h3 {
  margin: 0 0 18px;
  max-width: 480px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.4;
  letter-spacing: -.015em;
}

.service-showcase-text {
  display: block;
  max-width: 46ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.service-showcase-tags {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-showcase-tags small {
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.service-showcase-link {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  border-bottom: 1px solid rgba(198,0,61,.3);
  padding-bottom: 4px;
  transition: gap .2s ease, border-color .2s ease;
}

.service-showcase-link:hover { gap: 13px; border-color: var(--brand); }

@media (max-width: 980px) {
  .service-showcase-list { gap: 60px; }
  .service-showcase-item,
  .service-showcase-item:nth-child(even) {
    grid-template-columns: 1fr;
    direction: initial;
  }
  .service-showcase-media { height: 320px; }
  .service-showcase-body h3,
  .service-showcase-text { max-width: 100%; }
}

@media (max-width: 680px) {
  .service-showcase-list { margin-top: 42px; gap: 46px; }
  .service-showcase-media { height: 250px; }
  .service-showcase-body h3 { font-size: 24px; }
}







/* ============ Services: compact tabbed showcase ============ */
.service-tabs-experience {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 480px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.service-tabs-nav {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #21171b;
}

.service-tabs-nav > button {
  width: 100%;
  min-height: 110px;
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  gap: 10px;
  align-items: center;
  text-align: start;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.service-tabs-nav > button:hover,
.service-tabs-nav > button.is-active {
  background: #710022;
  border-color: #a91a47;
}

.service-tabs-nav > button > span {
  color: #dca2b4;
  font: 700 13px Arial, sans-serif;
}

.service-tabs-nav > button div { display: grid; gap: 4px; }
.service-tabs-nav > button b { font-size: 14px; }
.service-tabs-nav > button small {
  color: rgba(255,255,255,.6);
  font-size: 11px;
  line-height: 1.5;
}

.service-tabs-nav > button svg { opacity: .6; transition: transform .2s ease, opacity .2s ease; }
.service-tabs-nav > button.is-active svg { opacity: 1; transform: translateX(-3px); }
[dir="rtl"] .service-tabs-nav > button.is-active svg { transform: translateX(3px); }

.service-tabs-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.service-tab-panel {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.service-tab-media { position: relative; overflow: hidden; }
.service-tab-media img { width: 100%; height: 100%; object-fit: cover; }

.service-tab-body {
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-tab-label {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.service-tab-body h3 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.4;
}

.service-tab-text {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.service-tab-tags {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-tab-tags small {
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 700;
}

.service-tab-link {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid rgba(198,0,61,.3);
  padding-bottom: 4px;
  transition: gap .2s ease, border-color .2s ease;
}

.service-tab-link:hover { gap: 13px; border-color: var(--brand); }

@media (max-width: 980px) {
  .service-tabs-experience { grid-template-columns: 1fr; min-height: 0; }
  .service-tabs-nav { flex-direction: row; overflow-x: auto; }
  .service-tabs-nav > button { min-width: 220px; min-height: 90px; flex: 0 0 auto; }
  .service-tab-panel { grid-template-columns: 1fr; }
  .service-tab-media { height: 240px; }
  .service-tab-body { padding: 32px 26px; }
}

@media (max-width: 680px) {
  .service-tabs-nav { padding: 12px; gap: 6px; }
  .service-tabs-nav > button { min-width: 190px; min-height: 80px; padding: 14px 12px; }
  .service-tab-media { height: 200px; }
  .service-tab-body { padding: 26px 20px; }
}

/* ============ Proof / sectors: card polish ============ */
.proof-grid article {
  transition: background .25s ease, transform .25s ease;
}
.proof-grid article:hover {
  background: rgba(255,255,255,.05);
  transform: translateY(-3px);
}
.sector-strip span {
  padding: 6px 12px;
  /* border: 1px solid rgba(255,255,255,.16); */
  transition: border-color .2s ease, color .2s ease;
}
.sector-strip span:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* ============ Insights: card polish ============ */
.insight-feature { transition: transform .3s ease; }
.insight-feature:hover { transform: translateY(-3px); }
.insight-stack a { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.insight-stack a:hover {
  transform: translateY(-3px);
  border-color: #c5b2b9;
  box-shadow: 0 18px 40px rgba(47,15,27,.09);
}

/* ============ Request banner: tag polish ============ */
.request-layout > div:last-child > span {
  transition: border-color .2s ease, background .2s ease;
}
.request-layout > div:last-child > span:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
}






/* ============ Services: crossfade + depth polish ============ */
.service-tab-panel.is-entering {
  animation: service-panel-in .45s ease both;
}

@keyframes service-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.service-tab-media {
  position: relative;
  overflow: hidden;
}

.service-tab-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33,22,26,.28) 0%, transparent 35%);
  pointer-events: none;
}

[dir="rtl"] .service-tab-media::after {
  background: linear-gradient(270deg, rgba(33,22,26,.28) 0%, transparent 35%);
}

.service-tab-media img {
  transition: transform 8s ease;
  transform: scale(1.06);
}

.service-tab-panel.is-entering .service-tab-media img {
  transform: scale(1);
}

/* Active tab: animated left accent bar instead of flat background swap */
.service-tabs-nav > button {
  position: relative;
  overflow: hidden;
}

.service-tabs-nav > button::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform .3s ease;
}

.service-tabs-nav > button.is-active::before {
  transform: scaleY(1);
}

.service-tabs-nav > button {
  background: transparent;
  border-color: rgba(255,255,255,.08);
  transition: background .3s ease, border-color .3s ease, padding-inline-start .3s ease;
}

.service-tabs-nav > button:hover {
  background: rgba(255,255,255,.04);
}

.service-tabs-nav > button.is-active {
  background: linear-gradient(90deg, rgba(198,0,61,.22) 0%, rgba(198,0,61,.05) 100%);
  padding-inline-start: 22px;
}

[dir="rtl"] .service-tabs-nav > button.is-active { padding-inline-start: 16px; padding-inline-end: 22px; }

/* Number badge glow on active */
.service-tabs-nav > button.is-active > span {
  color: #ff9fb8;
  text-shadow: 0 0 12px rgba(255, 159, 184, .5);
}

/* Tag pills: subtle lift on hover */
.service-tab-tags small {
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.service-tab-tags small:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  color: var(--brand);
}

/* CTA link arrow nudges further and glows subtly */
.service-tab-link svg { transition: transform .25s ease; }
.service-tab-link:hover svg { transform: translateX(-4px); }
[dir="rtl"] .service-tab-link:hover svg { transform: translateX(4px); }




/* ============ Analytics section ============ */
.analytics-section { padding: 45px 0; background: var(--canvas); }

.analytics-compact {
	width: 100%;
	margin-top: 8px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	cursor: pointer;
	text-align: start;
	font-family: inherit;
	transition: box-shadow .25s ease;
}
.analytics-compact:hover { box-shadow: 0 22px 55px rgba(47,15,27,.09); }

.analytics-compact-info { display: flex; align-items: center; gap: 16px; }
.analytics-compact-icon {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; flex: 0 0 auto;
}
.analytics-compact-text b { display: block; font-size: 16px; }
.analytics-compact-text span { color: var(--muted); font-size: 12px; }

.analytics-compact-stats { display: flex; gap: 26px; }
.analytics-compact-stats div { display: grid; gap: 2px; text-align: center; }
.analytics-compact-stats b { color: var(--brand); font-size: 18px; font-weight: 800; }
.analytics-compact-stats span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.analytics-toggle-btn {
	width: 42px; height: 42px; flex: 0 0 auto;
	display: grid; place-items: center;
	border: 1px solid var(--line); background: #fff;
	transition: transform .35s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.analytics-section.is-open .analytics-toggle-btn { transform: rotate(-90deg); background: var(--brand); border-color: var(--brand); color: #fff; }

/* Grid-rows trick: smooth height animation without JS measuring */
.analytics-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
}
.analytics-section.is-open .analytics-panel { grid-template-rows: 1fr; }
.analytics-panel-inner { min-height: 0; overflow: hidden; }

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

.analytics-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px 24px; }
.analytics-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.analytics-card-head span {
	width: 32px; height: 32px; border-radius: 10px;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; flex: 0 0 auto;
}
.analytics-card-head b { font-size: 14px; }

/* KPI mini grid */
.analytics-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.analytics-kpi { padding: 13px; text-align: center; background: var(--canvas); border: 1px solid var(--line); }
.analytics-kpi b { display: block; color: var(--brand); font-size: 18px; font-weight: 800; }
.analytics-kpi span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }

/* Donut */
.analytics-donut-wrap { display: flex; align-items: center; gap: 18px; }
.analytics-donut { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; }
.analytics-donut-hole {
	position: absolute; inset: 16px; border-radius: 50%; background: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.analytics-donut-hole b { font-size: 13px; font-weight: 800; color: var(--ink); }
.analytics-donut-hole span { font-size: 8px; color: var(--muted); }
.analytics-donut-legend { display: grid; gap: 8px; }
.analytics-donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.analytics-donut-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Horizontal bars */
.analytics-hbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.analytics-hbar-name { width: 68px; flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.analytics-hbar-track { flex: 1; height: 8px; background: var(--canvas); border-radius: 6px; overflow: hidden; }
.analytics-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-radius: 6px; }
.analytics-hbar-value { width: 46px; flex: 0 0 auto; text-align: end; color: var(--muted); font-size: 10px; font-weight: 700; }

/* Stacked bars */
.analytics-stacked { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.analytics-sbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.analytics-sbar-name { width: 68px; flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.analytics-sbar-track { flex: 1; height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: var(--canvas); }
.analytics-sbar-seg { height: 100%; }

.analytics-placeholder-note { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 980px) {
	.analytics-grid { grid-template-columns: 1fr; }
	.analytics-compact { align-items: flex-start; }
	.analytics-compact-stats { gap: 18px; }
}
@media (max-width: 680px) {
	.analytics-section { padding: 72px 0; }
	.analytics-compact { padding: 18px; flex-direction: column; align-items: stretch; }
	.analytics-toggle-btn { align-self: flex-end; }
}




/* ============ Analytics section ============ */
.analytics-section { padding: 45px 0; background: var(--canvas); }

.analytics-compact {
	width: 100%;
	margin-top: 8px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	cursor: pointer;
	text-align: start;
	font-family: inherit;
	transition: box-shadow .25s ease;
}
.analytics-compact:hover { box-shadow: 0 22px 55px rgba(47,15,27,.09); }

.analytics-compact-info { display: flex; align-items: center; gap: 16px; }
.analytics-compact-icon {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; flex: 0 0 auto;
}
.analytics-compact-text b { display: block; font-size: 16px; }
.analytics-compact-text span { color: var(--muted); font-size: 12px; }

.analytics-compact-stats { display: flex; gap: 26px; }
.analytics-compact-stats div { display: grid; gap: 2px; text-align: center; }
.analytics-compact-stats b { color: var(--brand); font-size: 18px; font-weight: 800; }
.analytics-compact-stats span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.analytics-toggle-btn {
	width: 42px; height: 42px; flex: 0 0 auto;
	display: grid; place-items: center;
	border: 1px solid var(--line); background: #fff;
	transition: transform .35s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.analytics-section.is-open .analytics-toggle-btn { transform: rotate(-90deg); background: var(--brand); border-color: var(--brand); color: #fff; }

/* Grid-rows trick: smooth height animation without JS measuring */
.analytics-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
}
.analytics-section.is-open .analytics-panel { grid-template-rows: 1fr; }
.analytics-panel-inner { min-height: 0; overflow: hidden; }

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

.analytics-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 26px 24px; }
.analytics-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.analytics-card-head span {
	width: 32px; height: 32px; border-radius: 10px;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; flex: 0 0 auto;
}
.analytics-card-head b { font-size: 14px; }

/* KPI mini grid */
.analytics-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.analytics-kpi { padding: 13px; text-align: center; background: var(--canvas); border: 1px solid var(--line); }
.analytics-kpi b { display: block; color: var(--brand); font-size: 18px; font-weight: 800; }
.analytics-kpi span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }

/* Donut */
.analytics-donut-wrap { display: flex; align-items: center; gap: 18px; }
.analytics-donut { position: relative; width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; }
.analytics-donut-hole {
	position: absolute; inset: 16px; border-radius: 50%; background: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.analytics-donut-hole b { font-size: 13px; font-weight: 800; color: var(--ink); }
.analytics-donut-hole span { font-size: 8px; color: var(--muted); }
.analytics-donut-legend { display: grid; gap: 8px; }
.analytics-donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.analytics-donut-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Horizontal bars */
.analytics-hbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.analytics-hbar-name { width: 68px; flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.analytics-hbar-track { flex: 1; height: 8px; background: var(--canvas); border-radius: 6px; overflow: hidden; }
.analytics-hbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); border-radius: 6px; }
.analytics-hbar-value { width: 46px; flex: 0 0 auto; text-align: end; color: var(--muted); font-size: 10px; font-weight: 700; }

/* Stacked bars */
.analytics-stacked { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.analytics-sbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.analytics-sbar-name { width: 68px; flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.analytics-sbar-track { flex: 1; height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: var(--canvas); }
.analytics-sbar-seg { height: 100%; }

.analytics-placeholder-note { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* Card 1 as a click-through link to the full report page */
.analytics-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.analytics-card-link:hover { transform: translateY(-3px); border-color: #d8bcc5; box-shadow: 0 18px 40px rgba(47,15,27,.1); }
.analytics-card-cta {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--brand);
	font-size: 12px;
	font-weight: 800;
}
.analytics-card-link:hover .analytics-card-cta svg { transform: translateX(-4px); }
.analytics-card-cta svg { transition: transform .2s ease; }

/* Client growth — badge + yearly bar chart */
.analytics-growth-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 20px;
	padding: 8px 14px;
	background: var(--brand-soft);
	border: 1px solid rgba(198,0,61,.18);
}
.analytics-growth-badge b { color: var(--brand); font-size: 18px; font-weight: 800; }
.analytics-growth-badge span { color: var(--brand-dark); font-size: 10px; font-weight: 600; }

.analytics-yearbars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.analytics-yearbar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.analytics-yearbar-value { color: var(--brand); font-size: 10px; font-weight: 800; }
.analytics-yearbar-fill { width: 100%; max-width: 30px; background: linear-gradient(180deg, var(--brand), var(--brand-dark)); border-radius: 5px 5px 0 0; transition: height .4s ease; }
.analytics-yearbar-label { color: var(--muted); font-size: 10px; font-weight: 700; }

@media (max-width: 980px) {
	.analytics-grid { grid-template-columns: 1fr; }
	.analytics-compact { align-items: flex-start; }
	.analytics-compact-stats { gap: 18px; }
}
@media (max-width: 680px) {
	.analytics-section { padding: 72px 0; }
	.analytics-compact { padding: 18px; flex-direction: column; align-items: stretch; }
	.analytics-toggle-btn { align-self: flex-end; }
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* .vstat-list { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.vstat-card { background: #fff; border: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.vstat-top { display: flex; align-items: center; justify-content: space-between; }
.vstat-top > span:first-child { font-size: 13px; color: var(--muted); font-weight: 700; }
.vstat-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.vstat-value { font-size: 30px; font-weight: 800; color: var(--ink); }
.vstat-bottom { display: flex; align-items: center; justify-content: space-between; }
.vstat-bottom a { font-size: 12px; color: var(--brand); text-decoration: underline; }
.vstat-trend { font-size: 12px; color: #4a8a1e; font-weight: 700; } */


/* .vstat-list {
	position: absolute;
	z-index: 2;
	inset-inline-end: clamp(24px, 4vw, 60px);
	bottom: 56px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 150px;
}
.vstat-card { background: rgba(255,255,255,.96); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.vstat-top { display: flex; align-items: center; justify-content: space-between; }
.vstat-top > span:first-child { font-size: 11px; color: var(--muted); font-weight: 700; }
.vstat-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.vstat-value { font-size: 22px; font-weight: 800; color: var(--ink); }
.vstat-bottom { display: flex; align-items: center; justify-content: space-between; }
.vstat-bottom a { font-size: 10px; color: var(--brand); text-decoration: underline; }
.vstat-trend { font-size: 10px; color: #4a8a1e; font-weight: 700; } */


/* .vstat-list {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 25px;
	
  margin-inline-start: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 180px;
} */

.vstat-card { background: rgba(255,255,255,.97); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.vstat-top { display: flex; align-items: center; justify-content: space-between; }
.vstat-top > span:first-child { font-size: 11px; color: var(--muted); font-weight: 700; }
.vstat-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.vstat-value { font-size: 22px; font-weight: 800; color: var(--ink); }
.vstat-bottom { display: flex; align-items: center; justify-content: space-between; }
.vstat-bottom a { font-size: 10px; color: var(--brand); text-decoration: underline; }
.vstat-trend { font-size: 10px; color: #4a8a1e; font-weight: 700; }


/* ============ Clients directory (searchable logo grid) ============ */
.clients-directory-section { padding: 10px 0; background: var(--canvas); }

.clients-search-bar { position: relative; max-width: 480px; margin: 0 auto 48px; }
.clients-search-bar input {
	width: 100%; min-height: 54px; padding: 0 54px 0 20px;
	border: 1px solid var(--line); background: #fff; color: var(--ink);
	font-size: 14px; outline: 0;
	transition: border-color .2s ease, box-shadow .2s ease;
}
[dir="rtl"] .clients-search-bar input { padding: 0 20px 0 54px; }
.clients-search-bar input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(198,0,61,.08); }
.clients-search-bar input::placeholder { color: #93878c; }
.clients-search-icon {
	position: absolute; inset-inline-end: 20px; top: 50%;
	transform: translateY(-50%); color: var(--muted); pointer-events: none;
	display: flex;
}

.clients-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 22px;
}

.client-card {
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	padding: 26px 18px 22px;
	background: #fff; border: 1px solid var(--line);
	text-align: center; text-decoration: none; color: inherit;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.client-card:hover {
	transform: translateY(-4px);
	border-color: #d8bcc5;
	box-shadow: 0 18px 40px rgba(47,15,27,.1);
}

.client-card-logo {
	width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
	/* border-radius: 50%;  */
  background: var(--warm); overflow: hidden;
}
.client-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.client-card b { font-size: 13px; line-height: 1.5; color: var(--ink); font-weight: 700; }

.client-card.is-hidden { display: none; }

.clients-empty-state {
	display: none; text-align: center; padding: 60px 20px;
	color: var(--muted); font-size: 14px;
}
.clients-empty-state.is-visible { display: block; }

@media (max-width: 680px) {
	.clients-directory-section { padding: 72px 0; }
	.clients-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
	.client-card-logo { width: 60px; height: 60px; }
}

/* adding some css */

client-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 30px 20px 26px;
	background: #fff;
	border: 1px solid var(--line);
	text-align: center;
	text-decoration: none;
	color: inherit;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.client-card:hover {
	transform: translateY(-4px);
	border-color: #d8bcc5;
	box-shadow: 0 18px 40px rgba(47,15,27,.1);
}

.client-card-logo {
	width: 100%;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.client-card-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.client-card b {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink);
	font-weight: 700;
}

@media (max-width: 680px) {
	.clients-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.client-card-logo { height: 100px; }
}




.vstat-list {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 15px;
	margin-inline-start: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 170px;
}

.vstat-card {
	position: relative;
	min-height: 106px;
	padding: 12px 13px 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	background: linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(251,244,246,.96) 100%);
	border: 1px solid var(--line);
	box-shadow: 0 10px 26px rgba(50,14,28,.13);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vstat-card::before {
	content: "";
	position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
	width: 3px; background: var(--brand);
	transform: scaleY(0); transform-origin: top;
	transition: transform .55s ease .1s;
}
.vstat-card.is-visible::before { transform: scaleY(1); }
.vstat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(198,0,61,.2);
	border-color: #e3c3cd;
}
.vstat-list .vstat-card:nth-child(1) { transition-delay: .05s; }
.vstat-list .vstat-card:nth-child(2) { transition-delay: .14s; }
.vstat-list .vstat-card:nth-child(3) { transition-delay: .23s; }
.vstat-list .vstat-card:nth-child(4) { transition-delay: .32s; }

.vstat-top { display: flex; align-items: center; justify-content: space-between; }
.vstat-top > span:first-child { font-size: 9.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vstat-icon {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--brand-soft); color: var(--brand);
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.vstat-card:hover .vstat-icon { background: var(--brand); color: #fff; transform: rotate(10deg) scale(1.05); }

/* Every chart type sits in the same fixed box → identical card heights */
.vstat-chart { display: flex; align-items: center; gap: 10px; }
.vstat-chart-box { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.vstat-chart-box svg { display: block; overflow: visible; }
.vstat-value { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; white-space: nowrap; }

.vstat-bottom {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: 7px; border-top: 1px dashed var(--line);
}
.vstat-bottom a {
	font-size: 9.5px; font-weight: 800; color: var(--brand);
	border-bottom: 1px solid rgba(198,0,61,.32); padding-bottom: 1px;
	transition: border-color .2s ease, transform .15s ease, opacity .15s ease;
	display: inline-block;
}
.vstat-bottom a:hover { border-color: var(--brand); }
.vstat-bottom a:active { transform: scale(.94); opacity: .75; }
.vstat-trend {
	font-size: 9.5px; font-weight: 800; color: #2f8a3a;
	background: #eaf7ec; padding: 2px 7px; border-radius: 20px;
}

/* --- Ring (Clients) --- */
.vstat-ring circle { fill: none; }
.vstat-ring-track { stroke: var(--brand-soft); stroke-width: 6; }
.vstat-ring-fill {
	stroke: var(--brand); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: 163.36; stroke-dashoffset: 163.36;
	transform: rotate(-90deg); transform-origin: 32px 32px;
	transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) .15s;
}
.vstat-ring-track { transform: rotate(-90deg); transform-origin: 32px 32px; }
.vstat-card.is-visible .vstat-ring-fill { stroke-dashoffset: calc(163.36 - (163.36 * var(--pct)) / 100); }

/* --- Bars (Countries) --- */
.vstat-bar {
	fill: var(--brand-soft);
	transform-box: fill-box; transform-origin: bottom;
	transform: scaleY(0);
	transition: transform .55s cubic-bezier(.34,1.15,.4,1) var(--bar-delay);
}
.vstat-bar:last-child { fill: var(--brand); }
.vstat-card.is-visible .vstat-bar { transform: scaleY(1); }
.vstat-card:hover .vstat-bar:last-child { transform: scaleY(1.1); }

/* --- Segments (Databases) --- */
.vstat-segment {
	fill: none; stroke: var(--brand-soft); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: var(--arc-len) calc(var(--circ) - var(--arc-len));
	transform-box: fill-box; transform-origin: center;
	transform: rotate(var(--rotate)) scale(.4);
	opacity: 0;
	transition: transform .45s cubic-bezier(.34,1.56,.64,1) var(--seg-delay), opacity .35s ease var(--seg-delay), stroke .25s ease;
}
.vstat-card.is-visible .vstat-segment { opacity: 1; transform: rotate(var(--rotate)) scale(1); }
.vstat-segment.is-filled { stroke: var(--brand); }

/* --- Sparkline (Journals) --- */
.vstat-spark-fill { fill: var(--brand-soft); opacity: 0; transition: opacity .55s ease .3s; }
.vstat-spark-line {
	fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 200; stroke-dashoffset: 200;
	transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1) .1s;
}
.vstat-spark-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease .9s, transform .35s cubic-bezier(.34,1.56,.64,1) .9s;
}
.vstat-card.is-visible .vstat-spark-fill { opacity: .55; }
.vstat-card.is-visible .vstat-spark-line { stroke-dashoffset: 0; }
.vstat-card.is-visible .vstat-spark-dot { opacity: 1; transform: scale(1); animation: spark-pulse 1.8s ease-in-out 1.1s infinite; }
@keyframes spark-pulse {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(198,0,61,.5)); }
	50% { filter: drop-shadow(0 0 4px rgba(198,0,61,.65)); }
}

@media (max-width: 980px) {
	.vstat-list { width: 100%; flex-direction: row; margin-top: 26px; gap: 8px; }
	.vstat-card { flex: 1; min-height: 96px; padding: 10px 11px 9px; }
}
@media (max-width: 680px) {
	.vstat-list { flex-wrap: wrap; }
	.vstat-card { flex: 1 1 calc(50% - 4px); }
}



































































/* Shimmer sweep across the card once it's revealed */
.vstat-card { position: relative; }
.vstat-shimmer {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
	transform: translateX(-140%);
}
.vstat-card.is-visible .vstat-shimmer {
	animation: vstat-shimmer-sweep 1.1s ease .35s 1;
}
@keyframes vstat-shimmer-sweep {
	to { transform: translateX(140%); }
}

.vstat-chart { display: flex; align-items: center; gap: 10px; }
.vstat-chart-box { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.vstat-chart-box svg { display: block; overflow: visible; }
.vstat-card:hover .vstat-chart-box { transform: scale(1.08); }

/* --- Ring (Clients): gradient stroke + glow + soft pulsing halo --- */
.vstat-ring circle { fill: none; }
.vstat-ring-track { stroke: var(--brand-soft); stroke-width: 6; transform: rotate(-90deg); transform-origin: 32px 32px; }
.vstat-ring-fill {
	stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: 163.36; stroke-dashoffset: 163.36;
	transform: rotate(-90deg); transform-origin: 32px 32px;
	transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
.vstat-ring-glow-dot {
	stroke: var(--brand); stroke-width: 10; stroke-linecap: round; opacity: 0;
	stroke-dasharray: 163.36; stroke-dashoffset: 163.36;
	transform: rotate(-90deg); transform-origin: 32px 32px; filter: blur(4px);
	transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1) .15s, opacity .4s ease .3s;
}
.vstat-card.is-visible .vstat-ring-fill,
.vstat-card.is-visible .vstat-ring-glow-dot {
	stroke-dashoffset: calc(163.36 - (163.36 * var(--pct)) / 100);
}
.vstat-card.is-visible .vstat-ring-glow-dot { opacity: .35; animation: vstat-ring-pulse 2.4s ease-in-out 1.4s infinite; }
@keyframes vstat-ring-pulse { 0%,100% { opacity: .25; } 50% { opacity: .55; } }

/* --- Bars (Countries): gradient peak bar + elastic rise + reflective cap --- */
.vstat-bar {
	transform-box: fill-box; transform-origin: bottom;
	transform: scaleY(0);
	transition: transform .6s cubic-bezier(.34,1.4,.4,1) var(--bar-delay);
}
.vstat-card.is-visible .vstat-bar { transform: scaleY(1); }
.vstat-bar.is-peak { transition: transform .6s cubic-bezier(.34,1.4,.4,1) var(--bar-delay), filter .3s ease; }
.vstat-card.is-visible .vstat-bar.is-peak {
	animation: vstat-bar-glow 2.2s ease-in-out 1s infinite;
}
@keyframes vstat-bar-glow {
	0%,100% { filter: drop-shadow(0 0 0 rgba(198,0,61,0)); }
	50% { filter: drop-shadow(0 0 3px rgba(198,0,61,.55)); }
}
.vstat-card:hover .vstat-bar.is-peak { transform: scaleY(1.1); }

/* --- Segments (Databases): gradient fill + glow + gentle breathing --- */
.vstat-segment {
	fill: none; stroke: var(--brand-soft); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: var(--arc-len) calc(var(--circ) - var(--arc-len));
	transform-box: fill-box; transform-origin: center;
	transform: rotate(var(--rotate)) scale(.3);
	opacity: 0;
	transition: transform .5s cubic-bezier(.34,1.6,.64,1) var(--seg-delay), opacity .35s ease var(--seg-delay);
}
.vstat-card.is-visible .vstat-segment { opacity: 1; transform: rotate(var(--rotate)) scale(1); }
.vstat-segment.is-filled { animation: vstat-seg-breathe 2.6s ease-in-out calc(var(--seg-delay) + 1s) infinite; }
@keyframes vstat-seg-breathe {
	0%,100% { stroke-width: 6; }
	50% { stroke-width: 7.2; }
}

/* --- Sparkline (Journals): gradient line/fill + radar-ping endpoint --- */
.vstat-spark-fill { opacity: 0; transition: opacity .6s ease .35s; }
.vstat-spark-line {
	fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 200; stroke-dashoffset: 200;
	transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .1s;
}
.vstat-spark-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease 1s, transform .4s cubic-bezier(.34,1.6,.64,1) 1s;
}
.vstat-spark-ping {
	fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(1);
}
.vstat-card.is-visible .vstat-spark-fill { opacity: 1; }
.vstat-card.is-visible .vstat-spark-line { stroke-dashoffset: 0; }
.vstat-card.is-visible .vstat-spark-dot { opacity: 1; transform: scale(1); }
.vstat-card.is-visible .vstat-spark-ping {
	animation: vstat-spark-ping 1.8s cubic-bezier(.2,.6,.4,1) 1.1s infinite;
}
@keyframes vstat-spark-ping {
	0% { opacity: .55; transform: scale(1); }
	80% { opacity: 0; transform: scale(3.2); }
	100% { opacity: 0; transform: scale(3.2); }
}

















/* ============ vstat cards: always-growing animations ============ */

.vstat-card { position: relative; }

.vstat-shimmer {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
	transform: translateX(-140%);
}
.vstat-card.is-visible .vstat-shimmer {
	animation: vstat-shimmer-sweep 1.1s ease .35s 1;
}
@keyframes vstat-shimmer-sweep {
	to { transform: translateX(140%); }
}

.vstat-chart { display: flex; align-items: center; gap: 10px; }
.vstat-chart-box { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.vstat-chart-box svg { display: block; overflow: visible; }
.vstat-card:hover .vstat-chart-box { transform: scale(1.08); }

/* --- Ring (Clients): fill once, then a glowing dot keeps orbiting the arc --- */
.vstat-ring circle { fill: none; }
.vstat-ring-track { stroke: var(--brand-soft); stroke-width: 6; transform: rotate(-90deg); transform-origin: 32px 32px; }
.vstat-ring-fill {
	stroke: var(--brand); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: 163.36; stroke-dashoffset: 163.36;
	transform: rotate(-90deg); transform-origin: 32px 32px;
	transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
.vstat-card.is-visible .vstat-ring-fill {
	stroke-dashoffset: calc(163.36 - (163.36 * var(--pct)) / 100);
}
.vstat-ring-glow-dot {
	stroke: var(--brand); stroke-width: 3; stroke-linecap: round; opacity: 0;
	stroke-dasharray: 2 161.36;
	transform: rotate(-90deg); transform-origin: 32px 32px; filter: blur(1px);
}
.vstat-card.is-visible .vstat-ring-glow-dot {
	opacity: .9;
	animation: vstat-ring-orbit 2.6s linear 1.4s infinite;
}
@keyframes vstat-ring-orbit {
	0%   { stroke-dashoffset: 163.36; }
	100% { stroke-dashoffset: calc(163.36 - (163.36 * var(--pct)) / 100 - 163.36); }
}

/* --- Bars (Countries): rise once, peak bar keeps climbing + glowing --- */
.vstat-bar {
	transform-box: fill-box; transform-origin: bottom;
	transform: scaleY(0);
	transition: transform .6s cubic-bezier(.34,1.4,.4,1) var(--bar-delay);
}
.vstat-card.is-visible .vstat-bar { transform: scaleY(1); }
.vstat-card.is-visible .vstat-bar.is-peak {
	animation: vstat-bar-climb 2.2s ease-in-out 1s infinite;
}
@keyframes vstat-bar-climb {
	0%, 100% { transform: scaleY(1); filter: drop-shadow(0 0 0 rgba(198,0,61,0)); }
	50%      { transform: scaleY(1.12); filter: drop-shadow(0 0 3px rgba(198,0,61,.55)); }
}
.vstat-card:hover .vstat-bar.is-peak { transform: scaleY(1.16); }

/* --- Segments (Databases): pop in once, then breathe --- */
.vstat-segment {
	fill: none; stroke: var(--brand-soft); stroke-width: 6; stroke-linecap: round;
	stroke-dasharray: var(--arc-len) calc(var(--circ) - var(--arc-len));
	transform-box: fill-box; transform-origin: center;
	transform: rotate(var(--rotate)) scale(.3);
	opacity: 0;
	transition: transform .5s cubic-bezier(.34,1.6,.64,1) var(--seg-delay), opacity .35s ease var(--seg-delay);
}
.vstat-card.is-visible .vstat-segment { opacity: 1; transform: rotate(var(--rotate)) scale(1); }
.vstat-segment.is-filled {
	stroke: var(--brand);
	animation: vstat-seg-breathe 2.6s ease-in-out calc(var(--seg-delay) + 1s) infinite;
}
@keyframes vstat-seg-breathe {
	0%, 100% { stroke-width: 6; }
	50%      { stroke-width: 7.4; }
}

/* --- Sparkline (Journals): line draws once, then flows continuously --- */
.vstat-spark-fill { fill: var(--brand-soft); opacity: 0; transition: opacity .6s ease .35s; }
.vstat-card.is-visible .vstat-spark-fill { opacity: .55; }

.vstat-spark-line {
	fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 200; stroke-dashoffset: 200;
	transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .1s;
}
.vstat-card.is-visible .vstat-spark-line { stroke-dashoffset: 0; }

.vstat-spark-flow {
	fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	opacity: 0;
	stroke-dasharray: 14 140;
	stroke-dashoffset: 0;
}
.vstat-card.is-visible .vstat-spark-flow {
	opacity: .55;
	animation: vstat-spark-flow-run 2.4s linear 1.1s infinite;
}
@keyframes vstat-spark-flow-run {
	to { stroke-dashoffset: -154; }
}

.vstat-spark-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease 1s, transform .4s cubic-bezier(.34,1.6,.64,1) 1s;
}
.vstat-spark-ping {
	fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0;
	transform-box: fill-box; transform-origin: center;
}
.vstat-card.is-visible .vstat-spark-dot { opacity: 1; transform: scale(1); }
.vstat-card.is-visible .vstat-spark-ping {
	animation: vstat-spark-ping 1.8s cubic-bezier(.2,.6,.4,1) 1.1s infinite;
}
@keyframes vstat-spark-ping {
	0%   { opacity: .55; transform: scale(1); }
	80%  { opacity: 0;   transform: scale(3.2); }
	100% { opacity: 0;   transform: scale(3.2); }
}

/* --- Trend badge: gentle continuous pulse so it reads as "still rising" --- */
.vstat-trend {
	display: inline-block;
	font-size: 9.5px; font-weight: 800; color: #2f8a3a;
	background: #eaf7ec; padding: 2px 7px; border-radius: 20px;
}
.vstat-card.is-visible .vstat-trend {
	animation: vstat-trend-pulse 2.4s ease-in-out 1.6s infinite;
}
@keyframes vstat-trend-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}






















/* --- Area (Clients): smooth ascending curve, flows + pulses at the tip --- */
.vstat-area-fill { opacity: 0; transition: opacity .6s ease .35s; }
.vstat-card.is-visible .vstat-area-fill { opacity: 1; }

.vstat-area-line {
	fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 200; stroke-dashoffset: 200;
	transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .1s;
}
.vstat-card.is-visible .vstat-area-line { stroke-dashoffset: 0; }

.vstat-area-flow {
	fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	opacity: 0; stroke-dasharray: 14 140; stroke-dashoffset: 0;
}
.vstat-card.is-visible .vstat-area-flow {
	opacity: .55;
	animation: vstat-flow-run 2.4s linear 1.1s infinite;
}

.vstat-area-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease 1s, transform .4s cubic-bezier(.34,1.6,.64,1) 1s;
}
.vstat-area-ping {
	fill: none; stroke: var(--brand); stroke-width: 1.5; opacity: 0;
	transform-box: fill-box; transform-origin: center;
}
.vstat-card.is-visible .vstat-area-dot { opacity: 1; transform: scale(1); }
.vstat-card.is-visible .vstat-area-ping {
	animation: vstat-spark-ping 1.8s cubic-bezier(.2,.6,.4,1) 1.1s infinite;
}

/* --- Steps (Databases): staircase draws in, corners pop node-by-node --- */
.vstat-step-line {
	fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 260; stroke-dashoffset: 260;
	transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .1s;
}
.vstat-card.is-visible .vstat-step-line { stroke-dashoffset: 0; }

.vstat-step-node {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.6,.64,1);
	transition-delay: var(--node-delay);
}
.vstat-card.is-visible .vstat-step-node { opacity: 1; transform: scale(1); }
.vstat-card.is-visible .vstat-step-node:last-child {
	animation: vstat-step-bounce 2s ease-in-out 1.3s infinite;
}
@keyframes vstat-step-bounce {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.35); }
}




/* --- Globe (Countries): outline + spinning meridian + dots pinging on --- */
.vstat-globe { display: block; overflow: visible; }

.vstat-globe-outline {
	fill: none; stroke: var(--brand-soft); stroke-width: 2;
	opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(.5);
	transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.vstat-card.is-visible .vstat-globe-outline { opacity: 1; transform: scale(1); }

.vstat-globe-lat,
.vstat-globe-merid {
	fill: none; stroke: var(--brand-soft); stroke-width: 1.4;
	opacity: 0;
	transition: opacity .5s ease .15s;
}
.vstat-card.is-visible .vstat-globe-lat,
.vstat-card.is-visible .vstat-globe-merid { opacity: 1; }

.vstat-globe-merid-spin {
	fill: none; stroke: var(--brand); stroke-width: 1.6;
	opacity: 0;
}
.vstat-card.is-visible .vstat-globe-merid-spin {
	opacity: .85;
	animation: vstat-globe-spin 3.2s ease-in-out 1s infinite;
}
@keyframes vstat-globe-spin {
	0%   { rx: 0; }
	50%  { rx: 26; }
	100% { rx: 0; }
}

.vstat-globe-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.6,.64,1);
	transition-delay: var(--dot-delay);
}
.vstat-card.is-visible .vstat-globe-dot { opacity: 1; transform: scale(1); }

.vstat-globe-ping {
	fill: none; stroke: var(--brand); stroke-width: 1.2; opacity: 0;
	transform-box: fill-box; transform-origin: center;
}
.vstat-card.is-visible .vstat-globe-ping {
	animation: vstat-globe-ping-pulse 2.6s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes vstat-globe-ping-pulse {
	0%   { opacity: .6; transform: scale(1); }
	70%  { opacity: 0;  transform: scale(2.6); }
	100% { opacity: 0;  transform: scale(2.6); }
}

.vstat-card:hover .vstat-globe-merid-spin { animation-duration: 1.6s; }




/* ============ Hero: fix mobile stacking (cards were overlapping the headline) ============ */
@media (max-width: 980px) {
	.hero-layout {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
		padding-bottom: 34px;
	}
	.hero-copy {
		width: 100%;
		padding-bottom: 0;
	}
	.vstat-list {
		margin-inline-start: 0;
		margin-top: 0;
	}
}

@media (max-width: 680px) {
	.hero-layout {
		align-items: stretch;
	}
	.hero-copy {
		padding-top: 40px;
		padding-bottom: 0;
	}
}






/* ============ About: journey timeline ============ */
.about-timeline-section { padding: 20px 0 40px; background: var(--canvas); }

.about-timeline { position: relative; margin: 56px auto 0; max-width: 900px; }

.about-timeline::before {
	content: "";
	position: absolute;
	inset-inline-start: 27px;
	top: 28px;
	bottom: 28px;
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--line) 0 8px, transparent 8px 16px);
}

.about-timeline-item { position: relative; padding-inline-start: 78px; padding-bottom: 46px; }
.about-timeline-item:last-child { padding-bottom: 0; }

.about-timeline-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 27px;
	top: 28px;
	bottom: -28px;
	width: 2px;
	background: var(--brand);
	transform-origin: top;
	transform: scaleY(0);
	transition: transform .7s cubic-bezier(.16,1,.3,1) .1s;
	z-index: 1;
}
.about-timeline-item:last-child::before { display: none; }
.about-timeline-item.is-visible::before { transform: scaleY(1); }

.about-timeline-marker {
	position: absolute; inset-inline-start: 0; top: 0;
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid var(--brand-soft); border-radius: 50%;
	color: var(--brand); font: 800 12px Arial, sans-serif; z-index: 2;
	transform: scale(.6); opacity: 0;
	transition: transform .5s cubic-bezier(.34,1.56,.64,1) .15s, opacity .4s ease .15s,
		border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.about-timeline-item.is-visible .about-timeline-marker {
	transform: scale(1); opacity: 1;
	background: var(--brand); border-color: var(--brand); color: #fff;
	/* box-shadow: 0 8px 22px rgba(198,0,61,.32); */
}
.about-timeline-item.is-visible:hover .about-timeline-marker { transform: scale(1.08); }

.about-timeline-card {
	padding: 26px 28px; background: #fff; border: 1px solid var(--line);
	border-inline-start: 3px solid transparent;
	opacity: 0; transform: translateY(16px);
	transition: opacity .55s ease .05s, transform .55s ease .05s, border-color .3s ease, box-shadow .3s ease;
}
.about-timeline-item.is-visible .about-timeline-card { opacity: 1; transform: translateY(0); }
.about-timeline-item.is-visible .about-timeline-card:hover {
	border-inline-start-color: var(--brand);
	box-shadow: 0 18px 42px rgba(47,15,27,.09);
	transform: translateY(-3px);
}

.about-timeline-card b { display: block; margin-bottom: 8px; color: var(--brand-dark); font-size: 18px; line-height: 1.4; }
.about-timeline-card span { display: block; color: var(--muted); font-size: 14px; line-height: 1.85; }

@media (max-width: 680px) {
	.about-timeline-section { padding: 72px 0 76px; }
	.about-timeline::before, .about-timeline-item::before { inset-inline-start: 21px; }
	.about-timeline-item { padding-inline-start: 60px; padding-bottom: 34px; }
	.about-timeline-marker { width: 44px; height: 44px; font-size: 10.5px; }
	.about-timeline-card { padding: 20px 20px; }
}




/* ============================================================
   AS EEL PAGE — scoped styles (independent from .internal-* /
   .service-* / .faq-* classes used elsewhere on the site)
   Append this block to your main stylesheet.
   ============================================================ */



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

.aseel-hero-plain .aseel-hero-layout {
	display: block;
	position: static;
	margin: 0;
	max-width: 820px;
	padding: 0;
	width: auto;
}
.aseel-hero { padding: 0 0 15px; background: linear-gradient(180deg, #fbf9f9 0%, #f3edef 100%); border-bottom: 1px solid var(--line); }
.aseel-hero-layout { min-height: 250px; padding-top: 36px; display: grid; align-items: center; }
.aseel-hero-copy { min-width: 0; }
.aseel-hero-copy h1 { margin: 0; font-size: clamp(39px, 3.6vw, 54px); line-height: 1.19; letter-spacing: -.028em; text-wrap: balance; }
.aseel-hero-copy > span { display: block; max-width: 700px; margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.95; text-wrap: pretty; }

.aseel-hero-plain { padding-bottom: 12px; }
.aseel-hero-plain .aseel-hero-layout { min-height: auto; grid-template-columns: 1fr; }
.aseel-hero-plain .aseel-hero-layout {
	display: block;
	position: static;
	margin: 0;
	max-width: 820px;
	padding: 0;
	width: auto;
}
.aseel-hero-plain .aseel-hero-copy { position: static; margin: 0; width: auto; max-width: 100%; }

.aseel-actions { margin-top: 31px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---------- Intro / requirements ---------- */
.aseel-intro { padding: 35px 0; }
.aseel-intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: start; }

.aseel-section-heading { max-width: 820px; }
.aseel-section-heading > p { margin: 0 0 11px; color: var(--brand); font-size: 12px; font-weight: 800; }
.aseel-section-heading h2 { margin: 0; font-size: clamp(32px, 2.8vw, 43px); line-height: 1.32; letter-spacing: -.02em; text-wrap: balance; }
.aseel-section-heading > span { display: block; max-width: 760px; margin-top: 15px; color: var(--muted); font-size: 15px; line-height: 1.9; text-wrap: pretty; }
.aseel-section-heading.aseel-is-centered { margin-inline: auto; text-align: center; }
.aseel-section-heading.aseel-is-centered > span { margin-inline: auto; }

.aseel-requirements-panel { padding: 28px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.aseel-requirements-panel > b { display: block; margin-bottom: 20px; color: var(--brand-dark); font-size: 13px; }
.aseel-requirements-panel > div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.aseel-requirements-panel span { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 700; }

/* ---------- Features ---------- */
.aseel-features-section { padding: 100px 0; background: var(--canvas); }
.aseel-feature-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.aseel-feature-card {
	position: relative;
	padding: 38px 32px 32px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid transparent;
	transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.aseel-feature-card:hover { transform: translateY(-6px); border-top-color: var(--brand); box-shadow: 0 22px 50px rgba(47, 15, 27, .1); }
.aseel-feature-index { position: absolute; top: 14px; inset-inline-end: 22px; z-index: 0; color: rgba(198, 0, 61, .08); font: 800 60px/1 Arial, sans-serif; pointer-events: none; }
.aseel-feature-card h3 { position: relative; z-index: 1; margin: 6px 0 12px; font-size: 20px; line-height: 1.4; }
.aseel-feature-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

/* ---------- Process / steps ---------- */
.aseel-process-section { padding: 100px 0; background: #fff; }
.aseel-process-track { position: relative; margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); }
.aseel-process-track::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	z-index: 1;
	background-image: repeating-linear-gradient(to right, var(--brand-soft) 0 8px, transparent 8px 16px);
}
.aseel-process-step { position: relative; z-index: 2; padding: 0 20px; text-align: center; }
.aseel-process-node {
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font: 800 20px Arial, sans-serif;
	box-shadow: 0 10px 24px rgba(198, 0, 61, .28);
}
.aseel-process-step h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.4; }
.aseel-process-step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* ---------- Glossary / FAQ ---------- */
.aseel-faq-section { padding-top: 40px; padding-bottom: 110px; background: var(--canvas); }
.aseel-faq-list { margin-top: 46px; max-width: 880px; margin-inline: auto; display: grid; gap: 14px; }
.aseel-faq-item { background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.aseel-faq-item[open] { border-inline-start-color: var(--brand); box-shadow: 0 18px 40px rgba(47, 15, 27, .08); }
.aseel-faq-item summary {
	min-height: 84px;
	padding: 20px 28px;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 30px;
	align-items: center;
	gap: 20px;
	cursor: pointer;
	list-style: none;
}
.aseel-faq-item summary::-webkit-details-marker { display: none; }
.aseel-faq-index { color: var(--brand); font: 800 15px Arial, sans-serif; opacity: .45; transition: opacity .2s ease; }
.aseel-faq-item[open] .aseel-faq-index { opacity: 1; }
.aseel-faq-item summary b { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.aseel-faq-toggle-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--canvas);
	color: var(--brand);
	transition: background .2s ease, color .2s ease, transform .25s ease;
}
.aseel-faq-item[open] .aseel-faq-toggle-icon { background: var(--brand); color: #fff; transform: rotate(135deg); }
.aseel-faq-answer { overflow: hidden; padding: 0 28px 28px 88px; }
.aseel-faq-answer p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.9; max-width: 65ch; }

/* ---------- CTA ---------- */
.aseel-cta { padding: 72px 0; background: #710022; color: #fff; }
.aseel-cta-layout { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.aseel-cta-layout p { margin: 0 0 8px; color: #efa1b8; font-size: 11px; font-weight: 800; }
.aseel-cta-layout h2 { margin: 0; max-width: 780px; font-size: clamp(30px, 2.7vw, 41px); line-height: 1.3; }
.aseel-cta-layout .primary-action { flex: 0 0 auto; background: #fff; border-color: #fff; color: var(--brand-dark); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
	.aseel-hero-layout { grid-template-columns: 1fr; min-height: 0; padding-top: 46px; }
	.aseel-hero-plain .aseel-hero-layout { min-height: 310px; }
	.aseel-intro-grid { grid-template-columns: 1fr; gap: 46px; }
	.aseel-feature-grid { grid-template-columns: repeat(2, 1fr); }
	.aseel-process-track { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
	.aseel-process-track::before { display: none; }
}

@media (max-width: 680px) {
	.breadcrumbs { padding-top: 13px; }
	.aseel-hero-layout { gap: 38px; padding-top: 36px; }
	.aseel-hero-copy h1 { font-size: 38px; }
	.aseel-hero-copy > span { font-size: 15px; }
	.aseel-actions { align-items: stretch; flex-direction: column; }
	.aseel-actions > a { width: 100%; }
	.aseel-section-heading h2 { font-size: 31px; }
	.aseel-intro,
	.aseel-features-section,
	.aseel-process-section,
	.aseel-faq-section { padding-top: 72px; padding-bottom: 76px; }
	.aseel-requirements-panel > div { grid-template-columns: 1fr; }
	.aseel-feature-grid { grid-template-columns: 1fr; }
	.aseel-process-track { grid-template-columns: 1fr; row-gap: 40px; }
	.aseel-faq-item summary { min-height: auto; padding: 18px 20px; grid-template-columns: 30px minmax(0, 1fr) 26px; gap: 12px; }
	.aseel-faq-index { font-size: 13px; }
	.aseel-faq-item summary b { font-size: 14.5px; }
	.aseel-faq-toggle-icon { width: 26px; height: 26px; }
	.aseel-faq-answer { padding: 0 20px 22px 62px; }
	.aseel-cta-layout { align-items: flex-start; flex-direction: column; gap: 28px; }
	.aseel-cta-layout .primary-action { width: 100%; }
}







/* ============ Product detail: database showcase ============ */
/* .db-showcase { padding: 30px 0 90px; }

.db-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.db-card {
	position: relative;
	padding: 46px 34px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	overflow: hidden;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease var(--db-delay), transform .6s cubic-bezier(.16,1,.3,1) var(--db-delay),
		background .3s ease;
}
.db-card.is-visible { opacity: 1; transform: translateY(0); }
.db-card:hover { background: #fffafb; }


.db-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand-dark), var(--brand));
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.db-card:hover::before { transform: scaleX(1); }

.db-card-index {
	position: absolute;
	top: 18px;
	inset-inline-end: 24px;
	color: rgba(198,0,61,.09);
	font: 800 46px/1 Arial, sans-serif;
	pointer-events: none;
	transition: color .3s ease, transform .3s ease;
}
.db-card:hover .db-card-index { color: rgba(198,0,61,.2); transform: translateY(-2px); }

.db-card-badge {
	position: relative;
	width: 130px;
	height: 130px;
	margin-bottom: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--brand-soft);
	transform: scale(.7);
	opacity: 0;
	transition: transform .55s cubic-bezier(.34,1.5,.5,1) calc(var(--db-delay) + 120ms),
		opacity .45s ease calc(var(--db-delay) + 120ms), box-shadow .3s ease, background .3s ease;
}
.db-card.is-visible .db-card-badge { transform: scale(1); opacity: 1; }
.db-card:hover .db-card-badge {
	background: #fbe7ed;
	box-shadow: 0 14px 34px rgba(198,0,61,.2);
}


.db-card-badge::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(198,0,61,.22);
	opacity: 0;
}
.db-card.is-visible .db-card-badge::after {
	animation: db-halo 3s cubic-bezier(.2,.6,.4,1) calc(var(--db-delay) + 800ms) infinite;
}
@keyframes db-halo {
	0%   { opacity: .55; transform: scale(1); }
	70%  { opacity: 0;   transform: scale(1.22); }
	100% { opacity: 0;   transform: scale(1.22); }
}

.db-card-icon {
	width: 84px;
	height: 84px;
	object-fit: contain;
	transition: transform .35s cubic-bezier(.34,1.5,.5,1);
}
.db-card:hover .db-card-icon { transform: scale(1.09) rotate(-3deg); }
[dir="rtl"] .db-card:hover .db-card-icon { transform: scale(1.09) rotate(3deg); }

.db-card h3 {
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: -.01em;
	transition: color .25s ease;
}
.db-card:hover h3 { color: var(--brand); }

.db-card p {
	margin: 0;
	max-width: 32ch;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.85;
}


.db-card-rule {
	width: 0;
	height: 2px;
	margin-top: 22px;
	background: var(--brand);
	transition: width .5s cubic-bezier(.16,1,.3,1) calc(var(--db-delay) + 320ms);
}
.db-card.is-visible .db-card-rule { width: 34px; }
.db-card:hover .db-card-rule { width: 58px; }

@media (max-width: 980px) {
	.db-grid { grid-template-columns: repeat(2, 1fr); }
	.db-card { padding: 38px 26px 34px; }
	.db-card-badge { width: 110px; height: 110px; }
	.db-card-icon { width: 70px; height: 70px; }
}

@media (max-width: 680px) {
	.db-showcase { padding: 20px 0 64px; }
	.db-grid { grid-template-columns: 1fr; }
	.db-card { padding: 34px 24px 30px; }
	.db-card-index { font-size: 38px; top: 14px; inset-inline-end: 18px; }
	.db-card h3 { font-size: 20px; }
} */



/* ============ Mandumah databases showcase (isolated namespace) ============ */
.mnd-databases { padding: 30px 0 90px; }

.mnd-databases .mnd-db-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.mnd-databases .mnd-db-card {
	position: relative;
	padding: 40px 28px 34px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	background: #fff;
	border: 1px solid var(--line);
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1),
		box-shadow .3s ease, border-color .3s ease;
}
.mnd-databases .mnd-db-card.is-in { opacity: 1; transform: translateY(0); }
.mnd-databases .mnd-db-card:hover {
	border-color: #e3c3cd;
	box-shadow: 0 22px 50px rgba(47,15,27,.11);
	transform: translateY(-5px);
}

/* Gradient top bar that wipes in when revealed */
.mnd-databases .mnd-db-card::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--brand-dark), var(--brand));
	transform: scaleX(0);
	transform-origin: inset-inline-start;
	transition: transform .6s cubic-bezier(.16,1,.3,1) .1s;
}
.mnd-databases .mnd-db-card.is-in::before { transform: scaleX(1); }

.mnd-databases .mnd-db-num {
	position: absolute;
	top: 20px;
	inset-inline-end: 24px;
	color: rgba(198,0,61,.1);
	font: 800 40px/1 Arial, sans-serif;
	pointer-events: none;
	transition: color .3s ease;
}
.mnd-databases .mnd-db-card:hover .mnd-db-num { color: rgba(198,0,61,.22); }

.mnd-databases .mnd-db-icon-wrap {
	width: 84px;
	height: 84px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--brand-soft);
	border-radius: 18px;
	transform: scale(.75) rotate(-6deg);
	opacity: 0;
	transition: transform .5s cubic-bezier(.34,1.4,.5,1) .12s, opacity .4s ease .12s,
		background .3s ease, box-shadow .3s ease;
}
.mnd-databases .mnd-db-card.is-in .mnd-db-icon-wrap { transform: scale(1) rotate(0deg); opacity: 1; }
.mnd-databases .mnd-db-card:hover .mnd-db-icon-wrap {
	background: var(--brand);
	box-shadow: 0 14px 30px rgba(198,0,61,.28);
}

.mnd-databases .mnd-db-icon {
	width: 46px;
	height: 46px;
	object-fit: contain;
	transition: transform .3s ease, filter .3s ease;
}
.mnd-databases .mnd-db-card:hover .mnd-db-icon {
	transform: scale(1.08);
	filter: brightness(0) invert(1);
}

.mnd-databases .mnd-db-title {
	margin: 0 0 12px;
	font-size: 21px;
	line-height: 1.4;
	letter-spacing: -.01em;
	transition: color .25s ease;
}
.mnd-databases .mnd-db-card:hover .mnd-db-title { color: var(--brand); }

.mnd-databases .mnd-db-desc {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.85;
}

@media (max-width: 980px) {
	.mnd-databases .mnd-db-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.mnd-databases { padding: 20px 0 64px; }
	.mnd-databases .mnd-db-grid { grid-template-columns: 1fr; gap: 16px; }
	.mnd-databases .mnd-db-card { padding: 32px 22px 28px; }
	.mnd-databases .mnd-db-icon-wrap { width: 70px; height: 70px; border-radius: 14px; }
	.mnd-databases .mnd-db-icon { width: 38px; height: 38px; }
}






/* Small fix needed for the rail-carousel direction JS change:
   makes the prev/next chevrons point the right way in both
   RTL and LTR instead of assuming RTL. */
.rail-controls .rail-next svg { transform: rotate(180deg); }
[dir="ltr"] .rail-controls #railPrev svg { transform: rotate(180deg); }
[dir="ltr"] .rail-controls .rail-next svg { transform: rotate(0deg); }

/* ============ mnd-analytics: redesigned, always-visible, live/animated ============ */
.mnd-analytics-section { padding: 40px 0; background: var(--canvas); }

.mnd-analytics-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.mnd-analytics-card {
	position: relative;
	padding: 30px 26px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mnd-analytics-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(47,15,27,.12); }
.mnd-analytics-card-stats { padding-top: 54px; }
.mnd-analytics-card-link { display: block; color: inherit; text-decoration: none; }

.mnd-analytics-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.mnd-analytics-card-head span {
	width: 32px; height: 32px; border-radius: 10px;
	background: var(--brand-soft); color: var(--brand);
	display: grid; place-items: center; flex: 0 0 auto;
}
.mnd-analytics-card-head b { font-size: 14px; }

.mnd-analytics-card-cta { margin-top: 20px; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 12px; font-weight: 800; }
.mnd-analytics-card-link:hover .mnd-analytics-card-cta svg { transform: translateX(-4px); }
.mnd-analytics-card-cta svg { transition: transform .2s ease; }

/* Live badge */
.mnd-analytics-live-badge {
	position: absolute; top: 22px; inset-inline-end: 22px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px; border-radius: 20px;
	background: #eaf7ec; color: #2f8a3a;
	font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}
.mnd-analytics-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2f8a3a; animation: mnd-analytics-live-pulse 1.6s ease-in-out infinite; }
@keyframes mnd-analytics-live-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(47,138,58,.5); }
	50% { opacity: .6; box-shadow: 0 0 0 5px rgba(47,138,58,0); }
}

/* KPI grid */
.mnd-analytics-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.mnd-analytics-kpi { padding: 13px; text-align: center; background: var(--canvas); border: 1px solid var(--line); }
.mnd-analytics-kpi b { display: block; color: var(--brand); font-size: 18px; font-weight: 800; }
.mnd-analytics-kpi span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }

/* Donut */
.mnd-analytics-donut-wrap { display: flex; align-items: center; gap: 18px; }
.mnd-analytics-donut-svg { width: 108px; height: 108px; flex: 0 0 auto; transform: rotate(-90deg); }
.mnd-analytics-donut-track { fill: none; stroke: var(--canvas); stroke-width: 12; }
.mnd-analytics-donut-seg { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 314.159; transform-origin: 50% 50%; transition: stroke-dasharray 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
.mnd-analytics-donut-seg-a { stroke: var(--brand); }
.mnd-analytics-donut-seg-b { stroke: #4a6fa5; }
.mnd-analytics-grid.is-visible .mnd-analytics-donut-seg-a { stroke-dasharray: calc(var(--pct) * 3.14159) 314.159; }
.mnd-analytics-grid.is-visible .mnd-analytics-donut-seg-b { stroke-dasharray: calc(var(--pct) * 3.14159) 314.159; transform: rotate(calc(var(--offset) * 3.6deg)); }
.mnd-analytics-donut-hole {
	position: absolute; inset: 16px; border-radius: 50%; background: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mnd-analytics-card-stats .mnd-analytics-donut-wrap { position: relative; }
.mnd-analytics-donut-hole b { font-size: 13px; font-weight: 800; color: var(--ink); }
.mnd-analytics-donut-hole span { font-size: 8px; color: var(--muted); }
.mnd-analytics-donut-legend { display: grid; gap: 8px; }
.mnd-analytics-donut-legend span { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.mnd-analytics-donut-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Database leaderboard */
.mnd-analytics-db-row {
	display: grid; grid-template-columns: 28px 88px 1fr 58px 16px;
	align-items: center; gap: 10px; margin-bottom: 13px;
	opacity: 0; transform: translateX(-8px);
	transition: opacity .5s ease var(--row-delay), transform .5s ease var(--row-delay);
}
[dir="rtl"] .mnd-analytics-db-row { transform: translateX(8px); }
.mnd-analytics-grid.is-visible .mnd-analytics-db-row { opacity: 1; transform: translateX(0); }
.mnd-analytics-db-rank { font: 800 10px Arial, sans-serif; color: var(--muted); }
.mnd-analytics-db-name { color: var(--ink-soft); font-size: 10.5px; font-weight: 700; }
.mnd-analytics-db-track { height: 9px; border-radius: 6px; background: var(--canvas); overflow: hidden; }
.mnd-analytics-db-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); transition: width 1s cubic-bezier(.16,1,.3,1) calc(var(--row-delay) + .15s); position: relative; overflow: hidden; }
.mnd-analytics-grid.is-visible .mnd-analytics-db-fill { width: var(--pct); }
.mnd-analytics-db-value { text-align: end; color: var(--brand-dark); font-size: 10.5px; font-weight: 800; }
.mnd-analytics-db-crown { color: var(--brand); display: inline-flex; }
.mnd-analytics-db-row.mnd-is-leader .mnd-analytics-db-fill::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 48%, transparent 66%);
	transform: translateX(-140%);
	animation: mnd-analytics-shimmer 2.4s ease-in-out calc(var(--row-delay) + 1.2s) infinite;
}
@keyframes mnd-analytics-shimmer { to { transform: translateX(140%); } }

.mnd-analytics-db-split { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.mnd-analytics-sbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; opacity: 0; transform: translateY(6px); transition: opacity .45s ease var(--row-delay), transform .45s ease var(--row-delay); }
.mnd-analytics-grid.is-visible .mnd-analytics-sbar-row { opacity: 1; transform: translateY(0); }
.mnd-analytics-sbar-name { width: 68px; flex: 0 0 auto; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.mnd-analytics-sbar-track { flex: 1; height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: var(--canvas); }
.mnd-analytics-sbar-seg { height: 100%; width: 0; transition: width 1s cubic-bezier(.16,1,.3,1) calc(var(--row-delay) + .2s); }
.mnd-analytics-grid.is-visible .mnd-analytics-sbar-seg { width: var(--pct); }

/* Client growth line chart */
.mnd-analytics-growth-badge { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 20px; padding: 8px 14px; background: var(--brand-soft); border: 1px solid rgba(198,0,61,.18); }
.mnd-analytics-growth-badge b { color: var(--brand); font-size: 20px; font-weight: 800; }
.mnd-analytics-growth-badge span { color: var(--brand-dark); font-size: 10px; font-weight: 600; }

.mnd-analytics-growth-chart-wrap { position: relative; }
.mnd-analytics-growth-svg { width: 100%; height: 130px; display: block; overflow: visible; }
.mnd-analytics-growth-area { opacity: 0; transition: opacity .8s ease .3s; }
.mnd-analytics-grid.is-visible .mnd-analytics-growth-area { opacity: 1; }
.mnd-analytics-growth-line {
	stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 400; stroke-dashoffset: 400;
	transition: stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) .1s;
}
.mnd-analytics-grid.is-visible .mnd-analytics-growth-line { stroke-dashoffset: 0; }
.mnd-analytics-growth-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	transition: opacity .3s ease var(--dot-delay), transform .35s cubic-bezier(.34,1.6,.64,1) var(--dot-delay);
}
.mnd-analytics-grid.is-visible .mnd-analytics-growth-dot { opacity: 1; transform: scale(1); }
.mnd-analytics-growth-dot:last-child { animation: mnd-analytics-dot-pulse 2s ease-in-out 1.8s infinite; }
@keyframes mnd-analytics-dot-pulse {
	0%, 100% { r: 3.4; filter: drop-shadow(0 0 0 rgba(198,0,61,0)); }
	50% { r: 4.4; filter: drop-shadow(0 0 5px rgba(198,0,61,.6)); }
}
.mnd-analytics-growth-labels { display: flex; justify-content: space-between; margin-top: 10px; direction:ltr}
.mnd-analytics-growth-labels div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mnd-analytics-growth-labels b { font-size: 13px; font-weight: 800; color: var(--ink); }
.mnd-analytics-growth-labels span { font-size: 10px; color: var(--muted); font-weight: 700; }

@media (max-width: 980px) { .mnd-analytics-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
	.mnd-analytics-section { padding: 72px 0; }
	.mnd-analytics-card { padding: 24px 20px; }
	.mnd-analytics-card-stats { padding-top: 46px; }
}











/* ============================================================
   LDOC — Legal Document design system
   Scoped entirely under .ldoc-* — does not touch or override
   any existing .legal-content / .internal-* / .faq-* rules.
   Used by: terms.php, privacy.php, accessibility.php

   Animations reuse the site-wide reveal system already defined
   at the top of style.css:
     .motion-enabled [data-reveal] { opacity:0; transform:translateY(18px); ... }
     .motion-enabled [data-reveal].is-visible { opacity:1; transform:none; }
   So every element below that should animate in just carries
   a data-reveal attribute in the PHP — no extra JS required.
   ============================================================ */

/* ---------- Hero ---------- */
.ldoc-hero {
	position: relative;
	padding: 74px 0 64px;
	overflow: hidden;
	background: linear-gradient(160deg, #2c0716 0%, #57001f 46%, #740023 100%);
	color: #fff;
}
.ldoc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(560px 320px at 85% -10%, rgba(255,255,255,.10), transparent 60%),
		radial-gradient(420px 260px at -5% 110%, rgba(255,255,255,.07), transparent 60%);
	pointer-events: none;
}
.ldoc-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.ldoc-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	margin-bottom: 20px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	color: #f5b4c6;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	animation: ldoc-fade-in .5s ease both;
}
.ldoc-hero h1 {
	margin: 0;
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.2;
	letter-spacing: -.02em;
	animation: ldoc-fade-in .55s ease .05s both;
}
.ldoc-hero-summary {
	display: block;
	max-width: 620px;
	margin-top: 18px;
	color: rgba(255,255,255,.75);
	font-size: 15px;
	line-height: 1.9;
	animation: ldoc-fade-in .55s ease .1s both;
}
.ldoc-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
	animation: ldoc-fade-in .55s ease .15s both;
}
.ldoc-hero-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.85);
	font-size: 12px;
	font-weight: 700;
}
@keyframes ldoc-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Shell: sticky TOC + article ---------- */
.ldoc-shell {
	padding: 64px 0 110px;
	display: grid;
	grid-template-columns: 250px minmax(0, 760px);
	gap: 64px;
	align-items: start;
}
.ldoc-toc { position: sticky; top: 110px; }
.ldoc-toc b {
	display: block;
	margin-bottom: 16px;
	color: var(--brand);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.ldoc-toc nav { display: grid; border-inline-start: 2px solid var(--line); }
.ldoc-toc a {
	padding: 9px 0 9px 18px;
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	transition: color .2s ease, border-color .2s ease;
}
.ldoc-toc a:hover,
.ldoc-toc a.is-active { color: var(--brand); border-inline-start-color: var(--brand); }

/* ---------- Article sections ---------- */
.ldoc-article { display: grid; gap: 4px; }
.ldoc-section {
	padding: 30px 0;
	border-bottom: 1px solid var(--line);
	scroll-margin-top: 120px;
}
.ldoc-section:last-of-type { border-bottom: 0; }
.ldoc-section-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}
.ldoc-section-num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: var(--brand-soft);
	color: var(--brand);
	font: 800 13px Arial, sans-serif;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ldoc-section:hover .ldoc-section-num { background: var(--brand); color: #fff; transform: scale(1.06); }
.ldoc-section h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.ldoc-section p { margin: 0; padding-inline-start: 48px; color: var(--muted); font-size: 15px; line-height: 1.95; }

/* ---------- Callout note ---------- */
.ldoc-callout {
	margin-top: 36px;
	padding: 20px 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fbf1f4;
	border-inline-start: 4px solid var(--brand);
}
.ldoc-callout svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand); }
.ldoc-callout span { color: var(--brand-dark); font-size: 13px; font-weight: 700; line-height: 1.8; }

/* ---------- Language / print row ---------- */
.ldoc-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 34px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
.ldoc-toolbar-print {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--brand-dark);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.ldoc-toolbar-print:hover { border-color: var(--brand); background: #fff7f9; }

/* =========== Accessibility-page-only additions =========== */

/* Commitment / conformance cards */
.ldoc-commit-grid {
	margin: 6px 0 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ldoc-commit-card {
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	transition: transform .25s ease, box-shadow .25s ease;
}
.ldoc-commit-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(47,15,27,.1); }
.ldoc-commit-icon {
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	display: grid;
	place-items: center;
	background: var(--brand-soft);
	color: var(--brand);
	border-radius: 50%;
}
.ldoc-commit-card b { display: block; margin-bottom: 6px; font-size: 15px; }
.ldoc-commit-card span { color: var(--muted); font-size: 13px; line-height: 1.75; }

/* PDF download card */
.ldoc-download-card {
	margin: 8px 0 44px;
	padding: 26px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: #21161a;
	color: #fff;
}
.ldoc-download-info { display: flex; align-items: center; gap: 16px; }
.ldoc-download-icon {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.1);
	color: #f5b4c6;
	border-radius: 50%;
}
.ldoc-download-info b { display: block; font-size: 15px; }
.ldoc-download-info span { color: rgba(255,255,255,.55); font-size: 12px; }
.ldoc-download-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 20px;
	background: #fff;
	color: var(--brand-dark);
	font-size: 13px;
	font-weight: 800;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ldoc-download-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.25); }

/* Feedback / contact card */
.ldoc-contact-card {
	margin-top: 40px;
	padding: 28px 30px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px;
	background: var(--canvas);
	border: 1px solid var(--line);
}
.ldoc-contact-card b { display: block; font-size: 16px; }
.ldoc-contact-card span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.ldoc-contact-card a.ldoc-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--brand);
	font-size: 13px;
	font-weight: 800;
	border-bottom: 1px solid rgba(198,0,61,.35);
	padding-bottom: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ldoc-shell { grid-template-columns: 1fr; gap: 34px; }
	.ldoc-toc { position: static; }
	.ldoc-toc nav { display: flex; flex-wrap: wrap; gap: 6px; border-inline-start: 0; }
	.ldoc-toc a { border: 1px solid var(--line); border-inline-start: 1px solid var(--line); padding: 7px 12px; }
	.ldoc-toc a.is-active, .ldoc-toc a:hover { border-color: var(--brand); background: var(--brand-soft); }
	.ldoc-commit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.ldoc-hero { padding: 56px 0 46px; }
	.ldoc-shell { padding: 46px 0 76px; }
	.ldoc-section p { padding-inline-start: 0; }
	.ldoc-section-head { align-items: flex-start; }
	.ldoc-commit-grid { grid-template-columns: 1fr; }
	.ldoc-download-card { padding: 22px; }
	.ldoc-contact-card { grid-template-columns: 1fr; text-align: start; }
}

@media print {
	.main-header, .site-footer, .ldoc-toc, .ldoc-toolbar-print, .breadcrumbs { display: none !important; }
	.ldoc-hero { background: #fff !important; color: #000 !important; padding: 0 0 20px; }
	.ldoc-badge, .ldoc-hero-meta span { border-color: #ccc !important; color: #000 !important; background: none !important; }
	.ldoc-shell { grid-template-columns: 1fr; padding-top: 20px; }
	.ldoc-section-num { background: none !important; color: #000 !important; border: 1px solid #000; }
}




/* ============ From here new css will be added 
from these css i need to add in the github ============ */


.theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.theme-toggle-btn:hover { color: var(--brand); }




:root[data-theme="dark"] {
  --brand: #ff5c81;
  --brand-dark: #ff8fa8;
  --brand-soft: rgba(255, 92, 129, .14);
  --ink: #f3eef0;
   --ink-soft: #e3d9dc;   /* was #cdc0c4 */
  --muted: #cfc3c8;      /* was #948589 */
  --canvas: #130f12;
  --surface: #1c1519;
  --surface-2: #241a1e;
  --warm: #241c20;     /* was missing — this alone caused several washed-out boxes */
  --line: #3a2c31;
  --shadow: 0 24px 60px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---- Section wrappers that used literal light hex instead of var(--canvas) ---- */
:root[data-theme="dark"] :is(
  .services-section, .about-sectors, .client-groups, .internal-features,
  .about-hero, .request-hero, .internal-hero, .article-page,
  .aseel-hero, .training-detail
) {
  background: var(--canvas) !important;
}

/* ---- "Card" blocks that used literal #fff instead of var(--surface) ---- */
:root[data-theme="dark"] :is(
  .product-stage, .insights-section, .about-cta, .internal-feature-grid,
  .service-process-section, .service-tabs-experience, .aseel-process-section,
  .aseel-requirements-panel
) {
  background: var(--surface) !important;
}

/* ---- Everything from the previous pass, unchanged ---- */
:root[data-theme="dark"] :is(
  .main-header, .nav-popover, .publish-panel, .product-experience, .product-search > div,
  .product-launch, .product-interface, .service-card, .leadership-list article,
  .news-grid > a, .training-grid > a, .support-grid, .request-form, .index-card,
  .database-index-grid .index-card, .faq-item, .aseel-faq-item, .ldoc-commit-card,
  .analytics-card, .analytics-compact, .mnd-analytics-card, .client-card,
  .mnd-databases .mnd-db-card, .about-timeline-card, .form-success, .compact-success,
  .internal-listing-card, .audience-panel, .operating-model > div,
  .about-leadership article, .about-stats-grid, .reach-stats-grid, .reach-section > div,
  .db-card, .news-card, .rcard, .journey-section, .journey-grid a,
  .service-feature-card, .aseel-feature-card, .service-outcomes-panel,
  .service-audience-panel, .vstat-card, .video-modal > div, .ldoc-download-card,
  .ldoc-contact-card, .not-found, .legal-content aside
) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .journey-grid a:hover { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .journey-grid a:hover p,
:root[data-theme="dark"] .journey-grid a:hover span { color: rgba(255,255,255,.8); }

:root[data-theme="dark"] :is(
  .request-form input, .request-form select, .request-form textarea,
  .product-search input, .clients-search-bar input, .file-field,
  .analytics-kpi, .signature-pad-wrap, .path-selector > button,
  .service-type-selector button, .choice-card, .consent-check,
  .delivery-note, .selected-service-summary
) {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .request-form input:focus,
:root[data-theme="dark"] .request-form select:focus,
:root[data-theme="dark"] .request-form textarea:focus { background: var(--surface); border-color: var(--brand); }
:root[data-theme="dark"] .path-selector > button.is-selected { background: var(--brand-soft); border-color: var(--brand); }
:root[data-theme="dark"] .service-type-selector button.is-selected { background: var(--brand); color: #fff; }

:root[data-theme="dark"] .form-submit-error { background: rgba(217,45,32,.14); border-color: #d92d20; color: #ff9b8f; }
:root[data-theme="dark"] .field-error { color: #ff9b8f; }
:root[data-theme="dark"] .logo-item img { opacity: .85; filter: brightness(1.15); }
:root[data-theme="dark"] .utility-bar { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .utility-layout > div span { background: var(--line); }
:root[data-theme="dark"] .mobile-nav { background: var(--canvas); }
:root[data-theme="dark"] .mobile-nav nav a { border-color: var(--line); }
:root[data-theme="dark"] .mobile-nav-utility { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--brand); color: #fff; }

/* ---- Safety net: catches any -card/-panel block I couldn't see in the CSS you pasted
   (your about.php "Our values" cards, for instance, aren't in the stylesheet you shared) ---- */
:root[data-theme="dark"] [class$="-card"]:not(.client-card-logo),
:root[data-theme="dark"] [class$="-panel"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}

















/* ---- Dark mode: mobile nav sub-items were invisible (light bg + light text) ---- */
:root[data-theme="dark"] .mobile-nav nav a.mobile-nav-sub {
	background: var(--surface-2);
	border-color: var(--line);
	color: var(--ink-soft);
}
:root[data-theme="dark"] .mobile-nav nav a {
	border-color: var(--line);
	color: var(--ink);
}





/* ---- News article body used a hardcoded dark color -> invisible on dark canvas ---- */
:root[data-theme="dark"] {
	--news-ink: var(--ink);
	--news-crimson: var(--brand);
	--news-crimson-deep: var(--brand-dark);
	--news-rule: var(--line);
	--news-slate: var(--muted);
	--news-card-bg: var(--surface);
}
:root[data-theme="dark"] .article-body,
:root[data-theme="dark"] .article-body p,
:root[data-theme="dark"] .news-card-body p {
	color: var(--ink-soft);
}

/* ---- Electronic declaration box: hardcoded white/pink gradient + light-ink text on top = unreadable ---- */
:root[data-theme="dark"] .electronic-declaration {
	background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
	border-color: var(--line);
}

/* ---- Small polish: progress bar track + help-text chip were hardcoded light ---- */
:root[data-theme="dark"] .form-progress > div { background: var(--surface-2); }
:root[data-theme="dark"] .field-label small { background: var(--surface-2); color: var(--muted); }

/* ---- Editorial icon badge: translucent white looked like a washed-out blob on dark canvas ---- */
:root[data-theme="dark"] .editorial-icon {
	background: var(--brand-soft);
	border-color: rgba(255,92,129,.3);
}


.mobile-nav-utility-right { display: flex; align-items: center; gap: 12px; }
.theme-toggle-btn--mobile {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink-soft);
	transition: border-color .2s ease, color .2s ease;
}
.theme-toggle-btn--mobile:hover { border-color: var(--brand); color: var(--brand); }

:root[data-theme="dark"] .theme-toggle-btn--mobile {
	background: var(--surface-2);
	border-color: var(--line);
	color: var(--ink-soft);
}












.clients-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.clients-country-select {
    padding: 10px 14px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 160px;
}

.clients-country-select:focus {
    outline: none;
    border-color: var(--primary-color, #0d6efd);
}









.clients-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;           /* was: wrap — this was letting it drop to a new line */
    max-width: 600px;            /* adjust to match your current search bar's width */
    margin: 0 auto 40px;
}

.clients-search-bar input[type="text"] {
    flex: 1 1 auto;
    width: auto;                 /* overrides any existing width: 100% on the input */
    min-width: 0;                /* lets it shrink instead of forcing a wrap */
}

.clients-country-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    white-space: nowrap;
}

/* Optional: only stack on very small screens */
@media (max-width: 480px) {
    .clients-search-bar {
        flex-wrap: wrap;
    }
    .clients-search-bar input[type="text"],
    .clients-country-select {
        flex: 1 1 100%;
    }
}






.clients-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    max-width: 600px;
    margin: 0 auto 40px;
}

.clients-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.clients-search-input-wrap input[type="text"] {
    width: 100%;
    padding-right: 36px;   /* room for the icon inside the input */
}

.clients-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;   /* so it doesn't block clicks into the input */
}

.clients-country-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    white-space: nowrap;
}








.vstat-globe3d { width: 38px; height: 38px; perspective: 140px; }
.vstat-globe3d-clip {
	position: relative; width: 100%; height: 100%; border-radius: 50%;
	overflow: hidden;
	box-shadow: inset 0 0 6px rgba(0,0,0,.4), 0 0 0 1px var(--line);
}
.vstat-globe3d-ocean { position: absolute; inset: 0; background: #123a63; }

.vstat-globe3d-barrel {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	animation: vstat-globe3d-spin 40s linear infinite;
}
.vstat-card:hover .vstat-globe3d-barrel { animation-duration:18s; }
@keyframes vstat-globe3d-spin {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

.vstat-globe3d-slice {
	position: absolute; top: 0; left: 50%; height: 100%;
	width: var(--slice-w);
	margin-inline-start: calc(var(--slice-w) / -2);
	background-image: var(--map-url);
	background-repeat: no-repeat;
	background-size: var(--map-w) 100%;
	background-position: calc(var(--i) * var(--slice-w) * -1) center;
	transform: rotateY(calc(var(--i) * var(--angle-step))) translateZ(var(--radius));
	backface-visibility: hidden;
}

.vstat-globe3d-pin {
	position: absolute; left: 50%; top: var(--pin-top);
	width: 0; height: 0;
	transform: translateY(-50%) rotateY(var(--pin-angle)) translateZ(var(--radius));
	backface-visibility: hidden;
}
.vstat-globe3d-pin-dot {
	position: absolute; left: -2px; top: -2px;
	width: 4px; height: 4px; border-radius: 50%;
	background: var(--brand); opacity: 0; transform: scale(.3);
	animation: vstat-pin3d-dot-pop 5.4s ease-in-out infinite;
	animation-delay: var(--pin-delay);
}
.vstat-globe3d-pin-label {
	position: absolute; left: 50%; top: -9px; transform: translateX(-50%) translateY(2px);
	font: 700 5px Arial, sans-serif; color: var(--brand-dark);
	white-space: nowrap; opacity: 0;
	animation: vstat-pin3d-label-pop 5.4s ease-in-out infinite;
	animation-delay: var(--pin-delay);
}
@keyframes vstat-pin3d-dot-pop {
	0%, 8%   { opacity: 0; transform: scale(.3); }
	14%, 55% { opacity: 1; transform: scale(1); }
	70%,100% { opacity: 0; transform: scale(.3); }
}
@keyframes vstat-pin3d-label-pop {
	0%, 8%   { opacity: 0; transform: translateX(-50%) translateY(2px); }
	14%, 55% { opacity: 1; transform: translateX(-50%) translateY(0); }
	70%,100% { opacity: 0; transform: translateX(-50%) translateY(2px); }
}

.vstat-globe3d-sheen {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 55%);
}

























/* ============ Floating actions: WhatsApp + Feedback ============ */
.float-actions {
	position: fixed;
	inset-inline-end: 24px;
	bottom: 35px;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	pointer-events: none;
}
[dir="rtl"] .float-actions { align-items: flex-start; }
.float-actions > * { pointer-events: auto; }
body.nav-open .float-actions { display: none; }

/* ---- WhatsApp ---- */
.whatsapp-section { margin: 0; padding: 0; background: none; }
.whatsapp-btn {
	position: relative;
	width: 60px; height: 60px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(145deg, #2fe676 0%, #25d366 45%, #128c7e 100%);
	color: #fff;
	/* box-shadow: 0 12px 28px rgba(18, 140, 126, .42), inset 0 1px 0 rgba(255,255,255,.35);
	transition: transform .25s ease, box-shadow .25s ease; */
}
/* .whatsapp-btn::before,
.whatsapp-btn::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(37, 211, 102, .55);
	animation: wa-ripple 2.6s cubic-bezier(.2,.6,.4,1) infinite;
	pointer-events: none;
}
.whatsapp-btn::after { animation-delay: 1.3s; }
@keyframes wa-ripple {
	0%   { transform: scale(1);   opacity: .7; }
	80%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
} */
.whatsapp-btn svg { position: relative; z-index: 1; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.whatsapp-btn:hover { transform: translateY(-4px) scale(1.06); 
					 /* box-shadow: 0 18px 38px rgba(18, 140, 126, .5); */
					}
.whatsapp-btn:hover svg { transform: rotate(-10deg) scale(1.08); }
.whatsapp-btn:focus-visible { outline: 3px solid rgba(37,211,102,.4); outline-offset: 4px; }

.whatsapp-tooltip {
	position: absolute;
	inset-inline-end: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	padding: 8px 14px;
	background: #1c1719;
	color: #fff;
	font-size: 12px; font-weight: 800;
	white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
[dir="rtl"] .whatsapp-tooltip { transform: translateY(-50%) translateX(-6px); }
/* .whatsapp-btn:hover .whatsapp-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } */

/* ---- Feedback pill ---- */
.float-feedback {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 56px;
	padding: 0 6px;
	border-radius: 40px;
	background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
	color: #fff;
	box-shadow: 0 12px 30px rgba(198, 0, 61, .35);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.float-feedback::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
	transform: translateX(-140%);
	animation: fb-shine 5s ease-in-out 2s infinite;
	pointer-events: none;
}
@keyframes fb-shine { 0%, 60% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }

.float-feedback-icon {
	position: relative;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
}
.float-feedback-icon svg { animation: fb-wiggle 4s ease-in-out 3s infinite; transform-origin: center bottom; }
@keyframes fb-wiggle {
	0%, 90%, 100% { transform: rotate(0); }
	93% { transform: rotate(-12deg); }
	96% { transform: rotate(10deg); }
}
.float-feedback-dot {
	position: absolute; top: 6px; inset-inline-end: 6px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #ffd54a;
	border: 2px solid var(--brand);
	animation: fb-dot 1.8s ease-in-out infinite;
}
@keyframes fb-dot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,74,.6); }
	50%      { box-shadow: 0 0 0 6px rgba(255,213,74,0); }
}

/* Text slides open on hover/focus (always visible on touch is too big, so icon-only there) */
.float-feedback-text {
	display: grid;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	text-align: start;
	transition: max-width .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, margin .3s ease;
}
.float-feedback-text b { font-size: 13px; line-height: 1.3; }
.float-feedback-text small { font-size: 10.5px; opacity: .75; font-weight: 600; }
.float-feedback:hover, .float-feedback:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(198, 0, 61, .45); }
.float-feedback:hover .float-feedback-text,
.float-feedback:focus-visible .float-feedback-text {
	max-width: 190px;
	opacity: 1;
	margin-inline: 10px 16px;
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
	.float-actions { inset-inline-end: 16px; bottom: 16px; gap: 12px; }
	.whatsapp-btn { width: 54px; height: 54px; }
	.whatsapp-tooltip { display: none; }
	.float-feedback { height: 50px; }
	.float-feedback-icon { width: 40px; height: 40px; }
}

/* ---- Dark mode ---- */
:root[data-theme="dark"] .float-feedback { background: linear-gradient(135deg, #b3123f 0%, var(--brand) 100%); }
:root[data-theme="dark"] .whatsapp-tooltip { background: var(--surface-2); border: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
	.whatsapp-btn::before, .whatsapp-btn::after,
	.float-feedback::before, .float-feedback-icon svg, .float-feedback-dot { animation: none !important; }
}








/* ============ Feedback page (v2) ============ */
.fb-stage {
	position: relative;
	padding: 20px 0 110px;
	overflow: hidden;
}

/* Soft floating background blobs */
.fb-blob {
	position: absolute; border-radius: 50%; pointer-events: none;
	filter: blur(70px); opacity: .45;
}
/* .fb-blob-1 { width: 340px; height: 340px; top: -60px; inset-inline-start: -80px; background: var(--brand-soft); animation: fb-drift 14s ease-in-out infinite; }
.fb-blob-2 { width: 300px; height: 300px; bottom: 30px; inset-inline-end: -60px; background: rgba(198,0,61,.14); animation: fb-drift 17s ease-in-out infinite reverse; }
@keyframes fb-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(40px, 30px) scale(1.12); }
} */

/* Card */
.fb-card {
	position: relative; z-index: 1;
	max-width: 750px; margin: 10px auto 0;
	padding: 44px 40px 40px;
	display: grid; gap: 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	/* box-shadow: 0 30px 80px rgba(50,14,28,.14); */
	animation: fb-card-in .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fb-card-in {
	from { opacity: 0; transform: translateY(30px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.fb-head { text-align: center; }
.fb-icon {
	position: relative;
	width: 66px; height: 66px; margin: 0 auto 18px;
	display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-dark), var(--brand));
	color: #fff;
	box-shadow: 0 14px 30px rgba(198,0,61,.35);
	animation: fb-float 4s ease-in-out infinite;
}
.fb-icon::before, .fb-icon::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid rgba(198,0,61,.4);
	animation: fb-ring 2.8s cubic-bezier(.2,.6,.4,1) infinite;
}
.fb-icon::after { animation-delay: 1.4s; }
@keyframes fb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fb-ring {
	0%   { transform: scale(1);   opacity: .7; }
	80%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
.fb-icon svg { position: relative; z-index: 1; }
.fb-head h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 32px); line-height: 1.3; letter-spacing: -.015em; animation: fb-rise .6s ease .1s both; }
.fb-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; animation: fb-rise .6s ease .18s both; }

@keyframes fb-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Fields */
.fb-field { display: grid; gap: 9px; animation: fb-rise .6s ease var(--d, .2s) both; }
.fb-field > label { color: var(--ink); font-size: 14px; font-weight: 800; }
.fb-field > label i { color: var(--brand); font-style: normal; }



.fb-control { position: relative; }
.fb-ico {
	position: absolute; top: 50%; inset-inline-start: 15px; transform: translateY(-50%);
	color: #a99da1; pointer-events: none;
	transition: color .25s ease, transform .25s ease;
}
.fb-control-area .fb-ico { top: 20px; transform: none; }

.fb-control input, .fb-control textarea {
	width: 100%;
	padding: 14px 16px; padding-inline-start: 46px;
	border: 1.5px solid #d7ccd0; border-radius: 0;
	background: #fbf9f9; color: var(--ink);
	font-size: 14.5px; outline: 0;
	transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fb-control textarea { min-height: 130px; resize: vertical; line-height: 1.8; }
.fb-control input:focus, .fb-control textarea:focus {
	border-color: var(--brand); background: #fff;
	box-shadow: 0 0 0 4px rgba(198,0,61,.09);
}
.fb-control:focus-within .fb-ico { color: var(--brand); transform: translateY(-50%) scale(1.15); }
.fb-control-area:focus-within .fb-ico { transform: scale(1.15); }

/* Animated accent line under the focused field */
.fb-control::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, var(--brand-dark), var(--brand));
	transform: scaleX(0); transform-origin: center;
	transition: transform .35s cubic-bezier(.16,1,.3,1);
	pointer-events: none;
}
.fb-control:focus-within::after { transform: scaleX(1); }

.fb-control input:not(:placeholder-shown):valid { border-color: rgba(47,138,58,.5); }

.fb-counter { justify-self: end; color: var(--muted); font-size: 11px; font-weight: 700; }

/* Submit */
.fb-submit {
	position: relative; overflow: hidden;
	min-height: 54px; border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--brand-dark), var(--brand));
	color: #fff; font-size: 15px; font-weight: 800;
	/* box-shadow: 0 14px 30px rgba(198,0,61,.28); */
	transition: transform .25s ease, box-shadow .25s ease;
	animation: fb-rise .6s ease var(--d, .4s) both;
}
.fb-submit::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
	transform: translateX(-140%);
	animation: fb-shine 4.5s ease-in-out 1.5s infinite;
}
@keyframes fb-shine { 0%, 55% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
.fb-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(198,0,61,.38); }
.fb-submit:active { transform: translateY(0) scale(.98); }
.fb-submit-label { position: relative; display: inline-flex; align-items: center; gap: 9px; transition: opacity .2s ease; }
.fb-submit:hover .fb-submit-label svg { animation: fb-fly .6s ease; }
@keyframes fb-fly {
	40% { transform: translate(6px, -6px); }
	100% { transform: translate(0, 0); }
}
[dir="rtl"] .fb-submit-label svg { transform: scaleX(-1); }
[dir="rtl"] .fb-submit:hover .fb-submit-label svg { animation: none; }

.fb-spinner {
	position: absolute; width: 22px; height: 22px; border-radius: 50%;
	border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
	opacity: 0; animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-submit.is-loading { pointer-events: none; }
.fb-submit.is-loading .fb-submit-label { opacity: 0; }
.fb-submit.is-loading .fb-spinner { opacity: 1; }

.fb-error { animation: fb-shake .45s ease; }
@keyframes fb-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* Success state */
.fb-success { text-align: center; justify-items: center; padding: 56px 36px; }
.fb-check { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: #eaf7ec; animation: fb-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.fb-check svg { overflow: visible; }
.fb-check-ring { stroke: #2f8a3a; stroke-dasharray: 145; stroke-dashoffset: 145; animation: fb-draw .7s ease .2s forwards; }
.fb-check-tick { stroke: #2f8a3a; stroke-dasharray: 40; stroke-dashoffset: 40; animation: fb-draw .5s ease .8s forwards; }
@keyframes fb-draw { to { stroke-dashoffset: 0; } }
@keyframes fb-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fb-success h1 { margin: 6px 0 0; font-size: 32px; animation: fb-rise .6s ease .9s both; }
.fb-success p { margin: 0; max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.9; animation: fb-rise .6s ease 1s both; }
.fb-home-link {
	margin-top: 8px; padding: 13px 26px;
	border: 1.5px solid var(--brand); color: var(--brand);
	font-size: 14px; font-weight: 800;
	transition: background .2s ease, color .2s ease, transform .2s ease;
	animation: fb-rise .6s ease 1.1s both;
}
.fb-home-link:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

/* Mobile */
@media (max-width: 680px) {
	.fb-stage { padding: 10px 0 80px; }
	.fb-card { padding: 34px 20px 30px; }
	.fb-blob { opacity: .3; }
}

/* Dark mode */
:root[data-theme="dark"] .fb-card { box-shadow: 0 30px 80px rgba(0,0,0,.55); }
:root[data-theme="dark"] .fb-control input,
:root[data-theme="dark"] .fb-control textarea { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .fb-control input:focus,
:root[data-theme="dark"] .fb-control textarea:focus { background: var(--surface); border-color: var(--brand); }
:root[data-theme="dark"] .fb-check { background: rgba(47,138,58,.16); }
:root[data-theme="dark"] .fb-blob-2 { background: rgba(255,92,129,.14); }

@media (prefers-reduced-motion: reduce) {
	.fb-blob, .fb-icon, .fb-icon::before, .fb-icon::after,
	.fb-submit::before, .fb-card, .fb-head h1, .fb-head p, .fb-field, .fb-submit { animation: none !important; }
	.fb-check-ring, .fb-check-tick { animation: none !important; stroke-dashoffset: 0; }
}










/* ============ Feedback: star rating ============ */
.fb-rate {
	padding: 16px 18px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	background: #fbf9f9;
	border: 1.5px solid #d7ccd0;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.fb-rate:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(198,0,61,.09); }

/* DOM is 5→1; row-reverse puts star 1 on the starting side in both LTR and RTL */
.fb-rate-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.fb-rate-stars input { position: absolute; opacity: 0; pointer-events: none; }
.fb-rate-stars label { cursor: pointer; line-height: 0; padding: 2px; }
.fb-rate-stars label svg {
	color: #ddd3d6;
	transition: color .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}

/* Fill the chosen star and every lower one (later siblings in the DOM) */
.fb-rate-stars input:checked ~ label svg,
.fb-rate-stars label:hover svg,
.fb-rate-stars label:hover ~ label svg {
	color: #f5b301;
	filter: drop-shadow(0 3px 6px rgba(245,179,1,.4));
}
.fb-rate-stars label:hover svg { transform: scale(1.22) rotate(-6deg); }
.fb-rate-stars input:checked + label svg { animation: fb-star-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes fb-star-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35) rotate(-10deg); }
	100% { transform: scale(1) rotate(0); }
}
.fb-rate-stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }

.fb-rate-text {
	min-width: 110px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.fb-rate-text.is-set { opacity: 1; transform: translateY(0); color: var(--brand-dark); }

.fb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 680px) {
	.fb-rate { padding: 14px; }
	.fb-rate-stars label svg { width: 30px; height: 30px; }
}

:root[data-theme="dark"] .fb-rate { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .fb-rate-stars label svg { color: #4a3a40; }
:root[data-theme="dark"] .fb-rate-text.is-set { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
	.fb-rate-stars input:checked + label svg { animation: none; }
}









/* ============ Platform video showcase ============ */
.mnd-video-showcase { padding: 90px 0; background: #fff; overflow: hidden; }
.mnd-video-showcase-layout {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 60px;
	align-items: center;
}

.mnd-video-frame {
	position: relative;
	padding: 14px;
}
.mnd-video-blob {
	position: absolute; border-radius: 50%; pointer-events: none;
	filter: blur(60px); opacity: .55; z-index: 0;
}
.mnd-video-blob-a { width: 260px; height: 260px; top: -40px; inset-inline-start: -50px; background: var(--brand-soft); }
.mnd-video-blob-b { width: 220px; height: 220px; bottom: -40px; inset-inline-end: -40px; background: rgba(198,0,61,.14); }

.mnd-video-wrap {
	position: relative; z-index: 1;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--line);
	box-shadow: 0 30px 70px rgba(50,14,28,.18);
}
.mnd-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mnd-video-controls {
	position: relative; z-index: 1;
	margin-top: -1px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px;
	background: #1c1719;
	border: 1px solid var(--line);
	border-top: 0;
}
.mnd-video-control-btn {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(255,255,255,.06);
	color: #fff; cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.mnd-video-control-btn:hover { background: var(--brand); transform: translateY(-1px); }

.mnd-video-live-tag {
	display: inline-flex; align-items: center; gap: 7px;
	color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.mnd-video-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5c5c; animation: mnd-video-live-pulse 1.6s ease-in-out infinite; }
@keyframes mnd-video-live-pulse {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,92,92,.5); }
	50% { opacity: .6; box-shadow: 0 0 0 5px rgba(255,92,92,0); }
}

.mnd-video-copy { min-width: 0; }
.mnd-video-copy .eyebrow { margin: 0 0 14px; }
.mnd-video-copy h2 { margin: 0; max-width: 520px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.35; letter-spacing: -.02em; }
.mnd-video-copy > span { display: block; max-width: 52ch; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.9; }

.mnd-video-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mnd-video-points li { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.mnd-video-point-icon {
	width: 30px; height: 30px; flex: 0 0 auto;
	display: grid; place-items: center;
	border-radius: 50%; background: var(--brand-soft); color: var(--brand);
}
.mnd-video-copy .primary-action { margin-top: 30px; }

@media (max-width: 980px) {
	.mnd-video-showcase-layout { grid-template-columns: 1fr; gap: 40px; }
	.mnd-video-copy h2, .mnd-video-copy > span { max-width: 100%; }
}
@media (max-width: 680px) {
	.mnd-video-showcase { padding: 64px 0; }
	.mnd-video-blob { opacity: .3; }
}

:root[data-theme="dark"] .mnd-video-showcase { background: var(--canvas); }
:root[data-theme="dark"] .mnd-video-wrap, :root[data-theme="dark"] .mnd-video-controls { border-color: var(--line); }

















/* ============ Service detail: split hero ============ */
.svc-hero {
	position: relative;
	padding-bottom: 80px;
	overflow: hidden;
	background: linear-gradient(180deg, #fbf9f9 0%, #f3edef 100%);
	border-bottom: 1px solid var(--line);
}
.svc-hero .breadcrumbs { position: relative; z-index: 2; }

/* animated background */
.svc-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.svc-hero-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(198,0,61,.16) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
	mask-image: linear-gradient(180deg, #000, transparent 70%);
	opacity: .55;
}
/* .svc-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); } */
.svc-hero-bg i:nth-child(1) { width: 380px; height: 380px; top: -120px; inset-inline-start: -100px; background: rgba(198,0,61,.14); animation: svc-blob 16s ease-in-out infinite; }
.svc-hero-bg i:nth-child(2) { width: 320px; height: 320px; bottom: -110px; inset-inline-end: 8%; background: rgba(198,0,61,.10); animation: svc-blob 20s ease-in-out infinite reverse; }

.svc-hero-layout {
	position: relative; z-index: 1;
	padding-top: 34px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}

/* copy */
.svc-hero-copy { min-width: 0; }
.svc-hero-eyebrow {
	margin: 0 0 20px;
	display: flex; align-items: center; gap: 12px;
	color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .02em;
	animation: svc-rise .7s cubic-bezier(.16,1,.3,1) .05s both;
}
.svc-hero-eyebrow::before {
	content: ""; width: 38px; height: 2px; background: var(--brand);
	transform-origin: var(--line-origin, left);
	animation: svc-line .8s cubic-bezier(.16,1,.3,1) .3s both;
}
[dir="rtl"] .svc-hero-eyebrow::before { --line-origin: right; }

.svc-hero-copy h1 {
	margin: 0;
	font-size: clamp(38px, 3.8vw, 58px);
	line-height: 1.15; letter-spacing: -.03em; text-wrap: balance;
	animation: svc-rise .8s cubic-bezier(.16,1,.3,1) .15s both;
}
.svc-hero-summary {
	display: block; max-width: 560px; margin-top: 22px;
	color: var(--muted); font-size: 16.5px; line-height: 1.95; text-wrap: pretty;
	animation: svc-rise .8s cubic-bezier(.16,1,.3,1) .28s both;
}
.svc-hero-actions {
	margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px;
	animation: svc-rise .8s cubic-bezier(.16,1,.3,1) .4s both;
}

/* media */
.svc-hero-media { position: relative; margin: 0; }

/* offset brand outline behind the image */
.svc-hero-media::before {
	content: ""; position: absolute; z-index: 0;
	inset-block: 20px -20px; inset-inline: 20px -20px;
	border: 2px solid var(--brand); opacity: .35;
	animation: svc-fade .9s ease .7s both;
}

.svc-hero-frame {
	position: relative; z-index: 1;
	aspect-ratio: 4 / 3.3;
	overflow: hidden;
	background: #ded5d8;
	border: 1px solid #d8ccd0;
	box-shadow: var(--shadow);
	animation: svc-wipe 1.1s cubic-bezier(.77,0,.18,1) .2s both;
}
.svc-hero-frame img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% center;   /* keeps the people in frame, crops the empty dark area */
	animation: svc-kenburns 22s ease-in-out infinite alternate;
}
.svc-hero-frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(0deg, rgba(43,8,22,.35), transparent 45%);
}
/* brand corner accent */
.svc-hero-frame::before {
	content: ""; position: absolute; z-index: 2; top: 0; inset-inline-start: 0;
	width: 64px; height: 64px;
	background: linear-gradient(135deg, var(--brand) 50%, transparent 50%);
}
[dir="rtl"] .svc-hero-frame::before { transform: scaleX(-1); }

.svc-hero-tag {
	position: absolute; z-index: 3; inset-inline-start: 18px; bottom: 16px;
	padding: 6px 11px; background: rgba(255,255,255,.94);
	color: var(--brand); font-size: 10px; font-weight: 800;
}

/* floating stats card */
.svc-hero-stats {
	position: absolute; z-index: 4;
	inset-inline-start: -30px; bottom: 44px;
	display: flex; gap: 0;
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--brand);
	box-shadow: 0 20px 44px rgba(50,14,28,.18);
	animation: svc-pop .7s cubic-bezier(.34,1.56,.64,1) 1s both, svc-float 5s ease-in-out 1.8s infinite;
}
.svc-hero-stats div { padding: 14px 22px; display: grid; gap: 2px; }
.svc-hero-stats div + div { border-inline-start: 1px solid var(--line); }
.svc-hero-stats b { color: var(--brand); font: 800 28px/1 Arial, sans-serif; }
.svc-hero-stats span { color: var(--muted); font-size: 11px; font-weight: 700; }

/* keyframes */
@keyframes svc-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes svc-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes svc-fade { from { opacity: 0; } to { opacity: .35; } }
@keyframes svc-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes svc-kenburns { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.5%, -1%); } }
@keyframes svc-pop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes svc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes svc-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.12); } }

/* responsive */
@media (max-width: 980px) {
	.svc-hero { padding-bottom: 64px; }
	.svc-hero-layout { grid-template-columns: 1fr; gap: 48px; padding-top: 20px; }
	.svc-hero-summary { max-width: 100%; }
	.svc-hero-frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
	.svc-hero { padding-bottom: 52px; }
	.svc-hero-copy h1 { font-size: 36px; }
	.svc-hero-summary { font-size: 15px; }
	.svc-hero-actions { flex-direction: column; }
	.svc-hero-actions > a { width: 100%; }
	.svc-hero-media::before { inset-block: 12px -12px; inset-inline: 12px -12px; }
	.svc-hero-frame { aspect-ratio: 4 / 3.4; }
	.svc-hero-stats { inset-inline-start: 12px; bottom: 24px; }
	.svc-hero-stats div { padding: 10px 16px; }
	.svc-hero-stats b { font-size: 22px; }
}

/* dark mode */
:root[data-theme="dark"] .svc-hero { background: linear-gradient(180deg, #1a1216 0%, var(--canvas) 100%); border-color: var(--line); }
/* :root[data-theme="dark"] .svc-hero-bg::before { background-image: radial-gradient(rgba(255,92,129,.2) 1px, transparent 1px); } */
:root[data-theme="dark"] .svc-hero-frame { border-color: var(--line); background: var(--surface-2); }
:root[data-theme="dark"] .svc-hero-stats { background: rgba(28,21,25,.88); border-color: var(--line); border-inline-start-color: var(--brand); }
:root[data-theme="dark"] .svc-hero-tag { background: rgba(28,21,25,.92); }

@media (prefers-reduced-motion: reduce) {
	.svc-hero *, .svc-hero *::before, .svc-hero *::after { animation: none !important; }
	.svc-hero-media::before { opacity: .35; }
}









/* ============ Service hero: clean professional finish ============ */
.svc-hero {
	background: linear-gradient(180deg, #ffffff 0%, #f7f3f4 100%);
	padding-bottom: 90px;
}

/* thin brand line at the very top of the hero */
/* .svc-hero::before {
	content: "";
	position: absolute; top: 0; inset-inline: 0; height: 3px; z-index: 3;
	background: linear-gradient(90deg, var(--brand-dark), var(--brand) 55%, transparent);
} */

/* title: short accent bar under the heading */
.svc-hero-copy h1::after {
	content: "";
	display: block;
	width: 64px; height: 4px; margin-top: 22px;
	background: var(--brand);
	transform-origin: var(--line-origin, left);
	animation: svc-line .9s cubic-bezier(.16,1,.3,1) .6s both;
}
[dir="rtl"] .svc-hero-copy h1::after { --line-origin: right; }

/* image: softer, cleaner shadow and a lighter offset outline */
.svc-hero-frame { box-shadow: 0 30px 70px rgba(50,14,28,.14); border: 0; }
.svc-hero-media::before { opacity: .22; border-width: 1px; }

/* stats card: crisper */
.svc-hero-stats { background: #fff; box-shadow: 0 18px 40px rgba(50,14,28,.16); }

/* keep hero text vertically balanced against the image */
.svc-hero-layout { align-items: center; padding-top: 24px; }

:root[data-theme="dark"] .svc-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%); }
:root[data-theme="dark"] .svc-hero-stats { background: rgba(28,21,25,.95); }

















/* ============ Product detail: animated platform hero ============ */
.pd-hero { position: relative; overflow: hidden; padding-bottom: 80px; background: linear-gradient(180deg, #ffffff 0%, #f7f3f4 100%); }

.pd-hero-layout { padding-top: 26px; display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 76px); align-items: center; min-height: 0; }
.pd-hero-layout.has-media { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }

/* copy: staggered entrance */
.pd-hero-copy .eyebrow { display: flex; align-items: center; gap: 12px; animation: pd-rise .7s cubic-bezier(.16,1,.3,1) .05s both; }
.pd-hero-copy .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--brand); transform-origin: left; animation: pd-line .8s cubic-bezier(.16,1,.3,1) .3s both; }
[dir="rtl"] .pd-hero-copy .eyebrow::before { transform-origin: right; }
.pd-hero-copy h1 { animation: pd-rise .8s cubic-bezier(.16,1,.3,1) .15s both; }
.pd-hero-copy h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 22px; background: var(--brand); transform-origin: left; animation: pd-line .9s cubic-bezier(.16,1,.3,1) .6s both; }
[dir="rtl"] .pd-hero-copy h1::after { transform-origin: right; }
.pd-hero-copy > span { animation: pd-rise .8s cubic-bezier(.16,1,.3,1) .28s both; }
.pd-hero-copy .internal-actions { animation: pd-rise .8s cubic-bezier(.16,1,.3,1) .4s both; }

/* media */
.pd-hero-media {
	--mx: 0; --my: 0; --base-ry: -6deg;
	position: relative; margin: 0; padding: 26px 10px 34px;
	perspective: 1500px;
}
[dir="rtl"] .pd-hero-media { --base-ry: 6deg; }

.pd-glow {
	position: absolute; inset: 6% 4%; z-index: 0; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(198,0,61,.30), rgba(198,0,61,0) 72%);
	filter: blur(40px);
	animation: pd-glow 6s ease-in-out infinite;
}
.pd-dotgrid {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: radial-gradient(rgba(198,0,61,.22) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	opacity: .7;
}
.pd-floor {
	position: absolute; z-index: 0; inset-inline: 12%; bottom: 6px; height: 26px;
	background: radial-gradient(closest-side, rgba(50,14,28,.32), transparent);
	filter: blur(10px);
}

.pd-tilt {
	position: relative; z-index: 1;
	transform-style: preserve-3d;
	/* transform: rotateY(calc(var(--base-ry) + var(--mx) * 6deg)) rotateX(calc(var(--my) * -5deg)); */
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
	will-change: transform;
}

.pd-browser {
	overflow: hidden; background: #fff;
	border: 1px solid #d8ccd0;
	box-shadow: 0 40px 90px rgba(50,14,28,.22), 0 8px 24px rgba(50,14,28,.10);
	animation: pd-browser-in 1.1s cubic-bezier(.16,1,.3,1) .2s both;
}
.pd-browser-bar {
	height: 40px; padding: 0 14px;
	display: flex; align-items: center; gap: 14px;
	background: linear-gradient(180deg, #f8f4f5, #efe8ea);
	border-bottom: 1px solid var(--line);
}
.pd-dots { display: flex; gap: 6px; }
.pd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d7cdd0; }
.pd-dots i:first-child { background: var(--brand); }
.pd-url {
	flex: 1; max-width: 320px; margin-inline: auto;
	height: 24px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: #fff; border: 1px solid var(--line); border-radius: 20px;
	color: var(--muted); font: 600 11px Arial, sans-serif;
}
.pd-url svg { color: #2f8a3a; }
.pd-live { display: inline-flex; align-items: center; gap: 6px; color: #2f8a3a; font: 800 10px Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.pd-live b { width: 6px; height: 6px; border-radius: 50%; background: #2f8a3a; animation: pd-live 1.6s ease-in-out infinite; }

.pd-screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f7f8fb; }
.pd-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s ease, filter .3s ease; }
.pd-screen::after {   /* shine sweep */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 48%, transparent 64%);
	transform: translateX(-140%);
	animation: pd-shine 6s ease-in-out 2s infinite;
}
.pd-screen-open {
	position: absolute; z-index: 2; inset: 0;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: rgba(48, 9, 24, .72); color: #fff;
	font-size: 14px; font-weight: 800;
	opacity: 0; transition: opacity .25s ease;
}
.pd-screen:hover .pd-screen-open, .pd-screen:focus-visible .pd-screen-open { opacity: 1; }
.pd-screen:hover img { transform: scale(1.02); filter: saturate(.85); }

/* floating glass chips (wrapper = mouse parallax, inner = idle float) */
.pd-chip {
	position: absolute; z-index: 3;
	transform: translate(calc(var(--mx) * var(--depth) * 1px), calc(var(--my) * var(--depth) * .7px));
	transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.pd-chip-1 { --depth: 26; inset-inline-start: -8px; top: 22%; }
.pd-chip-2 { --depth: -22; inset-inline-end: -6px; bottom: 16%; }

.pd-chip-in {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 18px 12px 14px;
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--brand);
	box-shadow: 0 18px 40px rgba(50,14,28,.18);
	opacity: 0;
	animation: pd-pop .7s cubic-bezier(.34,1.56,.64,1) var(--enter, 1s) both, pd-float 5s ease-in-out calc(var(--enter, 1s) + .8s) infinite;
}
.pd-chip-1 .pd-chip-in { --enter: 1s; }
.pd-chip-2 .pd-chip-in { --enter: 1.25s; animation-direction: normal, reverse; }
.pd-chip-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.pd-chip-text { display: grid; gap: 1px; }
.pd-chip-text b { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.pd-chip-text small { font-size: 11px; color: var(--muted); font-weight: 600; }

/* keyframes */
@keyframes pd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pd-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pd-browser-in { from { opacity: 0; transform: translateY(46px) scale(.94); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes pd-shine { 0%, 55% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@keyframes pd-glow { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pd-pop { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pd-live { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(47,138,58,.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(47,138,58,0); } }

/* responsive */
@media (max-width: 1180px) {
	.pd-hero-layout.has-media { grid-template-columns: 1fr; }
	.pd-hero-media { max-width: 820px; width: 100%; margin-inline: auto; --base-ry: 0deg; }
	[dir="rtl"] .pd-hero-media { --base-ry: 0deg; }
}
@media (max-width: 680px) {
	.pd-hero { padding-bottom: 56px; }
	.pd-hero-media { padding: 14px 0 26px; }
	.pd-browser-bar { height: 34px; padding: 0 10px; }
	.pd-url { display: none; }
	.pd-live { margin-inline-start: auto; }
	.pd-chip-1 { top: auto; bottom: -6px; inset-inline-start: 8px; }
	.pd-chip-2 { display: none; }
	.pd-chip-in { padding: 9px 14px 9px 10px; }
	.pd-chip-icon { width: 30px; height: 30px; }
	.pd-screen-open { display: none; }
}

/* dark mode */
:root[data-theme="dark"] .pd-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%) !important; }
:root[data-theme="dark"] .pd-browser { background: var(--surface); border-color: var(--line); box-shadow: 0 40px 90px rgba(0,0,0,.6); }
:root[data-theme="dark"] .pd-browser-bar { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .pd-url { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .pd-chip-in { background: rgba(28,21,25,.92); border-color: var(--line); border-inline-start-color: var(--brand); }
:root[data-theme="dark"] .pd-glow { background: radial-gradient(closest-side, rgba(255,92,129,.32), rgba(255,92,129,0) 72%); }
:root[data-theme="dark"] .pd-dotgrid { background-image: radial-gradient(rgba(255,92,129,.25) 1.2px, transparent 1.2px); }
:root[data-theme="dark"] .pd-floor { background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }

@media (prefers-reduced-motion: reduce) {
	.pd-hero *, .pd-hero *::before, .pd-hero *::after { animation: none !important; transition-duration: .01ms !important; }
	.pd-chip-in { opacity: 1; }
}











/* ============ Sector hero ============ */
.sec-hero { position: relative; overflow: hidden; padding-bottom: 90px; background: linear-gradient(180deg, #fff 0%, #f7f3f4 100%); border-bottom: 1px solid var(--line); }
.sec-hero .site-shell { position: relative; z-index: 1; }

.sec-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.sec-hero-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(198,0,61,.16) 1px, transparent 1px);
	background-size: 26px 26px; opacity: .5;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%);
}
/* .sec-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); } */
.sec-hero-bg i:nth-child(1) { width: 360px; height: 360px; top: -120px; inset-inline-start: -90px; background: rgba(198,0,61,.13); animation: sec-blob 16s ease-in-out infinite; }
.sec-hero-bg i:nth-child(2) { width: 320px; height: 320px; bottom: -120px; inset-inline-end: 6%; background: rgba(198,0,61,.10); animation: sec-blob 20s ease-in-out infinite reverse; }

.sec-hero-layout { padding-top: 26px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(40px, 5vw, 84px); align-items: center; }

/* copy */
.sec-hero-copy { min-width: 0; }
.sec-hero-eyebrow { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; color: var(--brand); font-size: 13px; font-weight: 800; animation: sec-rise .7s cubic-bezier(.16,1,.3,1) .05s both; }
.sec-hero-eyebrow::before { content: ""; width: 38px; height: 2px; background: var(--brand); transform-origin: left; animation: sec-line .8s cubic-bezier(.16,1,.3,1) .3s both; }
[dir="rtl"] .sec-hero-eyebrow::before, [dir="rtl"] .sec-hero-copy h1::after { transform-origin: right; }
.sec-hero-copy h1 { margin: 0; font-size: clamp(36px, 3.6vw, 56px); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; animation: sec-rise .8s cubic-bezier(.16,1,.3,1) .15s both; }
.sec-hero-copy h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 22px; background: var(--brand); transform-origin: left; animation: sec-line .9s cubic-bezier(.16,1,.3,1) .6s both; }
.sec-hero-summary { display: block; max-width: 560px; margin-top: 22px; color: var(--muted); font-size: 16.5px; line-height: 1.95; text-wrap: pretty; animation: sec-rise .8s cubic-bezier(.16,1,.3,1) .28s both; }
.sec-hero-tags { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; animation: sec-rise .8s cubic-bezier(.16,1,.3,1) .36s both; }
.sec-hero-tags span { padding: 7px 14px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 700; transition: border-color .2s, color .2s, transform .2s; }
.sec-hero-tags span:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.sec-hero-actions { margin-top: 30px; animation: sec-rise .8s cubic-bezier(.16,1,.3,1) .44s both; }

/* media */
.sec-hero-media { position: relative; margin: 0; }
.sec-hero-media::before { content: ""; position: absolute; z-index: 0; inset-block: 20px -20px; inset-inline: 20px -20px; border: 1px solid var(--brand); opacity: .25; animation: sec-fade .9s ease .7s both; }
.sec-hero-frame {
	position: relative; z-index: 1; aspect-ratio: 4 / 3.3; overflow: hidden;
	background: radial-gradient(circle at 30% 20%, #fff 0%, var(--brand-soft) 85%);
	box-shadow: 0 30px 70px rgba(50,14,28,.14);
	animation: sec-wipe 1.1s cubic-bezier(.77,0,.18,1) .2s both;
}
.sec-hero-frame::before { content: ""; position: absolute; z-index: 3; top: 0; inset-inline-start: 0; width: 64px; height: 64px; background: linear-gradient(135deg, var(--brand) 50%, transparent 50%); }
[dir="rtl"] .sec-hero-frame::before { transform: scaleX(-1); }
.sec-hero-frame > img { width: 100%; height: 100%; object-fit: cover; animation: sec-kenburns 22s ease-in-out infinite alternate; }
.sec-hero-frame:has(> img)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(43,8,22,.4), transparent 50%), linear-gradient(135deg, rgba(198,0,61,.18), transparent 60%); }
.sec-hero-frame > .sa { position: absolute; inset: 0; width: 100%; height: 100%; padding: 4%; }

.sec-hero-num { position: absolute; z-index: 4; inset-inline-end: 18px; bottom: 16px; padding: 6px 12px; background: rgba(255,255,255,.94); color: var(--muted); font: 700 11px Arial, sans-serif; letter-spacing: .06em; }
.sec-hero-num b { color: var(--brand); font-size: 14px; }

/* floating chips */
.sec-chip { position: absolute; z-index: 5; }
.sec-chip-1 { inset-inline-start: -28px; bottom: 44px; }
.sec-chip-2 { inset-inline-end: -18px; top: 12%; }
.sec-chip-in {
	display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 12px; max-width: 260px;
	background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--line); border-inline-start: 3px solid var(--brand);
	box-shadow: 0 18px 40px rgba(50,14,28,.18); opacity: 0;
	animation: sec-pop .7s cubic-bezier(.34,1.56,.64,1) 1s both, sec-float 5s ease-in-out 1.8s infinite;
}
.sec-chip-2 .sec-chip-in { animation-delay: 1.25s, 2.05s; animation-direction: normal, reverse; }
.sec-chip-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; }
.sec-chip-in b { font-size: 13px; font-weight: 800; line-height: 1.4; color: var(--ink); }

/* ---- illustration classes (theme-aware) ---- */
.sa .sa-brand { fill: var(--brand); } .sa .sa-dark { fill: var(--brand-dark); } .sa .sa-soft { fill: var(--brand-soft); }
.sa .sa-ink { fill: var(--ink); } .sa .sa-paper { fill: var(--surface, #fff); } .sa .sa-warm { fill: var(--warm); }
.sa .sa-s-brand { fill: none; stroke: var(--brand); } .sa .sa-s-line { fill: none; stroke: var(--line); }
.sa .sa-win { fill: var(--surface, #fff); opacity: .3; animation: sa-blink 3.6s ease-in-out var(--d, 0s) infinite; }
.sa .sa-win-lit { opacity: .9; }

.sa-book, .sa-rise-group { transform-box: fill-box; transform-origin: bottom; animation: sa-rise .8s cubic-bezier(.34,1.4,.4,1) var(--d, 0s) both; }
.sa-float { animation: sa-float 5s ease-in-out infinite; }
.sa-float-b { animation-direction: reverse; animation-duration: 6s; }
.sa-spin { animation: sa-spin 6s linear infinite; }
.sa-pulse { transform-box: fill-box; transform-origin: center; animation: sa-pulse 4s ease-in-out infinite; }
.sa-pulse-dot { transform-box: fill-box; transform-origin: center; animation: sa-pulse 1.8s ease-in-out infinite; }
.sa-orbit { transform-box: fill-box; transform-origin: center; animation: sa-spin 60s linear infinite; }
.sa-twinkle { animation: sa-twinkle 2.6s ease-in-out var(--d, 0s) infinite; }
.sa-stamp { animation: sa-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sa-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sa-draw 1.4s cubic-bezier(.16,1,.3,1) .5s forwards; }
.sa-dotpop { transform-box: fill-box; transform-origin: center; animation: sa-dot .4s cubic-bezier(.34,1.6,.64,1) var(--d, 1s) both; }
.sa-cover { transform-origin: 240px 300px; animation: sa-fan 1.1s cubic-bezier(.34,1.3,.4,1) var(--d, 0s) both; }

@keyframes sa-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes sa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sa-spin { to { transform: rotate(360deg); } }
@keyframes sa-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes sa-twinkle { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sa-blink { 0%,100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes sa-draw { to { stroke-dashoffset: 0; } }
@keyframes sa-dot { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sa-fan { from { transform: rotate(0deg); opacity: 0; } to { transform: rotate(var(--a)); opacity: 1; } }

@keyframes sec-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sec-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sec-fade { from { opacity: 0; } to { opacity: .25; } }
@keyframes sec-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sec-kenburns { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.5%, -1%); } }
@keyframes sec-pop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sec-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sec-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.12); } }

/* responsive */
@media (max-width: 980px) {
	.sec-hero { padding-bottom: 64px; }
	.sec-hero-layout { grid-template-columns: 1fr; gap: 52px; }
	.sec-hero-summary { max-width: 100%; }
	.sec-hero-frame { aspect-ratio: 16 / 11; }
	.sec-chip-1 { inset-inline-start: 10px; }
	.sec-chip-2 { inset-inline-end: 10px; }
}
@media (max-width: 680px) {
	.sec-hero { padding-bottom: 52px; }
	.sec-hero-copy h1 { font-size: 34px; }
	.sec-hero-summary { font-size: 15px; }
	.sec-hero-actions { flex-direction: column; align-items: stretch; }
	.sec-hero-actions > a { width: 100%; }
	.sec-hero-media::before { inset-block: 12px -12px; inset-inline: 12px -12px; }
	.sec-hero-frame { aspect-ratio: 4 / 3.4; }
	.sec-chip-2 { display: none; }
	.sec-chip-1 { bottom: -14px; }
}

/* dark mode */
:root[data-theme="dark"] .sec-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%) !important; }
:root[data-theme="dark"] .sec-hero-bg::before { background-image: radial-gradient(rgba(255,92,129,.2) 1px, transparent 1px); }
:root[data-theme="dark"] .sec-hero-frame { background: radial-gradient(circle at 30% 20%, var(--surface-2) 0%, rgba(255,92,129,.12) 90%); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
:root[data-theme="dark"] .sec-hero-tags span,
:root[data-theme="dark"] .sec-hero-num { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
:root[data-theme="dark"] .sec-chip-in { background: rgba(28,21,25,.92); border-color: var(--line); border-inline-start-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
	.sec-hero *, .sec-hero *::before, .sec-hero *::after { animation: none !important; }
	.sec-chip-in, .sa-book, .sa-cover, .sa-dotpop { opacity: 1 !important; }
	.sa-draw { stroke-dashoffset: 0; }
}
















/* ============ News: category filter bar (news.php) ============ */
.news-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 34px;
}
.news-filter-pill {
	padding: 9px 18px;
	border: 1px solid var(--news-rule);
	background: var(--news-card-bg);
	color: var(--news-slate);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.news-filter-pill span { margin-inline-start: 6px; opacity: .65; font-weight: 600; }
.news-filter-pill:hover { border-color: var(--news-crimson); color: var(--news-crimson); transform: translateY(-1px); }
.news-filter-pill.is-active { background: var(--news-crimson); border-color: var(--news-crimson); color: #fff; }
.news-filter-pill.is-active span { opacity: .85; }

.news-empty-state { padding: 60px 0; text-align: center; color: var(--news-slate); font-size: 14px; }

/* ============ News detail: share row ============ */
.article-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.news-share { display: flex; align-items: center; gap: 10px; }
.news-share-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.news-share-btn {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	border-radius: 50%;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.news-share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }

@media (max-width: 680px) {
	.news-filter-bar { gap: 8px; margin-bottom: 26px; }
	.news-filter-pill { padding: 8px 14px; font-size: 11.5px; }
	.article-footer { align-items: flex-start; flex-direction: column; }
}

/* ============ Dark mode ============ */
:root[data-theme="dark"] .news-filter-pill { background: var(--surface); border-color: var(--line); color: var(--muted); }
:root[data-theme="dark"] .news-filter-pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .news-share-btn { border-color: var(--line); color: var(--ink-soft); }














/* ============ Training hub (listing) ============ */
.trn-hero { position: relative; overflow: hidden; padding: 30px 0 70px; background: linear-gradient(180deg, #fff 0%, #f7f3f4 100%); border-bottom: 1px solid var(--line); }
.trn-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.trn-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(198,0,61,.14) 1px, transparent 1px); background-size: 24px 24px; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
/* .trn-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); } */
.trn-hero-bg i:nth-child(1) { width: 340px; height: 340px; top: -100px; inset-inline-start: -80px; background: rgba(198,0,61,.13); animation: trn-blob 16s ease-in-out infinite; }
.trn-hero-bg i:nth-child(2) { width: 300px; height: 300px; bottom: -100px; inset-inline-end: 6%; background: rgba(198,0,61,.10); animation: trn-blob 20s ease-in-out infinite reverse; }
@keyframes trn-blob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(36px,26px) scale(1.1); } }

.trn-hero-layout { position: relative; z-index: 1; padding-top: 30px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 70px); align-items: center; }
.trn-hero-copy h1 { margin: 0; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .1s both; }
.trn-hero-copy h1::after { content: ""; display: block; width: 60px; height: 4px; margin-top: 20px; background: var(--brand); animation: trn-line .9s cubic-bezier(.16,1,.3,1) .5s both; transform-origin: left; }
[dir="rtl"] .trn-hero-copy h1::after { transform-origin: right; }
.trn-hero-copy > span { display: block; max-width: 56ch; margin-top: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.9; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .22s both; }
@keyframes trn-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes trn-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.trn-hero-stats { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .34s both; }
.trn-hero-stats div { padding: 14px 20px; background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); box-shadow: 0 14px 30px rgba(50,14,28,.08); }
.trn-hero-stats b { display: block; color: var(--brand); font: 800 22px Arial, sans-serif; }
.trn-hero-stats span { color: var(--muted); font-size: 11px; font-weight: 700; }

.trn-hero-visual { position: relative; height: 420px; }
.trn-orb { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); box-shadow: 0 18px 40px rgba(50,14,28,.14); padding: 16px 18px; opacity: 0; animation: trn-pop .7s cubic-bezier(.34,1.56,.64,1) var(--d,1s) both, trn-float 5s ease-in-out calc(var(--d,1s) + .8s) infinite; }
.trn-orb b { font-size: 14px; color: var(--ink); }
.trn-orb span { font-size: 10px; color: var(--muted); font-weight: 700; }
.trn-orb-1 { top: 8%; inset-inline-start:10%; }
.trn-orb-2 { top: 15%; inset-inline-end: 8%; }
.trn-orb-3 { bottom: -3%; inset-inline-start: 15%; }
.trn-orb-4 { bottom: -3%; inset-inline-end: 22%; }
@keyframes trn-pop { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes trn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.trn-hero-ring { position: absolute; inset: 8% 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--brand-soft), transparent 72%); filter: blur(6px); animation: trn-glow 6s ease-in-out infinite; }
@keyframes trn-glow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ============ Training program cards ============ */
.trn-programs { padding: 90px 0; background: var(--canvas); }
.trn-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.trn-card { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; background: #fff; border: 1px solid var(--line); overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.trn-card.is-in { opacity: 1; transform: translateY(0); }
.trn-card:hover { transform: translateY(-6px); border-color: #e3c3cd; box-shadow: 0 24px 55px rgba(47,15,27,.12); }
.trn-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); transform: scaleX(0); transform-origin: inset-inline-start; transition: transform .6s cubic-bezier(.16,1,.3,1) .1s; }
.trn-card.is-in::before { transform: scaleX(1); }
.trn-card-num { position: absolute; top: 18px; inset-inline-end: 24px; color: rgba(198,0,61,.09); font: 800 46px/1 Arial, sans-serif; pointer-events: none; }
.trn-card:hover .trn-card-num { color: rgba(198,0,61,.2); }
.trn-card-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--brand); font: 800 11px Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.trn-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.trn-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.trn-card-meta { margin-top: 20px; padding-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.trn-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.trn-card-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--brand); font-size: 13px; font-weight: 800; border-bottom: 1px solid rgba(198,0,61,.3); padding-bottom: 3px; transition: gap .2s ease, border-color .2s ease; }
.trn-card:hover .trn-card-link { gap: 13px; border-color: var(--brand); }

/* ============ Training videos gallery ============ */
.trn-videos { padding: 90px 0; background: #fff; }
.trn-video-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.trn-video-card { position: relative; display: block; background: #fff; border: 1px solid var(--line); cursor: pointer; overflow: hidden; text-align: start; padding: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; font-family: inherit; }
.trn-video-card.is-in { opacity: 1; transform: translateY(0); }
.trn-video-card:hover { transform: translateY(-5px); border-color: #e3c3cd; box-shadow: 0 22px 50px rgba(47,15,27,.12); }
.trn-video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #21161a; }
.trn-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.trn-video-card:hover .trn-video-thumb img { transform: scale(1.05); filter: saturate(.85); }
.trn-video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,10,17,.55), transparent 55%); }
.trn-video-play { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; }
.trn-video-play span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--brand); box-shadow: 0 14px 30px rgba(0,0,0,.28); transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease; }
.trn-video-card:hover .trn-video-play span { transform: scale(1.1); background: var(--brand); color: #fff; }
.trn-video-duration { position: absolute; z-index: 2; inset-inline-end: 10px; bottom: 10px; padding: 3px 8px; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; font-weight: 800; }
.trn-video-body { padding: 18px 20px 22px; display: block; }
.trn-video-body span { color: var(--brand); font: 800 10.5px Arial, sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.trn-video-body h3 { margin: 9px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); font-weight: 700; }

@media (max-width: 980px) {
	.trn-hero-layout { grid-template-columns: 1fr; gap: 40px; }
	.trn-hero-visual { display: none; }
	.trn-grid { grid-template-columns: 1fr; }
	.trn-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.trn-hero { padding: 20px 0 54px; }
	.trn-hero-copy h1 { font-size: 34px; }
	.trn-hero-stats { gap: 10px; }
	.trn-programs, .trn-videos { padding: 64px 0; }
	.trn-video-grid { grid-template-columns: 1fr; }
}

/* ============ Training detail hero ============ */
.trn-detail-hero { position: relative; overflow: hidden; padding-bottom: 80px; background: linear-gradient(180deg, #fff 0%, #f7f3f4 100%); border-bottom: 1px solid var(--line); }
.trn-detail-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.trn-detail-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(198,0,61,.15) 1px, transparent 1px); background-size: 26px 26px; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%); mask-image: linear-gradient(180deg, #000, transparent 72%); }
/* .trn-detail-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); } */
.trn-detail-hero-bg i:nth-child(1) { width: 360px; height: 360px; top: -110px; inset-inline-start: -90px; background: rgba(198,0,61,.13); animation: trn-blob 16s ease-in-out infinite; }
.trn-detail-hero-bg i:nth-child(2) { width: 300px; height: 300px; bottom: -100px; inset-inline-end: 6%; background: rgba(198,0,61,.10); animation: trn-blob 20s ease-in-out infinite reverse; }

.trn-detail-layout { position: relative; z-index: 1; padding-top: 30px; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.trn-detail-copy { min-width: 0; }
.trn-detail-eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .02em; animation: trn-rise .7s cubic-bezier(.16,1,.3,1) .05s both; }
.trn-detail-eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--brand); transform-origin: left; animation: trn-line .8s cubic-bezier(.16,1,.3,1) .3s both; }
[dir="rtl"] .trn-detail-eyebrow::before { transform-origin: right; }
.trn-detail-copy h1 { margin: 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .15s both; }
.trn-detail-summary { display: block; max-width: 56ch; margin-top: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.95; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .28s both; }
.trn-detail-meta { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .38s both; }
.trn-detail-meta div { padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); }
.trn-detail-meta span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.trn-detail-meta b { display: block; margin-top: 4px; font-size: 14px; }
.trn-detail-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; animation: trn-rise .8s cubic-bezier(.16,1,.3,1) .48s both; }

.trn-detail-media { position: relative; margin: 0; }
.trn-detail-media::before { content: ""; position: absolute; z-index: 0; inset-block: 20px -20px; inset-inline: 20px -20px; border: 1px solid var(--brand); opacity: .28; animation: trn-fade .9s ease .7s both; }
@keyframes trn-fade { from { opacity: 0; } to { opacity: .28; } }
.trn-detail-frame { position: relative; z-index: 1; aspect-ratio: 4 / 3.3; overflow: hidden; background: #ded5d8; border: 1px solid #d8ccd0; box-shadow: 0 30px 70px rgba(50,14,28,.16); animation: trn-wipe 1.1s cubic-bezier(.77,0,.18,1) .2s both; }
@keyframes trn-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.trn-detail-frame img { width: 100%; height: 100%; object-fit: cover; animation: trn-kenburns 22s ease-in-out infinite alternate; }
@keyframes trn-kenburns { from { transform: scale(1.04); } to { transform: scale(1.13) translate(-1.5%, -1%); } }
.trn-detail-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(43,8,22,.35), transparent 45%); }
.trn-detail-frame::before { content: ""; position: absolute; z-index: 2; top: 0; inset-inline-start: 0; width: 60px; height: 60px; background: linear-gradient(135deg, var(--brand) 50%, transparent 50%); }
[dir="rtl"] .trn-detail-frame::before { transform: scaleX(-1); }

.trn-detail-badge { position: absolute; z-index: 4; inset-inline-start: -28px; bottom: 38px; display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); box-shadow: 0 20px 44px rgba(50,14,28,.18); opacity: 0; animation: trn-pop .7s cubic-bezier(.34,1.56,.64,1) 1s both, trn-float 5s ease-in-out 1.8s infinite; }
.trn-detail-badge div { padding: 14px 20px; display: grid; gap: 2px; }
.trn-detail-badge div + div { border-inline-start: 1px solid var(--line); }
.trn-detail-badge b { color: var(--brand); font: 800 24px/1 Arial, sans-serif; }
.trn-detail-badge span { color: var(--muted); font-size: 10.5px; font-weight: 700; }

/* ============ Training detail body ============ */
.trn-detail-body { padding: 90px 0; background: var(--canvas); }
.trn-detail-body-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: start; }
.trn-topics-panel { padding: 36px 34px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.trn-topics-panel h2 { margin: 0 0 26px; font-size: 22px; line-height: 1.4; }
.trn-topic-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.trn-topic-list li { display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease var(--td, 0s), transform .45s ease var(--td, 0s); }
.trn-topic-list.is-in li { opacity: 1; transform: translateY(0); }
.trn-topic-icon { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.trn-topic-list li > span { color: var(--ink-soft); font-size: 14.5px; font-weight: 600; line-height: 1.8; }

.trn-side-card { padding: 30px 28px; background: #21161a; color: #fff; }
.trn-side-card b { display: block; margin-bottom: 20px; color: #f0a0b8; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.trn-side-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.18); }
.trn-side-steps li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 13.5px; font-weight: 700; }
.trn-side-steps li span { color: #f0a0b8; font: 800 11px Arial, sans-serif; }
.trn-side-card .trn-side-cta { margin-top: 24px; width: 100%; background: #fff; border-color: #fff; color: var(--brand-dark); }

.trn-gallery { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trn-gallery img { width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--line); }

@media (max-width: 980px) {
	.trn-detail-layout { grid-template-columns: 1fr; gap: 48px; }
	.trn-detail-summary { max-width: 100%; }
	.trn-detail-frame { aspect-ratio: 16 / 10; }
	.trn-detail-body-layout { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 680px) {
	.trn-detail-hero { padding-bottom: 56px; }
	.trn-detail-copy h1 { font-size: 32px; }
	.trn-detail-meta { grid-template-columns: 1fr; }
	.trn-detail-media::before { inset-block: 12px -12px; inset-inline: 12px -12px; }
	.trn-detail-badge { inset-inline-start: 12px; bottom: 18px; }
	.trn-detail-badge div { padding: 10px 14px; }
	.trn-detail-badge b { font-size: 19px; }
	.trn-gallery { grid-template-columns: 1fr; }
}

/* dark mode */
:root[data-theme="dark"] .trn-hero, :root[data-theme="dark"] .trn-detail-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%) !important; }
:root[data-theme="dark"] .trn-videos { background: var(--canvas); }
:root[data-theme="dark"] :is(.trn-card, .trn-video-card, .trn-topics-panel, .trn-detail-meta div, .trn-hero-stats div, .trn-detail-badge) { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .trn-orb { background: rgba(28,21,25,.92); border-color: var(--line); }
:root[data-theme="dark"] .trn-video-play span { background: rgba(28,21,25,.92); }

@media (prefers-reduced-motion: reduce) {
	.trn-hero *, .trn-detail-hero *, .trn-card, .trn-video-card, .trn-topic-list li { animation: none !important; transition-duration: .01ms !important; }
}


.video-modal[hidden] { display: none !important; }








/* ============ Training hero illustration ============ */
.trn-hero-ring { z-index: 0; }
.trn-orb { z-index: 2; }
.trn-hero-illustration { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.trn-hi-line {
	fill: none; stroke: var(--brand-soft); stroke-width: 2; stroke-linecap: round;
	stroke-dasharray: 400; stroke-dashoffset: 400;
	animation: trn-hi-draw 1.6s cubic-bezier(.16,1,.3,1) calc(var(--ld, 0s) + .3s) both;
}
@keyframes trn-hi-draw { to { stroke-dashoffset: 0; } }

.trn-hi-dot {
	fill: var(--brand); opacity: 0;
	transform-box: fill-box; transform-origin: center; transform: scale(0);
	animation: trn-hi-dot-pop .4s cubic-bezier(.34,1.6,.64,1) var(--dd, 1s) both,
		trn-hi-dot-pulse 2.4s ease-in-out calc(var(--dd, 1s) + .6s) infinite;
}
@keyframes trn-hi-dot-pop { to { opacity: 1; transform: scale(1); } }
@keyframes trn-hi-dot-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(198,0,61,0)); } 50% { filter: drop-shadow(0 0 4px rgba(198,0,61,.6)); } }

.trn-hi-center {
	opacity: 0; transform: translateY(14px) scale(.94);
	transform-box: fill-box; transform-origin: center;
	animation: trn-hi-rise .8s cubic-bezier(.16,1,.3,1) .1s both, trn-hi-float 5s ease-in-out 1s infinite;
}
@keyframes trn-hi-rise { to { opacity: 1; transform: none; } }
@keyframes trn-hi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.trn-hi-screen { fill: #21161a; }
.trn-hi-screen-glass { fill: var(--brand-soft); }
.trn-hi-stand { fill: #d8ccd0; }
.trn-hi-base { fill: #21161a; }
.trn-hi-play-ring { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.trn-hi-play-tri { fill: var(--brand); }

.trn-hi-cap {
	opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: trn-hi-rise .8s cubic-bezier(.16,1,.3,1) .45s both, trn-hi-float 4.5s ease-in-out 1.3s infinite reverse;
}
.trn-hi-cap-top { fill: var(--brand-dark); }
.trn-hi-cap-band { fill: var(--brand); }
.trn-hi-cap-tassel-line { stroke: var(--brand-dark); stroke-width: 2; }
.trn-hi-cap-tassel-dot { fill: #f5b301; }

.trn-hi-book {
	opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: trn-hi-rise .8s cubic-bezier(.16,1,.3,1) .6s both, trn-hi-float 5.5s ease-in-out 1.6s infinite;
}
.trn-hi-book-l { fill: #fff; stroke: var(--line); }
.trn-hi-book-r { fill: #f7f3f4; stroke: var(--line); }

.trn-hi-spark { fill: var(--brand); opacity: 0; animation: trn-hi-twinkle 2.6s ease-in-out var(--sd, 0s) infinite; }
@keyframes trn-hi-twinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 980px) { .trn-hero-illustration { display: none; } }

:root[data-theme="dark"] .trn-hi-screen-glass { fill: rgba(255,92,129,.18); }
:root[data-theme="dark"] .trn-hi-play-ring { fill: var(--surface); }
:root[data-theme="dark"] .trn-hi-book-l, :root[data-theme="dark"] .trn-hi-book-r { fill: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
	.trn-hi-line, .trn-hi-dot, .trn-hi-center, .trn-hi-cap, .trn-hi-book, .trn-hi-spark { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
}












/* ============================================================
   NEWS DETAIL — redesigned, animated (namespace: .ndt-)
   Independent from the older .article-* / .related-* rules,
   so nothing else on the site is affected.
   ============================================================ */

/* ---------- Reading progress bar ---------- */
.ndt-progress { position: fixed; top: 0; inset-inline: 0; z-index: 80; height: 3px; background: transparent; pointer-events: none; }
.ndt-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); transition: width .1s linear; }

/* ---------- Hero ---------- */
.ndt-hero { position: relative; overflow: hidden; padding: 0 0 46px; background: linear-gradient(180deg, #fff 0%, #f7f3f4 100%); border-bottom: 1px solid var(--line); }
.ndt-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ndt-hero-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(198,0,61,.14) 1px, transparent 1px);
	background-size: 24px 24px; opacity: .5;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
	mask-image: linear-gradient(180deg, #000, transparent 72%);
}
/* .ndt-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); } */
.ndt-hero-bg i:nth-child(1) { width: 320px; height: 320px; top: -100px; inset-inline-start: -80px; background: rgba(198,0,61,.13); animation: ndt-blob 16s ease-in-out infinite; }
.ndt-hero-bg i:nth-child(2) { width: 280px; height: 280px; bottom: -100px; inset-inline-end: 6%; background: rgba(198,0,61,.09); animation: ndt-blob 20s ease-in-out infinite reverse; }
@keyframes ndt-blob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,24px) scale(1.1); } }

/* .ndt-hero-copy { position: relative; z-index: 1; margin-top: 22px; max-width: 860px; } */
.ndt-hero-copy { position: relative; z-index: 1; margin: 22px auto 0; max-width: 860px; text-align: center; }

/* .ndt-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 20px; animation: ndt-rise .7s cubic-bezier(.16,1,.3,1) .05s both; } */
.ndt-meta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 20px; animation: ndt-rise .7s cubic-bezier(.16,1,.3,1) .05s both; }
.ndt-badge-cat { padding: 6px 13px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.ndt-meta-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ndt-meta-item svg { color: var(--brand); flex: 0 0 auto; }

.ndt-title {
	margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.24;
	letter-spacing: -.025em; text-wrap: balance;
	animation: ndt-rise .8s cubic-bezier(.16,1,.3,1) .15s both;
}
/* .ndt-title::after {
	content: ""; display: block; width: 60px; height: 4px; margin-top: 22px;
	background: var(--brand); transform-origin: left;
	animation: ndt-line .9s cubic-bezier(.16,1,.3,1) .55s both;
}
[dir="rtl"] .ndt-title::after { transform-origin: right; } */


.ndt-title::after {
	content: ""; display: block; width: 60px; height: 4px; margin: 22px auto 0;
	background: var(--brand); transform-origin: center;
	animation: ndt-line .9s cubic-bezier(.16,1,.3,1) .55s both;
}

@keyframes ndt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ndt-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Featured image ---------- */
/* .ndt-media-frame {
	position: relative; margin: -20px auto 0; max-width: 980px;
	aspect-ratio: 21 / 9; overflow: hidden;
	background: #ded5d8; border: 1px solid var(--line); box-shadow: var(--shadow);
	clip-path: inset(0 0 100% 0); opacity: 0;
	transition: clip-path 1s cubic-bezier(.77,0,.18,1), opacity .4s ease;
}
.ndt-media-frame.is-in { clip-path: inset(0 0 0 0); opacity: 1; }
.ndt-media-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease; }
.ndt-media-frame.is-in img { transform: scale(1); }
.ndt-media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(28,10,17,.45), transparent 42%); } */



.ndt-media-frame {
	position: relative; margin: -20px auto 0; max-width: 980px;
	aspect-ratio: 21 / 9; overflow: hidden;
	background: linear-gradient(135deg, #f3edef 0%, #e6d9dd 100%);
	border: 1px solid var(--line); box-shadow: var(--shadow);
	animation: ndt-media-in 1s cubic-bezier(.16,1,.3,1) .1s both;
}
@keyframes ndt-media-in {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
.ndt-media-frame img {
	width: 100%; height: 100%;
	 /* object-fit: cover; */
	animation: ndt-media-img-in 1.3s cubic-bezier(.16,1,.3,1) .2s both;
	transition: transform 6s ease;
}

@keyframes ndt-media-img-in {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: 1; transform: scale(1.06); }
}


.ndt-media-frame:hover img { transform: scale(1); }
.ndt-media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(28,10,17,.45), transparent 42%); }
.ndt-media-frame::before {
	content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
	border: 1px solid rgba(198,0,61,0); transition: border-color .3s ease;
}
.ndt-media-frame:hover::before { border-color: rgba(198,0,61,.35); }

/* Shown only if the actual image file fails to load */
.ndt-media-frame.img-error img { display: none; }
.ndt-media-fallback-icon {
	display: none; position: absolute; inset: 0; z-index: 1;
	align-items: center; justify-content: center; color: rgba(198,0,61,.4);
}
.ndt-media-frame.img-error .ndt-media-fallback-icon { display: flex; }


:root[data-theme="dark"] .ndt-media-frame { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }



.ndt-media-tag { position: absolute; z-index: 2; inset-inline-start: 20px; bottom: 18px; padding: 7px 13px; background: rgba(255,255,255,.94); color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Body layout: sticky share rail + article ---------- */
.ndt-body-shell { padding: 56px 0 20px; }
.ndt-layout { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 40px; align-items: start; }

.ndt-share-rail { position: sticky; top: 116px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.ndt-share-label { writing-mode: vertical-rl; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
[dir="rtl"] .ndt-share-label { writing-mode: vertical-lr; }

.ndt-share-btn {
	width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft);
	cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ndt-share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }
.ndt-share-wa:hover { background: #25d366; border-color: #25d366; }
.ndt-copy-link { position: relative; }
.ndt-icon-check { position: absolute; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease; }
.ndt-icon-link { transition: opacity .2s ease, transform .2s ease; }
.ndt-copy-link.is-copied { background: #2f8a3a; border-color: #2f8a3a; color: #fff; }
.ndt-copy-link.is-copied .ndt-icon-link { opacity: 0; transform: scale(.5); }
.ndt-copy-link.is-copied .ndt-icon-check { opacity: 1; transform: scale(1); }

/* ---------- Article body ---------- */
.ndt-article-body { font-size: 17px; line-height: 2.05; color: var(--ink-soft); }
.ndt-article-body p { margin: 0 0 24px; }
/* .ndt-article-body p:first-of-type::first-letter {
	font-weight: 800; font-size: 3.3em; line-height: .85; float: left;
	padding-inline-end: 10px; padding-top: 4px; color: var(--brand);
}
[dir="rtl"] .ndt-article-body p:first-of-type::first-letter { float: right; } */


/* .ndt-article-body p:first-of-type::first-letter {
	font-weight: 700;
	font-size: 1.4em;
	color: var(--brand);
} */

.ndt-footer { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line); }
.ndt-back-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--brand); font-weight: 800; font-size: 13.5px;
	border-bottom: 1px solid rgba(198,0,61,.3); padding-bottom: 3px;
	transition: gap .2s ease, border-color .2s ease;
}

.ndt-back-link:hover { gap: 13px; border-color: var(--brand); }
[dir="ltr"] .ndt-back-link svg { transform: scaleX(-1); }


/* ---------- Related articles ---------- */
.ndt-related { padding: 78px 0 100px; margin-top: 30px; background: var(--canvas); border-top: 1px solid var(--line); }
.ndt-related-head { position: relative; margin: 0 0 34px; padding-bottom: 16px; }
.ndt-related-head span { color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ndt-related-head::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 46px; height: 3px; background: var(--brand); }

.ndt-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ndt-rcard {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden;
	opacity: 0; transform: translateY(20px);
	transition: opacity .5s ease var(--rd, 0s), transform .5s cubic-bezier(.16,1,.3,1) var(--rd, 0s),
		box-shadow .3s ease, border-color .3s ease;
}
.ndt-rcard.is-in { opacity: 1; transform: translateY(0); }
.ndt-rcard:hover { transform: translateY(-6px); border-color: #e3c3cd; box-shadow: 0 22px 50px rgba(47,15,27,.12); }
.ndt-rcard::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 3px; width: 100%;
	background: linear-gradient(90deg, var(--brand-dark), var(--brand));
	transform: scaleX(0); transform-origin: inset-inline-start;
	transition: transform .5s cubic-bezier(.16,1,.3,1) calc(var(--rd, 0s) + .15s);
}
.ndt-rcard.is-in::before { transform: scaleX(1); }
.ndt-rcard-num { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 2; color: rgba(255,255,255,.85); font: 800 26px/1 Arial, sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ndt-rcard-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--canvas); }
.ndt-rcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.ndt-rcard:hover .ndt-rcard-media img { transform: scale(1.06); filter: saturate(1.05); }
.ndt-rcard-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ndt-rcard-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ndt-rcard-meta span:first-child { color: var(--brand); }
.ndt-rcard-meta span:not(:first-child)::before { content: "·"; margin-inline-end: 8px; color: #c9bcc0; }
.ndt-rcard-body h4 { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ndt-rcard-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 12px; font-weight: 800; }
.ndt-rcard-link svg { transition: transform .2s ease; }
.ndt-rcard:hover .ndt-rcard-link svg { transform: translateX(4px); }
[dir="rtl"] .ndt-rcard:hover .ndt-rcard-link svg { transform: translateX(-4px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ndt-layout { grid-template-columns: 1fr; }
	.ndt-share-rail { position: static; flex-direction: row; justify-content: center; margin-bottom: 30px; }
	.ndt-share-label { writing-mode: initial; margin: 0 6px 0 0; }
	.ndt-media-frame { margin-top: -14px; aspect-ratio: 16 / 10; }
	.ndt-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.ndt-hero { padding-bottom: 34px; }
	.ndt-title { font-size: 30px; }
	.ndt-body-shell { padding: 40px 0 10px; }
	.ndt-article-body { font-size: 16px; }
	.ndt-related { padding: 56px 0 72px; }
	.ndt-related-grid { grid-template-columns: 1fr; }
	.ndt-media-frame { aspect-ratio: 4 / 3.2; }
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] .ndt-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%); }
:root[data-theme="dark"] .ndt-hero-bg::before { background-image: radial-gradient(rgba(255,92,129,.2) 1px, transparent 1px); }
:root[data-theme="dark"] .ndt-related { background: var(--canvas); }
:root[data-theme="dark"] :is(.ndt-media-frame, .ndt-share-btn, .ndt-rcard) { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .ndt-badge-cat { color: #fff; }
:root[data-theme="dark"] .ndt-rcard-media { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
	.ndt-hero *, .ndt-media-frame, .ndt-rcard, .ndt-title, .ndt-title::after, .ndt-meta-row { animation: none !important; transition-duration: .01ms !important; }
	.ndt-media-frame, .ndt-rcard { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}












/* ============ Launch popup: Aseel ============ */
/* ============ Launch announcement bar (top) ============ */
.lnch-bar {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, var(--brand-dark) 0%, var(--brand) 55%, #8f0030 100%);
	color: #fff;
	max-height: 60px;
	transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s ease, opacity .3s ease;
}
.lnch-bar.is-hidden { max-height: 0; opacity: 0; pointer-events: none; }

.lnch-bar-shine {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
	transform: translateX(-140%);
	animation: lnch-bar-shine-sweep 5s ease-in-out 1.2s infinite;
}
@keyframes lnch-bar-shine-sweep { 0%, 55% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }

.lnch-bar-layout {
	position: relative; z-index: 1;
	min-height: 46px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	padding: 8px 0;
}

.lnch-bar-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.lnch-bar-badge {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.3);
	font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	animation: lnch-bar-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes lnch-bar-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

.lnch-bar-text { color: rgba(255,255,255,.92); font-size: 13.5px; font-weight: 600; }
.lnch-bar-text b { font-weight: 800; margin-inline-end: 4px; }

.lnch-bar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.lnch-bar-cta {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	background: #fff; color: var(--brand-dark);
	font-size: 12.5px; font-weight: 800;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease;
}
.lnch-bar-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.lnch-bar-cta svg { transition: transform .2s ease; }
.lnch-bar-cta:hover svg { transform: translateX(-3px); }
[dir="ltr"] .lnch-bar-cta:hover svg { transform: translateX(3px); }

.lnch-bar-close {
	width: 28px; height: 28px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
	color: #fff; cursor: pointer; border-radius: 50%;
	transition: background .2s ease, transform .2s ease;
}
.lnch-bar-close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }

@media (max-width: 680px) {
	.lnch-bar-layout { padding: 10px 0; }
	.lnch-bar-text { font-size: 12px; }
	.lnch-bar-text b { display: block; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.lnch-bar-shine, .lnch-bar-badge { animation: none !important; }
}

:root[data-theme="dark"] .lnch-bar { background: linear-gradient(115deg, #5c0021 0%, var(--brand) 55%, #3c0016 100%); }









/* ============ Sitemap page ============ */
.sm-breadcrumbs { padding-top: 18px; }

.sm-hero { position: relative; overflow: hidden; padding: 46px 0 60px; background: linear-gradient(160deg, #2c0716 0%, #57001f 46%, #740023 100%); color: #fff; }
.sm-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.sm-hero-bg i:nth-child(1) { position: absolute; width: 340px; height: 340px; top: -100px; inset-inline-start: -80px; background: rgba(255,255,255,.08); border-radius: 50%; filter: blur(70px); animation: sm-blob 16s ease-in-out infinite; }
.sm-hero-bg i:nth-child(2) { position: absolute; width: 300px; height: 300px; bottom: -100px; inset-inline-end: 6%; background: rgba(255,255,255,.06); border-radius: 50%; filter: blur(70px); animation: sm-blob 20s ease-in-out infinite reverse; }
@keyframes sm-blob { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,20px) scale(1.1); } }

.sm-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.sm-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; padding: 6px 13px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #f5b4c6; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; animation: sm-rise .5s ease both; }
.sm-hero h1 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.25; letter-spacing: -.02em; animation: sm-rise .55s ease .05s both; }
.sm-hero-summary { display: block; max-width: 600px; margin-top: 16px; color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.9; animation: sm-rise .55s ease .1s both; }
.sm-hero-stat { margin-top: 26px; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); animation: sm-rise .55s ease .15s both; }
.sm-hero-stat b { font-size: 22px; font-weight: 800; }
.sm-hero-stat span { color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; }
@keyframes sm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Graph */
.sm-graph-section { padding: 60px 0 20px; background: var(--canvas); }
.sm-graph-title { margin: 0 0 30px; font-size: 22px; text-align: center; color: var(--brand-dark); }
.sm-graph { position: relative; max-width: 900px; margin: 0 auto; }
.sm-graph-svg { width: 100%; height: auto; overflow: visible; display: block; }

.sm-graph-line {
	stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 6;
	opacity: 0; stroke-dashoffset: 40;
	animation: sm-line-in .8s ease var(--gd, 0s) both;
}
@keyframes sm-line-in { from { opacity: 0; stroke-dashoffset: 40; } to { opacity: 1; stroke-dashoffset: 0; } }

.sm-graph-center-ring { fill: none; stroke: var(--brand-soft); stroke-width: 2; }
.sm-graph-center { fill: var(--brand); animation: sm-center-pulse 2.6s ease-in-out infinite; }
@keyframes sm-center-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(198,0,61,0)); } 50% { filter: drop-shadow(0 0 10px rgba(198,0,61,.5)); } }

.sm-graph-node { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; animation: sm-node-pop .5s cubic-bezier(.34,1.56,.64,1) var(--gd, 0s) both; }
.sm-graph-node circle { fill: #fff; stroke: var(--brand); stroke-width: 2; transition: fill .25s ease, stroke .25s ease; }
:root[data-theme="dark"] .sm-graph-node circle { fill: var(--surface); }
.sm-graph-node:hover circle { fill: var(--brand); }
.sm-graph-node:hover .sm-graph-count { fill: #fff; }
@keyframes sm-node-pop { to { opacity: 1; transform: scale(1); } }

.sm-graph-count { fill: var(--brand); font: 800 16px Arial, sans-serif; transition: fill .25s ease; }
.sm-graph-node-label { fill: var(--ink-soft); font: 700 11px Tajawal, Arial, sans-serif; }

.sm-graph-center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.sm-graph-center-label b { display: block; color: #fff; font-size: 12px; font-weight: 800; }
.sm-graph-center-label span { color: rgba(255,255,255,.85); font-size: 9px; font-weight: 700; }

@media (max-width: 680px) {
	.sm-graph-node-label { font-size: 9px; }
	.sm-graph-section { padding: 44px 0 10px; }
}

/* Card listing */
.sm-listing-section { padding: 50px 0 100px; background: var(--canvas); }
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sm-card {
	background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand);
	padding: 26px 24px; opacity: 0; transform: translateY(20px);
	transition: opacity .5s ease var(--sd, 0s), transform .5s cubic-bezier(.16,1,.3,1) var(--sd, 0s), box-shadow .3s ease, transform .3s ease;
}
.sm-card.is-visible { opacity: 1; transform: translateY(0); }
.sm-card:hover { box-shadow: 0 18px 40px rgba(47,15,27,.1); transform: translateY(-4px); }

.sm-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sm-card-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border-radius: 50%; }
.sm-card-head b { font-size: 15px; }
.sm-card-head b a { color: var(--ink); }
.sm-card-head b a:hover { color: var(--brand); }
.sm-card-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }

.sm-card-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sm-card-list a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; transition: color .2s ease, gap .2s ease; }
.sm-card-list a svg { color: var(--brand); flex: 0 0 auto; transition: transform .2s ease; }
.sm-card-list a:hover { color: var(--brand); gap: 11px; }
.sm-card-list a:hover svg { transform: translateX(-3px); }
[dir="ltr"] .sm-card-list a:hover svg { transform: translateX(3px); }
.sm-card-empty { color: var(--muted); font-size: 12.5px; font-style: italic; }

@media (max-width: 980px) { .sm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .sm-grid { grid-template-columns: 1fr; } }

:root[data-theme="dark"] .sm-card { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .sm-hero { background: linear-gradient(160deg, #1a0510 0%, #3a0016 46%, #52001a 100%); }

@media (prefers-reduced-motion: reduce) {
	.sm-hero-bg i, .sm-graph-line, .sm-graph-node, .sm-graph-center, .sm-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}



/* Instantly hides the bar with no transition, before the page paints */
.lnch-bar-predismissed .lnch-bar {
	display: none !important;
}











/* ================= MOBILE FIXES ================= */

/* 1. Announcement bar: always show a clear X + button */
@media (max-width: 680px) {
	.lnch-bar { max-height: 240px; }
	.lnch-bar-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 10px 12px;
		padding: 12px 0 14px;
	}
	.lnch-bar-info { grid-column: 1; grid-row: 1; }
	.lnch-bar-actions { display: contents; }
	.lnch-bar-close {
		grid-column: 2; grid-row: 1;
		width: 36px; height: 36px;
		background: rgba(255,255,255,.2);
		border: 1.5px solid rgba(255,255,255,.8);
	}
	.lnch-bar-cta {
		grid-column: 1 / -1; grid-row: 2;
		justify-content: center;
		padding: 10px 14px;
	}
}

/* 2. Hamburger menu: one header only */
@media (max-width: 980px) {
	body.nav-open .sticky-header,
	body.nav-open .sticky-header.is-visible {
		transform: translateY(-105%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: none;
	}
	body.nav-open .main-header {
		position: fixed;
		top: 0; left: 0; right: 0;
		width: 100%;
		z-index: 66;
	}
	.mobile-nav {
		top: 74px;
		bottom: auto;
		height: calc(100vh - 74px);
		height: calc(100dvh - 74px);
		z-index: 65;
		padding-bottom: 90px;
	}
}

/* 3. Hero image: remove the empty dark strip on mobile */
@media (max-width: 980px) {
	.hero-backdrop, .hero-shade { width: 100%; height: 100%; }
}

/* 4. Keep the floating buttons off the carousel arrows */
@media (max-width: 680px) {
	.rail-controls { padding-inline-end: 72px; }
}









/* ============================================================
   ASEEL PAGE REDESIGN  (all classes prefixed  asl-  — no clashes)
   APPEND this whole block to the END of  style.css
   ============================================================ */

.asl-page { overflow: hidden; }

/* ---------- reveal ---------- */
.asl-page [data-asl] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
.asl-page [data-asl].is-in { opacity: 1; transform: none; }

/* ---------- buttons ---------- */
.asl-btn { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 800; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.asl-btn:hover { transform: translateY(-3px); }
.asl-btn-light { background: #fff; color: var(--brand-dark); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.asl-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.asl-btn-ghost:hover { background: rgba(255,255,255,.16); }

/* ---------- hero ---------- */
.asl-hero { position: relative; padding-bottom: 96px; color: #fff; background: linear-gradient(135deg, #2c0716 0%, #57001f 46%, #8a0030 100%); overflow: hidden; }
.asl-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.asl-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.asl-hero-bg i { position: absolute; border-radius: 50%; filter: blur(80px); }
.asl-hero-bg i:nth-child(1) { width: 420px; height: 420px; top: -140px; inset-inline-start: -100px; background: rgba(255,92,129,.30); animation: asl-blob 18s ease-in-out infinite; }
.asl-hero-bg i:nth-child(2) { width: 360px; height: 360px; bottom: -140px; inset-inline-end: 4%; background: rgba(255,255,255,.12); animation: asl-blob 22s ease-in-out infinite reverse; }
.asl-hero-bg i:nth-child(3) { width: 220px; height: 220px; top: 30%; inset-inline-end: 38%; background: rgba(198,0,61,.35); animation: asl-blob 15s ease-in-out infinite; }
@keyframes asl-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.14); } }

.asl-hero .site-shell { position: relative; z-index: 1; }
.asl-hero .breadcrumbs, .asl-hero .breadcrumbs em, .asl-hero .breadcrumbs b { color: rgba(255,255,255,.65); }
.asl-hero .breadcrumbs a:hover { color: #fff; }

.asl-hero-grid { padding-top: 36px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: clamp(40px, 5vw, 80px); align-items: center; }

.asl-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #ffd1de; font-size: 12px; font-weight: 800; animation: asl-rise .6s ease both; }
.asl-badge i { width: 8px; height: 8px; border-radius: 50%; background: #ffd54a; animation: asl-ping 1.8s ease-in-out infinite; }
@keyframes asl-ping { 0%,100% { box-shadow: 0 0 0 0 rgba(255,213,74,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,213,74,0); } }

.asl-eyebrow { margin: 22px 0 8px; color: #ff9fb8; font-size: 22px; font-weight: 800; letter-spacing: .02em; animation: asl-rise .7s ease .08s both; }
.asl-hero h1 { margin: 0; font-size: clamp(32px, 3.7vw, 54px); line-height: 1.2; letter-spacing: -.028em; text-wrap: balance; animation: asl-rise .8s cubic-bezier(.16,1,.3,1) .16s both; }
.asl-lead { max-width: 58ch; margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: 16.5px; line-height: 1.95; animation: asl-rise .8s cubic-bezier(.16,1,.3,1) .26s both; }
.asl-hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; animation: asl-rise .8s cubic-bezier(.16,1,.3,1) .36s both; }
.asl-trust { margin: 32px 0 0; padding: 22px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; border-top: 1px solid rgba(255,255,255,.18); animation: asl-rise .8s cubic-bezier(.16,1,.3,1) .46s both; }
.asl-trust li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; }
.asl-trust svg { color: #6ee7a0; }
@keyframes asl-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* mockup */
.asl-hero-visual { position: relative; padding: 24px 10px 30px; }
.asl-glow { position: absolute; inset: 8% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,92,129,.5), transparent 72%); filter: blur(40px); animation: asl-glow 6s ease-in-out infinite; }
@keyframes asl-glow { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.asl-mock { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 40px 90px rgba(0,0,0,.45); animation: asl-mock-in 1s cubic-bezier(.16,1,.3,1) .2s both, asl-float 7s ease-in-out 1.4s infinite; }
@keyframes asl-mock-in { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes asl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.asl-mock-bar { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 14px; background: #f4eef0; border-bottom: 1px solid var(--line); }
.asl-dots { display: flex; gap: 6px; }
.asl-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d7cdd0; }
.asl-dots i:first-child { background: var(--brand); }
.asl-url { margin-inline: auto; padding: 3px 14px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font: 600 11px Arial, sans-serif; }
.asl-mock-shot { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #f7f8fb; }
.asl-mock-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.asl-mock-body { position: relative; padding: 30px 28px; display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; min-height: 290px; color: #1c1719; }
.asl-scan { position: absolute; inset-inline: 0; top: 0; height: 60px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(198,0,61,.18)); border-bottom: 2px solid rgba(198,0,61,.6); animation: asl-scan 4s ease-in-out infinite; }
@keyframes asl-scan { 0% { transform: translateY(-60px); } 100% { transform: translateY(330px); } }

.asl-gauge { position: relative; width: 150px; height: 150px; }
.asl-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.asl-gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.asl-gauge-track { stroke: var(--brand-soft); }
.asl-gauge-fill { stroke: var(--brand); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .5s; }
.is-in .asl-gauge-fill { stroke-dashoffset: calc(100 - var(--p)); }
.asl-gauge > div { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; }
.asl-gauge b { font: 800 36px/1 Arial, sans-serif; color: var(--brand); }
.asl-gauge em { font: 800 16px/1.9 Arial, sans-serif; color: var(--brand); font-style: normal; }
.asl-gauge small { width: 100%; margin-top: 2px; color: #71676b; font-size: 11px; font-weight: 800; }

.asl-lines { display: grid; gap: 11px; }
.asl-lines span { height: 9px; width: var(--w); border-radius: 6px; background: #e9e1e4; }
.asl-lines .hl { background: rgba(198,0,61,.28); animation: asl-hl 2.6s ease-in-out infinite; }
.asl-lines .hl.q { background: rgba(74,111,165,.32); animation-delay: .8s; }
@keyframes asl-hl { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.asl-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 12px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border-inline-start: 3px solid var(--brand); box-shadow: 0 18px 40px rgba(0,0,0,.3); color: #1c1719; opacity: 0; animation: asl-pop .7s cubic-bezier(.34,1.56,.64,1) 1.1s both, asl-float 5s ease-in-out 1.9s infinite; }
.asl-chip em { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.asl-chip span { display: grid; line-height: 1.3; }
.asl-chip b { font: 800 17px Arial, sans-serif; }
.asl-chip small { color: #71676b; font-size: 11px; font-weight: 700; }
.asl-chip-1 { inset-inline-start: -14px; top: 26%; }
.asl-chip-2 { inset-inline-end: -10px; bottom: 12%; animation-delay: 1.35s, 2.1s; animation-direction: normal, reverse; }
@keyframes asl-pop { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- shared heading ---------- */
.asl-head { max-width: 780px; }
.asl-head > p { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; color: var(--brand); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }
.asl-head > p::before { content: ""; width: 34px; height: 2px; background: var(--brand); }
.asl-head h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.28; letter-spacing: -.02em; text-wrap: balance; }
.asl-head > span { display: block; margin-top: 18px; color: var(--muted); font-size: 15.5px; line-height: 1.95; text-wrap: pretty; }
.asl-center { margin-inline: auto; text-align: center; }
.asl-center > p { justify-content: center; }
.asl-on-dark > p { color: #ff9fb8; }
.asl-on-dark > p::before { background: #ff9fb8; }
.asl-on-dark h2 { color: #fff; }

/* ---------- stats ---------- */
.asl-stats { position: relative; z-index: 2; margin-top: -52px; }
.asl-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: var(--shadow); }
.asl-stat { padding: 30px 26px; display: grid; gap: 4px; border-inline-start: 1px solid var(--line); text-align: center; opacity: 0; transform: translateY(18px); transition: opacity .6s ease var(--d), transform .6s ease var(--d), background .25s ease; }
.is-in .asl-stat { opacity: 1; transform: none; }
.asl-stat:first-child { border-inline-start: 0; }
.asl-stat:hover { background: var(--brand-soft); }
.asl-stat b { color: var(--brand); font: 800 clamp(34px, 3.4vw, 46px)/1.1 Arial, sans-serif; }
.asl-stat > span { color: var(--muted); font-size: 13px; font-weight: 700; }
.asl-integrations { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.asl-integrations > span { margin-inline-end: 8px; color: var(--muted); font-size: 12.5px; font-weight: 800; }
.asl-integrations em { padding: 7px 16px; background: var(--surface, #fff); border: 1px solid var(--line); color: var(--ink-soft); font: 700 12.5px Arial, sans-serif; font-style: normal; transition: color .2s, border-color .2s, transform .2s; }
.asl-integrations em:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); }

/* ---------- purpose ---------- */
.asl-purpose { padding: 96px 0 40px; }
.asl-purpose-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: start; }
.asl-req { padding: 32px 30px; background: var(--surface, #fff); border: 1px solid var(--line); border-top: 4px solid var(--brand); box-shadow: 0 20px 50px rgba(47,15,27,.07); }
.asl-req > b { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--brand-dark); font-size: 15px; }
.asl-req ul { margin: 0; padding: 0; list-style: none; display: grid; }
.asl-req li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font: 700 13.5px Arial, sans-serif; transition: padding-inline-start .2s ease, color .2s ease; }
.asl-req li:hover { padding-inline-start: 8px; color: var(--brand); }
.asl-req li svg { flex: 0 0 auto; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }

/* ---------- features ---------- */
.asl-features { padding: 90px 0 100px; }
.asl-feat-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.asl-feat { position: relative; padding: 36px 30px 32px; overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--line); transition: opacity .7s ease var(--d), transform .35s cubic-bezier(.16,1,.3,1), }
/* .asl-feat::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(198,0,61,.13), transparent 70%); }
.asl-feat:hover::before { opacity: 1; }
.asl-feat.is-in:hover { transform: translateY(-8px); border-color: #e3c3cd; box-shadow: 0 26px 55px rgba(47,15,27,.13); } */
.asl-feat-no { position: absolute; top: 14px; inset-inline-end: 22px; color: rgba(198,0,61,.09); font: 800 56px/1 Arial, sans-serif; }
.asl-feat-ico { position: relative; width: 60px; height: 60px; margin-bottom: 24px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); border-radius: 16px; transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.asl-feat:hover .asl-feat-ico { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.08); }
.asl-feat h3 { position: relative; margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
.asl-feat p { position: relative; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.9; }

/* ---------- inside (dark) ---------- */
.asl-inside { position: relative; padding: 96px 0; background: linear-gradient(160deg, #21161a 0%, #3a0a1e 100%); overflow: hidden; }
.asl-inside::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; }
.asl-inside .site-shell { position: relative; }
.asl-inside-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.asl-inside-item { display: flex; align-items: center; gap: 18px; padding: 24px 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); transition: opacity .7s ease var(--d), transform .3s ease, background .25s ease, border-color .25s ease; }
.asl-inside-item.is-in:hover { transform: translateY(-5px); background: rgba(255,255,255,.1); border-color: rgba(255,92,129,.6); }
.asl-inside-item span { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; box-shadow: 0 10px 24px rgba(198,0,61,.4); }
.asl-inside-item b { color: #fff; font-size: 15px; line-height: 1.6; }
.asl-inside-item small { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500; line-height: 1.8; }

/* ---------- steps ---------- */
.asl-steps { padding: 100px 0; }
.asl-steps-track { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(4,1fr); }
.asl-steps-track::before { content: ""; position: absolute; top: 34px; inset-inline: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 16px); transform: scaleX(0); transform-origin: center; transition: transform 1.4s cubic-bezier(.16,1,.3,1) .3s; }
.asl-steps-track.is-in::before { transform: scaleX(1); }
.asl-step { position: relative; padding: 0 20px; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .6s ease var(--d), transform .6s ease var(--d); }
.is-in .asl-step { opacity: 1; transform: none; }
.asl-step-node { width: 68px; height: 68px; margin: 0 auto 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; font: 800 22px Arial, sans-serif;  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.asl-step:hover .asl-step-node { transform: scale(1.12); }
.asl-step h3 { margin: 0 0 10px; font-size: 18px; }
.asl-step p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.85; }

/* ---------- glossary ---------- */
.asl-terms { padding: 20px 0 110px; }
.asl-terms-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.asl-terms .asl-head { position: sticky; top: 120px; }
.asl-acc { display: grid; gap: 14px; }
.asl-acc-item { background: var(--surface, #fff); border: 1px solid var(--line); border-inline-start: 3px solid transparent; transition: opacity .6s ease var(--d), transform .6s ease var(--d), border-color .25s ease, box-shadow .25s ease; }
.asl-acc-item[open] { border-inline-start-color: var(--brand); box-shadow: 0 18px 40px rgba(47,15,27,.09); }
.asl-acc-item summary { padding: 20px 24px; display: grid; grid-template-columns: 36px 1fr 32px; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.asl-acc-item summary::-webkit-details-marker { display: none; }
.asl-acc-no { color: var(--brand); font: 800 14px Arial, sans-serif; opacity: .5; }
.asl-acc-item[open] .asl-acc-no { opacity: 1; }
.asl-acc-item summary b { font-size: 16px; line-height: 1.6; }
.asl-acc-plus { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); transition: transform .3s ease, background .25s ease, color .25s ease; }
.asl-acc-item[open] .asl-acc-plus { transform: rotate(135deg); background: var(--brand); color: #fff; }
.asl-acc-body { padding: 0 24px 24px 76px; animation: asl-rise .4s ease both; }
[dir="rtl"] .asl-acc-body { padding: 0 76px 24px 24px; }
.asl-acc-body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.95; }

/* ---------- CTA ---------- */
.asl-cta { position: relative; padding: 84px 0; overflow: hidden; color: #fff; background: linear-gradient(120deg, #57001f 0%, #8a0030 60%, #c6003d 100%); }
.asl-cta-rings i { position: absolute; inset-inline-end: -120px; top: 50%; width: 360px; height: 360px; margin-top: -180px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: asl-ring 6s ease-out infinite; }
.asl-cta-rings i:nth-child(2) { animation-delay: 2s; }
.asl-cta-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes asl-ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.asl-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.asl-cta p { margin: 0 0 10px; color: #ffc1d4; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.asl-cta h2 { margin: 0; max-width: 700px; font-size: clamp(30px, 3vw, 44px); line-height: 1.28; }
.asl-cta-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.asl-hero-grid { grid-template-columns: 1fr; }
	.asl-hero-visual { max-width: 720px; width: 100%; margin-inline: auto; }
	.asl-feat-grid, .asl-inside-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px) {
	.asl-purpose-grid, .asl-terms-grid { grid-template-columns: 1fr; gap: 44px; }
	.asl-terms .asl-head { position: static; }
	.asl-stats-grid { grid-template-columns: repeat(2,1fr); }
	.asl-stat:nth-child(3) { border-inline-start: 0; }
	.asl-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
	.asl-steps-track { grid-template-columns: repeat(2,1fr); row-gap: 46px; }
	.asl-steps-track::before { display: none; }
	.asl-cta-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
}
@media (max-width: 680px) {
	.asl-hero { padding-bottom: 80px; }
	.asl-hero h1 { font-size: 32px; }
	.asl-hero-actions { flex-direction: column; }
	.asl-btn { width: 100%; }
	.asl-mock-body { grid-template-columns: 1fr; justify-items: center; padding: 24px 20px; min-height: 0; }
	.asl-lines { width: 100%; }
	.asl-chip-1 { inset-inline-start: 4px; top: auto; bottom: -6px; }
	.asl-chip-2 { display: none; }
	.asl-purpose { padding: 68px 0 20px; }
	.asl-features, .asl-steps, .asl-inside { padding: 68px 0; }
	.asl-feat-grid, .asl-inside-grid, .asl-steps-track { grid-template-columns: 1fr; }
	.asl-terms { padding-bottom: 72px; }
	.asl-acc-item summary { padding: 16px 16px; grid-template-columns: 28px 1fr 30px; gap: 10px; }
	.asl-acc-body, [dir="rtl"] .asl-acc-body { padding: 0 16px 20px; }
	.asl-cta { padding: 64px 0; }
	.asl-cta-actions { width: 100%; flex-direction: column; }
}

/* ---------- dark mode ---------- */
:root[data-theme="dark"] .asl-stats-grid,
:root[data-theme="dark"] .asl-req,
:root[data-theme="dark"] .asl-feat,
:root[data-theme="dark"] .asl-acc-item,
:root[data-theme="dark"] .asl-integrations em { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .asl-mock { background: var(--surface); }
:root[data-theme="dark"] .asl-mock-bar { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .asl-url { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .asl-mock-body { color: var(--ink); }
:root[data-theme="dark"] .asl-lines span { background: var(--surface-2); }
:root[data-theme="dark"] .asl-lines .hl { background: rgba(255,92,129,.35); }
:root[data-theme="dark"] .asl-chip { background: rgba(28,21,25,.94); color: var(--ink); }
:root[data-theme="dark"] .asl-gauge small, :root[data-theme="dark"] .asl-chip small { color: var(--muted); }
:root[data-theme="dark"] .asl-stat:hover { background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce) {
	.asl-page *, .asl-page *::before, .asl-page *::after { animation: none !important; transition-duration: .01ms !important; }
	.asl-page [data-asl], .asl-stat, .asl-step, .asl-chip { opacity: 1 !important; transform: none !important; }
	.asl-gauge-fill { stroke-dashoffset: calc(100 - var(--p)); }
}






/* ---------- Home hero: small rotating globe inside the "Countries" stat card ---------- */
.vstat-chart-box.is-globe { width: 46px; height: 46px; }
.vstat-miniglobe { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 8px 18px rgba(198,0,61,.28); transition: transform .3s ease, box-shadow .3s ease; }
.vstat-card:hover .vstat-miniglobe { transform: scale(1.1); box-shadow: 0 0 0 1px var(--brand), 0 10px 24px rgba(198,0,61,.5); }





















/* ============================================================
   COUNTRIES PAGE  (all classes prefixed  cg-  — no clashes)
   APPEND this whole block to the END of  style.css
   ============================================================ */

.cg-page { background: var(--canvas); }

/* ---------- full-page stage (always dark "space", in light and dark mode) ---------- */
.cg-stage {
	position: relative; display: flex; align-items: stretch;
	min-height: max(640px, calc(100vh - 215px));
	--m: max(40px, calc((100% - var(--shell)) / 2));   /* same side margin as the header / site-shell */
	overflow: hidden; color: #fff;
	background: radial-gradient(1200px 700px at 62% 45%, #4a0f27 0%, #25081a 38%, #0f0409 100%);
}
.cg-bg { position: absolute; inset: 0; pointer-events: none; }
.cg-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(closest-side at 60% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(closest-side at 60% 50%, #000 20%, transparent 100%);
}
.cg-bg i { position: absolute; border-radius: 50%; filter: blur(90px); }
.cg-bg i:nth-child(1) { width: 460px; height: 460px; top: -160px; inset-inline-start: -120px; background: rgba(255,92,129,.22); animation: cg-blob 18s ease-in-out infinite; }
.cg-bg i:nth-child(2) { width: 380px; height: 380px; bottom: -160px; inset-inline-end: 8%; background: rgba(198,0,61,.30); animation: cg-blob 22s ease-in-out infinite reverse; }
.cg-bg i:nth-child(3) { width: 260px; height: 260px; top: 20%; inset-inline-end: 30%; background: rgba(255,255,255,.07); animation: cg-blob 15s ease-in-out infinite; }
@keyframes cg-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.14); } }

.cg-globe { position: absolute; inset: 0; z-index: 1; }
.cg-globe canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.cg-globe canvas.is-grab { cursor: grabbing; }

/* ---------- side column ---------- */
.cg-side {
	position: relative; z-index: 3; width: calc(var(--m) + 400px); flex: 0 0 calc(var(--m) + 400px);
	padding: 26px 24px 34px 0; padding-inline-start: var(--m);
	display: flex; flex-direction: column; justify-content: center; gap: 16px;
	pointer-events: none;
}
.cg-side > * { pointer-events: auto; }

.cg-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 600; }
.cg-crumbs a:hover { color: #fff; }
.cg-crumbs b { font-weight: 400; opacity: .5; }
.cg-crumbs em { font-style: normal; color: #ffb3c8; }

.cg-eyebrow { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; color: #ff9fb8; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; animation: cg-rise .7s ease .1s both; }
.cg-eyebrow span { width: 34px; height: 2px; background: #ff5c81; transform-origin: left; animation: cg-line .9s cubic-bezier(.16,1,.3,1) .4s both; }
[dir="rtl"] .cg-eyebrow span { transform-origin: right; }
.cg-intro h1 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; animation: cg-rise .8s cubic-bezier(.16,1,.3,1) .18s both; }
.cg-lead { margin: 12px 0 0; color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.8; animation: cg-rise .8s cubic-bezier(.16,1,.3,1) .28s both; }
@keyframes cg-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cg-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.cg-stats { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; animation: cg-rise .8s cubic-bezier(.16,1,.3,1) .38s both; }
.cg-stat { padding: 14px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-inline-start: 3px solid #ff5c81; backdrop-filter: blur(10px); }
.cg-stat b { display: block; font: 800 30px/1.1 Arial, sans-serif; color: #fff; }
.cg-stat span { color: rgba(255,255,255,.62); font-size: 11.5px; font-weight: 700; }

/* ---------- country chips ---------- */
.cg-listbox { padding: 16px; background: rgba(18,5,11,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px); animation: cg-rise .8s cubic-bezier(.16,1,.3,1) .48s both; }
.cg-listbox-head { margin-bottom: 12px; color: #ffb3c8; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cg-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 172px; overflow-y: auto; padding-inline-end: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,92,129,.5) transparent; }
.cg-chip {
	display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
	padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
	color: #fff; text-align: start; cursor: pointer;
	opacity: 0; animation: cg-rise .5s ease calc(.55s + var(--i) * .04s) both;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cg-chip:hover, .cg-chip.is-hover { background: rgba(255,92,129,.18); border-color: rgba(255,92,129,.6); transform: translateY(-2px); }
.cg-chip.is-active { background: #c6003d; border-color: #ff7a9c; box-shadow: 0 10px 26px rgba(198,0,61,.45); }
.cg-chip-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-chip-n { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: #c6003d; font: 800 11px Arial, sans-serif; }

/* country code badge (flag emoji does not render on Windows, so we use codes) */
.cg-code { width: 30px; height: 24px; display: inline-grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #ffd1de; font: 800 10.5px Arial, sans-serif; letter-spacing: .04em; }
.cg-chip.is-active .cg-code { background: rgba(255,255,255,.2); color: #fff; }
.cg-code-lg { width: 52px; height: 40px; font-size: 15px; background: linear-gradient(135deg, #700021, #c6003d); border-color: rgba(255,255,255,.25); color: #fff; }

/* ---------- globe tools + hint ---------- */
.cg-tools { position: absolute; z-index: 4; inset-inline-end: var(--m); bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.cg-tools button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(18,5,11,.6); backdrop-filter: blur(10px); color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease; }
.cg-tools button:hover { background: #c6003d; border-color: #ff7a9c; transform: translateY(-2px); }
.cg-tools .cg-i-play { display: none; }
.cg-tools button:not(.is-on) .cg-i-pause { display: none; }
.cg-tools button:not(.is-on) .cg-i-play { display: block; }
.cg-hint { position: absolute; z-index: 4; bottom: 28px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 140px); padding: 9px 16px; display: flex; align-items: center; gap: 10px; background: rgba(18,5,11,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; pointer-events: none; animation: cg-rise .8s ease 1.2s both; }
.cg-hint-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5c81; animation: cg-ping 1.8s ease-in-out infinite; }
@keyframes cg-ping { 0%,100% { box-shadow: 0 0 0 0 rgba(255,92,129,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,92,129,0); } }
.cg-stage.has-popup .cg-hint { opacity: 0; transition: opacity .3s ease; }

/* ---------- popup ---------- */
.cg-popup {
	position: absolute; z-index: 5; top: 50%; inset-inline-end: var(--m); width: 360px; max-height: calc(100% - 60px);
	display: none; flex-direction: column; overflow: hidden;
	background: linear-gradient(160deg, rgba(40,10,26,.96), rgba(18,5,11,.96));
	border: 1px solid rgba(255,120,160,.4); border-top: 3px solid #ff5c81;
	box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(198,0,61,.25);
	backdrop-filter: blur(18px);
	padding: 26px 24px 20px;
	transform: translateY(-50%);
}
.cg-popup.is-open { display: flex; animation: cg-pop .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes cg-pop { from { opacity: 0; transform: translateY(-46%) scale(.94); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.cg-pop-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s ease, transform .3s ease; }
.cg-pop-close:hover { background: #c6003d; transform: rotate(90deg); }
.cg-pop-head { display: flex; align-items: center; gap: 14px; padding-inline-end: 38px; }
.cg-pop-head small { display: block; color: #ff9fb8; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cg-pop-head h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.25; }
.cg-pop-count { margin: 20px 0 16px; padding: 14px 18px; display: flex; align-items: baseline; gap: 12px; background: rgba(198,0,61,.2); border: 1px solid rgba(255,120,160,.35); }
.cg-pop-count b { font: 800 44px/1 Arial, sans-serif; color: #fff; }
.cg-pop-count span { color: #ffd1de; font-size: 13px; font-weight: 700; }
.cg-pop-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; display: grid; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,92,129,.5) transparent; }
.cg-pop-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); opacity: 0; animation: cg-rise .5s ease calc(.25s + var(--i) * .09s) both; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.cg-pop-list li:hover { background: rgba(255,92,129,.16); border-color: rgba(255,92,129,.55); transform: translateX(4px); }
[dir="rtl"] .cg-pop-list li:hover { transform: translateX(-4px); }
.cg-pop-list i { color: #ff7a9c; font: 800 11px Arial, sans-serif; font-style: normal; }
.cg-pop-list span { font-size: 14px; font-weight: 700; line-height: 1.5; }
.cg-pop-soon { margin: 0; padding: 14px 16px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.8; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.2); }
.cg-pop-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg-pop-cta { padding: 10px 16px; background: #fff; color: #700021; font-size: 12.5px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.cg-pop-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.cg-pop-nav { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font: 700 11.5px Arial, sans-serif; }
.cg-pop-nav button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s ease; }
.cg-pop-nav button:hover { background: #c6003d; }
[dir="rtl"] .cg-pop-nav .flip { transform: scaleX(-1); }

/* ---------- static directory ---------- */
.cg-directory { padding: 96px 0 90px; background: var(--canvas); }
.cg-dir-head p { margin: 0 0 10px; display: flex; align-items: center; gap: 12px; color: var(--brand); font-size: 12.5px; font-weight: 800; }
.cg-dir-head p::before { content: ""; width: 34px; height: 2px; background: var(--brand); }
.cg-dir-head h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.3; letter-spacing: -.02em; }
.cg-dir-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cg-ctry { position: relative; padding: 22px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid transparent; opacity: 0; transform: translateY(22px); transition: opacity .6s ease var(--d), transform .6s cubic-bezier(.16,1,.3,1) var(--d), border-color .25s ease, box-shadow .25s ease; }
.cg-ctry.is-in { opacity: 1; transform: none; }
.cg-ctry.is-in:hover { transform: translateY(-5px); border-top-color: var(--brand); box-shadow: 0 22px 50px rgba(47,15,27,.12); }
.cg-ctry header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cg-ctry header h3 { margin: 0; flex: 1; font-size: 16px; line-height: 1.35; }
.cg-ctry header b { min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; background: var(--brand); color: #fff; font: 800 12px Arial, sans-serif; }
.cg-ctry .cg-code { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.cg-ctry ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cg-ctry li { position: relative; padding-inline-start: 16px; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; line-height: 1.55; }
.cg-ctry li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.cg-ctry p { margin: 0; color: var(--muted); font-size: 12.5px; font-style: italic; }

/* ---------- CTA ---------- */
.cg-cta { padding: 76px 0; color: #fff; background: linear-gradient(120deg, #57001f 0%, #8a0030 60%, #c6003d 100%); }
.cg-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cg-cta p { margin: 0 0 10px; color: #ffc1d4; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.cg-cta h2 { margin: 0; max-width: 700px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; }
.cg-cta .primary-action { flex: 0 0 auto; background: #fff; border-color: #fff; color: var(--brand-dark); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
	.cg-side { width: calc(var(--m) + 360px); flex-basis: calc(var(--m) + 360px); }
	.cg-popup { width: 330px; }
}
@media (max-width: 980px) {
	.cg-stage { flex-direction: column; min-height: 0; }
	.cg-side { display: contents; }
	.cg-intro { order: 1; position: relative; z-index: 3; padding: 26px 20px 8px; }
	.cg-globe { order: 2; position: relative; inset: auto; height: 470px; }
	.cg-listbox { order: 3; position: relative; z-index: 3; margin: 0 16px 36px; }
	.cg-chips { max-height: none; }
	.cg-hint { bottom: 12px; max-width: calc(100% - 90px); font-size: 11px; }
	.cg-tools { inset-inline-end: 14px; bottom: 14px; }
	.cg-tools button { width: 38px; height: 38px; }
	.cg-popup {
		position: fixed; top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: 72vh;
		border-radius: 18px 18px 0 0; border-top-width: 3px; transform: none;
	}
	.cg-popup.is-open { animation: cg-sheet .5s cubic-bezier(.16,1,.3,1) both; }
	@keyframes cg-sheet { from { transform: translateY(100%); } to { transform: none; } }
	.cg-dir-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.cg-globe { height: 400px; }
	.cg-chips { grid-template-columns: 1fr; }
	.cg-directory { padding: 68px 0 64px; }
	.cg-dir-grid { grid-template-columns: 1fr; }
	.cg-cta-inner { flex-direction: column; align-items: flex-start; }
	.cg-cta .primary-action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cg-page *, .cg-page *::before, .cg-page *::after { animation: none !important; transition-duration: .01ms !important; }
	.cg-chip, .cg-pop-list li, .cg-ctry { opacity: 1 !important; transform: none !important; }
}


/* ---------- Home hero: small rotating globe inside the "Countries" stat card ---------- */
.vstat-chart-box.is-globe { width: 46px; height: 46px; }
.vstat-miniglobe { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 8px 18px rgba(198,0,61,.28); transition: transform .3s ease, box-shadow .3s ease; }
.vstat-card:hover .vstat-miniglobe { transform: scale(1.1); box-shadow: 0 0 0 1px var(--brand), 0 10px 24px rgba(198,0,61,.5); }


/* ---------- breadcrumb bar (same look as the other pages) ---------- */
.cg-crumbbar { background: linear-gradient(180deg, #fbf9f9 0%, #f3edef 100%); border-bottom: 1px solid var(--line); }
.cg-crumbbar .breadcrumbs { min-height: 40px; padding-top: 0; padding-bottom: 0; }
:root[data-theme="dark"] .cg-crumbbar { background: var(--surface); }



/* ============ FAQ page: hero, search, category tabs, grouped list ============ */

/* ---- Hero ---- */
.faqx-hero {
	position: relative;
	padding-bottom: 64px;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #f7f3f4 100%);
}
.faqx-hero::before {
	content: "";
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(198,0,61,.14) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
	mask-image: linear-gradient(180deg, #000, transparent 75%);
	opacity: .5;
}
.faqx-hero .site-shell { position: relative; z-index: 1; }

.faqx-hero-copy {
	max-width: 760px;
	margin: 34px auto 0;
	text-align: center;
}
.faqx-hero-copy .eyebrow { margin-bottom: 16px; }
.faqx-hero-copy h1 {
	margin: 0;
	font-size: clamp(36px, 3.8vw, 54px);
	line-height: 1.2;
	letter-spacing: -.028em;
	text-wrap: balance;
}
.faqx-hero-copy h1::after {
	content: "";
	display: block;
	width: 60px; height: 4px;
	margin: 22px auto 0;
	background: var(--brand);
}
.faqx-hero-copy > span {
	display: block;
	max-width: 58ch;
	margin: 22px auto 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.95;
	text-wrap: pretty;
}

/* ---- Search ---- */
.faqx-search { position: relative; max-width: 620px; margin: 34px auto 0; }
.faqx-search svg {
	position: absolute; top: 50%; inset-inline-start: 20px;
	transform: translateY(-50%);
	color: var(--muted); pointer-events: none;
	transition: color .2s ease;
}
.faqx-search input {
	width: 100%; min-height: 60px;
	padding: 0 20px; padding-inline-start: 56px;
	border: 1px solid var(--line);
	background: #fff; color: var(--ink);
	font-size: 15px; outline: 0;
	box-shadow: 0 18px 44px rgba(50,14,28,.08);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.faqx-search input::placeholder { color: #93878c; }
.faqx-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(198,0,61,.1), 0 18px 44px rgba(50,14,28,.08); }
.faqx-search:focus-within svg { color: var(--brand); }

/* ---- Tabs ---- */
.faqx-section { padding-top: 44px; }

.faqx-tabs {
	max-width: 880px;
	margin: 0 auto;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.faqx-tab {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 11px 18px;
	border: 1px solid var(--line);
	background: #fff; color: var(--ink-soft);
	font: inherit; font-size: 13.5px; font-weight: 700;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.faqx-tab small {
	min-width: 22px; height: 22px; padding: 0 6px;
	display: inline-grid; place-items: center;
	border-radius: 11px;
	background: var(--brand-soft); color: var(--brand);
	font: 800 11px Arial, sans-serif;
	transition: background .2s ease, color .2s ease;
}
.faqx-tab:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.faqx-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.faqx-tab.is-active small { background: rgba(255,255,255,.22); color: #fff; }
.faqx-tab:focus-visible { outline: 3px solid rgba(198,0,61,.25); outline-offset: 3px; }

/* ---- Groups ---- */
.faqx-body { max-width: 880px; margin: 0 auto; }
.faqx-group { margin-top: 48px; }
.faqx-group[hidden], .faqx-item[hidden], .faqx-empty[hidden] { display: none !important; }

.faqx-group-head { display: flex; align-items: center; gap: 16px; }
.faqx-group-head h2 { margin: 0; font-size: 20px; line-height: 1.4; color: var(--brand-dark); }
.faqx-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.faqx-group .faq-list { margin-top: 20px; max-width: none; }

/* ---- Items (no numbers: the questions are not a sequence) ---- */
.faq-item.faqx-item summary { grid-template-columns: minmax(0, 1fr) 30px; gap: 18px; }
.faq-item.faqx-item .faq-answer { padding: 0 28px 28px; animation: faqx-open .35s ease both; }
.faq-item.faqx-item .faq-answer p { max-width: 70ch; }
.faq-item.faqx-item summary:hover b { color: var(--brand); }
.faq-item.faqx-item summary:focus-visible { outline: 3px solid rgba(198,0,61,.25); outline-offset: -3px; }
@keyframes faqx-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Bullet points ---- */
.faqx-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.faqx-points li {
	position: relative;
	padding: 14px 18px; padding-inline-start: 44px;
	background: var(--canvas);
	border-inline-start: 3px solid var(--brand);
	display: grid; gap: 3px;
}
.faqx-points li::before {
	content: "";
	position: absolute; top: 21px; inset-inline-start: 20px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--brand);
}
.faqx-points b { color: var(--ink); font-size: 14px; }
.faqx-points span { color: var(--muted); font-size: 14px; line-height: 1.85; }

/* ---- Numbered steps (a real sequence) ---- */
.faqx-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: faqx; display: grid; gap: 0; }
.faqx-steps li {
	position: relative;
	counter-increment: faqx;
	padding: 0 0 22px; padding-inline-start: 52px;
	display: grid; gap: 3px;
}
.faqx-steps li::before {
	content: counter(faqx);
	position: absolute; top: 0; inset-inline-start: 0;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--brand); color: #fff;
	font: 800 14px Arial, sans-serif;
	box-shadow: 0 8px 18px rgba(198,0,61,.28);
}
.faqx-steps li:not(:last-child)::after {
	content: "";
	position: absolute; top: 40px; bottom: 6px; inset-inline-start: 16px;
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--brand-soft) 0 5px, transparent 5px 10px);
}
.faqx-steps li:last-child { padding-bottom: 0; }
.faqx-steps b { padding-top: 5px; color: var(--ink); font-size: 14.5px; }
.faqx-steps span { color: var(--muted); font-size: 14px; line-height: 1.85; }

/* ---- Empty state ---- */
.faqx-empty {
	margin-top: 48px; padding: 48px 24px;
	display: grid; gap: 6px; text-align: center;
	background: #fff; border: 1px dashed var(--line);
}
.faqx-empty b { font-size: 17px; }
.faqx-empty span { color: var(--muted); font-size: 14px; }

/* ---- Responsive ---- */
@media (max-width: 680px) {
	.faqx-hero { padding-bottom: 48px; }
	.faqx-hero-copy { margin-top: 24px; }
	.faqx-hero-copy h1 { font-size: 34px; }
	.faqx-hero-copy > span { font-size: 15px; }
	.faqx-search input { min-height: 54px; }
	.faqx-section { padding-top: 32px; }
	.faqx-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.faqx-tabs::-webkit-scrollbar { display: none; }
	.faqx-tab { flex: 0 0 auto; padding: 10px 14px; font-size: 12.5px; }
	.faqx-group { margin-top: 36px; }
	.faq-item.faqx-item .faq-answer { padding: 0 20px 22px; }
}

/* ---- Dark mode ---- */
:root[data-theme="dark"] .faqx-hero { background: linear-gradient(180deg, #171013 0%, var(--canvas) 100%) !important; }
:root[data-theme="dark"] .faqx-hero::before { background-image: radial-gradient(rgba(255,92,129,.2) 1px, transparent 1px); }
:root[data-theme="dark"] .faqx-search input,
:root[data-theme="dark"] .faqx-tab,
:root[data-theme="dark"] .faqx-empty { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .faqx-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
:root[data-theme="dark"] .faqx-points li { background: var(--surface-2); }
:root[data-theme="dark"] .faqx-group-head h2 { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
	.faq-item.faqx-item .faq-answer { animation: none; }
	.faqx-tab { transition-duration: .01ms; }
}


/* ============================================================
   Home hero stat cards: animated "orb" icons
   (Clients / Databases / Journals) — same style as the globe
   ============================================================ */

/* 
.vstat-card.is-visible .vo { opacity: 1; transform: none; }
.vstat-card:hover .vo { transform: scale(1.1); box-shadow: 0 0 0 1px var(--brand), 0 10px 24px rgba(198,0,61,.5); }



.vstat-card:hover .vo-orbit-a { animation-duration: 2.2s; }
.vstat-card:hover .vo-flip { animation-duration: 1.8s; }
.vstat-card:hover .vo-top { animation-duration: 1.2s; } */



/* ============================================================
   Home hero stat cards: animated icons (no circles)
   Clients / Databases / Journals
   ============================================================ */
.vstat-chart-box.is-icon { width: 54px; height: 46px; }

.vi { display: block; width: 54px; height: 46px; overflow: visible; }
.vi * { transform-box: view-box; }
.vstat-card .vi { transition: transform .3s ease, filter .3s ease; }
.vstat-card:hover .vi { transform: scale(1.1); filter: drop-shadow(0 6px 10px rgba(198,0,61,.35)); }

/* ---------- CLIENTS ---------- */
.vi-p { opacity: 0; fill: var(--brand); }
.vi-p-side { fill: var(--brand); }
.vi-p-side circle, .vi-p-side path { opacity: .55; }

.vstat-card.is-visible .vi-p {
	animation:
		vi-pop .6s cubic-bezier(.34,1.56,.64,1) var(--d) both,
		vi-bob 3.2s ease-in-out calc(var(--d) + .9s) infinite;
}
.vstat-card.is-visible .vi-p-main { animation-name: vi-pop, vi-bob-main; }
@keyframes vi-pop { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes vi-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes vi-bob-main { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04); } }

.vi-link {
	fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round;
	stroke-dasharray: 2 3.2; opacity: 0;
}
.vstat-card.is-visible .vi-link { opacity: .7; animation: vi-flow 1.4s linear infinite; }
@keyframes vi-flow { to { stroke-dashoffset: -10.4; } }

.vi-base { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; opacity: .25; }

.vi-plus {
	fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round;
	transform-origin: 44px 9px; opacity: 0;
}
.vstat-card.is-visible .vi-plus { animation: vi-plus 2.4s ease-in-out 1s infinite; }
@keyframes vi-plus {
	0%,100% { opacity: .35; transform: scale(.8) rotate(0); }
	50% { opacity: 1; transform: scale(1.25) rotate(90deg); }
}

/* ---------- DATABASES ---------- */
.vi-db-stack { opacity: 0; }
.vstat-card.is-visible .vi-db-stack { animation: vi-rise-in .7s cubic-bezier(.34,1.4,.4,1) .1s both, vi-bob 3.4s ease-in-out 1s infinite; }
@keyframes vi-rise-in { from { opacity: 0; transform: translateY(12px) scaleY(.7); } to { opacity: 1; transform: none; } }

.vi-plate { fill: var(--brand-dark); stroke: var(--brand); stroke-width: .6; stroke-opacity: .5; }
.vi-top { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.2; }
.vstat-card.is-visible .vi-top { animation: vi-lit 2.4s ease-in-out infinite; }
.vi-top-1 { animation-delay: 0s; }
.vi-top-2 { animation-delay: .4s; }
.vi-top-3 { animation-delay: .8s; }
@keyframes vi-lit {
	0%, 100% { fill: var(--brand-soft); filter: none; }
	35% { fill: var(--brand); filter: drop-shadow(0 0 4px rgba(198,0,61,.85)); }
}

.vi-led { fill: #ffd54a; opacity: .3; }
.vstat-card.is-visible .vi-led { animation: vi-blink 1.6s ease-in-out infinite; }
.vi-led-2 { animation-delay: .3s !important; }
.vi-led-3 { animation-delay: .6s !important; }
@keyframes vi-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.vi-bit { fill: var(--brand); opacity: 0; }
.vstat-card.is-visible .vi-bit { animation: vi-up 2.6s ease-in infinite; }
.vi-bit-2 { animation-delay: .7s !important; }
.vi-bit-3 { animation-delay: 1.2s !important; }
.vi-bit-4 { animation-delay: 1.9s !important; }
@keyframes vi-up {
	0%   { opacity: 0; transform: translateY(0) rotate(0); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-30px) rotate(90deg); }
}

/* ---------- JOURNALS ---------- */
.vi-book-body { opacity: 0; transform-origin: 26px 26px; }
.vstat-card.is-visible .vi-book-body { animation: vi-rise-in .7s cubic-bezier(.34,1.4,.4,1) .1s both, vi-bob 3.8s ease-in-out 1s infinite; }

.vi-page { stroke: var(--brand); stroke-width: 1; stroke-linejoin: round; }
.vi-page-l { fill: var(--brand-soft); }
.vi-page-r { fill: #fff; }
.vi-lines { fill: none; stroke: var(--brand); stroke-width: 1.2; stroke-linecap: round; opacity: .5; }
.vstat-card.is-visible .vi-lines { animation: vi-lines 2.8s ease-in-out infinite; }
@keyframes vi-lines { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
.vi-mark { fill: var(--brand); }
.vi-spine { stroke: var(--brand-dark); stroke-width: 1.4; stroke-linecap: round; }

.vi-flip {
	fill: #fff; stroke: var(--brand); stroke-width: 1; stroke-linejoin: round;
	transform-origin: 26px 26px; opacity: 0;
}
.vstat-card.is-visible .vi-flip { animation: vi-flip 3.4s ease-in-out 1.2s infinite; }
@keyframes vi-flip {
	0%   { transform: scaleX(1);  opacity: 0; }
	8%   { transform: scaleX(1);  opacity: 1; }
	50%  { transform: scaleX(-1); opacity: 1; fill: var(--brand-soft); }
	62%  { transform: scaleX(-1); opacity: 0; }
	100% { transform: scaleX(-1); opacity: 0; }
}

.vi-spark { fill: var(--brand); opacity: 0; transform-box: fill-box; transform-origin: center; }
.vstat-card.is-visible .vi-spark { animation: vi-twinkle 2.2s ease-in-out infinite; }
.vi-spark-2 { animation-delay: .7s !important; }
.vi-spark-3 { animation-delay: 1.3s !important; }
@keyframes vi-twinkle {
	0%,100% { opacity: 0; transform: scale(.4) rotate(0); }
	50% { opacity: 1; transform: scale(1.2) rotate(45deg); filter: drop-shadow(0 0 3px rgba(198,0,61,.8)); }
}

/* faster on hover, like the globe */
.vstat-card:hover .vi-top { animation-duration: 1.2s; }
.vstat-card:hover .vi-flip { animation-duration: 1.8s; }
.vstat-card:hover .vi-link { animation-duration: .7s; }

/* ---------- dark mode ---------- */
:root[data-theme="dark"] .vi-page-r,
:root[data-theme="dark"] .vi-flip { fill: var(--surface-2); }
:root[data-theme="dark"] .vi-page-l { fill: var(--brand-soft); }
:root[data-theme="dark"] .vi-plate { fill: #5a1634; }

@media (prefers-reduced-motion: reduce) {
	.vi, .vi * { animation: none !important; transition-duration: .01ms !important; }
	.vi-p, .vi-db-stack, .vi-book-body { opacity: 1; }
	.vi-link { opacity: .7; }
}








/* Stat card labels: always one line, never taller than the other cards */
/* .vstat-top { gap: 8px; }
.vstat-top > span:first-child {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} */

/* Give the hero enough height for 4 stat cards so the last one isn't covered */
/* @media (min-width: 981px) {
	.hero-section,
	.hero-layout { min-height: 700px; }
} */





















/* ============ Home: compact countries globe ============ */
.hm-globe { padding: 20px 0 90px; background: #efe8ea; }
.hm-globe-card {
	position: relative; overflow: hidden; color: #fff;
	display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center;
	min-height: 440px;
	background: radial-gradient(900px 500px at 75% 50%, #4a0f27 0%, #25081a 45%, #0f0409 100%);
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 30px 80px rgba(37,8,26,.35);
}
.hm-globe-bg { position: absolute; inset: 0; pointer-events: none; }
.hm-globe-bg::before {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(closest-side at 70% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(closest-side at 70% 50%, #000 20%, transparent 100%);
}
.hm-globe-bg i { position: absolute; border-radius: 50%; filter: blur(80px); }
.hm-globe-bg i:nth-child(1) { width: 320px; height: 320px; top: -110px; inset-inline-start: -80px; background: rgba(255,92,129,.22); animation: hm-blob 16s ease-in-out infinite; }
.hm-globe-bg i:nth-child(2) { width: 280px; height: 280px; bottom: -120px; inset-inline-end: 10%; background: rgba(198,0,61,.32); animation: hm-blob 20s ease-in-out infinite reverse; }
@keyframes hm-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,22px) scale(1.12); } }

.hm-globe-copy { position: relative; z-index: 2; padding: 44px clamp(26px, 4vw, 56px); }
.hm-globe-eyebrow { margin: 0 0 14px; display: flex; align-items: center; gap: 12px; color: #ff9fb8; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.hm-globe-eyebrow span { width: 34px; height: 2px; background: #ff5c81; }
.hm-globe-copy h2 { margin: 0; max-width: 520px; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.hm-globe-lead { margin: 14px 0 0; max-width: 46ch; color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.85; }

.hm-globe-stats { margin-top: 24px; display: flex; gap: 12px; }
.hm-globe-stats div { padding: 12px 20px; min-width: 120px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-inline-start: 3px solid #ff5c81; backdrop-filter: blur(8px); }
.hm-globe-stats b { display: block; font: 800 28px/1.1 Arial, sans-serif; }
.hm-globe-stats span { color: rgba(255,255,255,.62); font-size: 11.5px; font-weight: 700; }

.hm-globe-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-globe-chips a {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px;
	border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
	font-size: 12.5px; font-weight: 700;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hm-globe-chips a em { padding: 2px 6px; background: rgba(255,255,255,.12); color: #ffd1de; font: 800 10px Arial, sans-serif; font-style: normal; }
.hm-globe-chips a:hover, .hm-globe-chips a:focus-visible { background: rgba(255,92,129,.2); border-color: rgba(255,92,129,.65); transform: translateY(-2px); }

.hm-globe-cta {
	margin-top: 26px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px;
	background: #fff; color: var(--brand-dark); font-size: 13px; font-weight: 800;
	transition: transform .2s ease, box-shadow .2s ease, gap .2s ease;
}
.hm-globe-cta:hover { transform: translateY(-3px); gap: 13px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
[dir="rtl"] .hm-globe-cta svg, [dir="rtl"] .hm-globe-cta:hover svg { transform: scaleX(-1); }

.hm-globe-stage { position: relative; z-index: 1; align-self: stretch; min-height: 440px; }
.hm-globe-stage canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: pan-y; }
.hm-globe-hint {
	position: absolute; bottom: 16px; inset-inline: 0; margin-inline: auto; width: max-content;
	padding: 7px 14px; display: flex; align-items: center; gap: 9px;
	background: rgba(18,5,11,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
	color: rgba(255,255,255,.78); font-size: 11.5px; font-weight: 700; pointer-events: none;
}
.hm-globe-hint i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c81; animation: hm-ping 1.8s ease-in-out infinite; }
@keyframes hm-ping { 0%,100% { box-shadow: 0 0 0 0 rgba(255,92,129,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,92,129,0); } }

@media (max-width: 980px) {
	.hm-globe { padding-bottom: 72px; }
	.hm-globe-card { grid-template-columns: 1fr; }
	.hm-globe-copy { padding: 34px 24px 6px; }
	.hm-globe-stage { min-height: 340px; }
}
@media (max-width: 680px) {
	.hm-globe-stats div { flex: 1; min-width: 0; }
	.hm-globe-cta { width: 100%; justify-content: center; }
	.hm-globe-stage { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-globe-bg i, .hm-globe-hint i { animation: none !important; }
}




/* home page design */

/* ============================================================
   HOME POLISH (hx-)  — additive, safe to remove
   ============================================================ */

/* ---- scroll progress ---- */
.hx-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 90; pointer-events: none; }
.hx-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--brand-dark), var(--brand), #ff8fa8); }
[dir="rtl"] .hx-progress span { transform-origin: right; }

/* ---- hero ---- */
/* .hero-section .hero-backdrop { animation: hero-image-enter .9s ease both, hx-kenburns 26s ease-in-out .9s infinite alternate; }
@keyframes hx-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.2%, -1%); } } */

.hero-copy > * { animation: hx-rise .9s cubic-bezier(.16,1,.3,1) both; }
.hero-copy > .eyebrow { animation-delay: .1s; }
.hero-copy > h1 { animation-delay: .2s; }
.hero-copy > span { animation-delay: .34s; }
.hero-copy > .hero-actions { animation-delay: .48s; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* .hero-section .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.hero-section .eyebrow::before { content: ""; width: 34px; height: 2px; background: #f5a7be; transform-origin: left; animation: hx-line .9s cubic-bezier(.16,1,.3,1) .5s both; }
[dir="rtl"] .hero-section .eyebrow::before { transform-origin: right; }
@keyframes hx-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } */

.hero-copy h1 em {
	/* background: linear-gradient(100deg, #ffc1d4 20%, #fff 45%, #ff8fa8 62%, #ffc1d4 82%); */
	background:#ffc1d4;
	background-size: 250% 100%;
	
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	/* animation: hx-shimmer 6s linear infinite; */
}
[dir="rtl"] .hero-copy h1 em {
	line-height:1.4;
}
@keyframes hx-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.hero-section .primary-action, .request-layout .primary-action { position: relative; }
/* .hero-section .primary-action::after, .request-layout .primary-action::after {
	content: ""; position: absolute; inset: -1px; border: 1px solid rgba(255,255,255,.75); pointer-events: none;
	animation: hx-ring 2.8s ease-out 1.2s infinite;
} */
@keyframes hx-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.14, 1.55); opacity: 0; } }
/* 
.hx-spark {
	position: absolute; z-index: 0; left: var(--x); top: var(--y);
	width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; opacity: 0;
	background: rgba(255,190,210,.85); box-shadow: 0 0 12px 2px rgba(255,120,160,.5);
	animation: hx-float var(--t) ease-in-out var(--d) infinite;
} */
@keyframes hx-float {
	0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
	20%  { opacity: .9; }
	100% { opacity: 0; transform: translate(var(--dx), -130px) scale(1.1); }
}

.hx-scroll {
	position: absolute; z-index: 2; left: 50%; bottom: 64px; transform: translateX(-50%);
	width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.55); border-radius: 14px;
	transition: border-color .2s ease;
}
.hx-scroll:hover { border-color: #fff; }
.hx-scroll i { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: hx-wheel 1.8s ease-in-out infinite; }
@keyframes hx-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---- section headings ---- */
.editorial-heading { position: relative; border-inline-start: 0; padding-inline-start: 0px; }
/* .editorial-heading::before {
	content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
	background: linear-gradient(var(--brand), var(--brand-dark)); transform-origin: top;
	transition: transform .9s cubic-bezier(.16,1,.3,1) .15s;
} */
/* .editorial-heading { position: relative; border-inline-start: 0; padding-inline-start: 27px; } */
/* .motion-enabled .editorial-heading::before { transform: scaleY(0); }
.motion-enabled .editorial-heading.is-visible::before { transform: scaleY(1); }
.motion-enabled .editorial-heading.is-visible .editorial-icon { animation: hx-pop .6s cubic-bezier(.34,1.56,.64,1) .3s both; }
@keyframes hx-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } } */
@media (max-width: 680px) { .editorial-heading { padding-inline-start: 17px; } }

/* ---- staggered reveal (added by JS, removed after it plays so hovers work) ---- */
/* .motion-enabled .hx-r { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .7s ease var(--rd, 0s), transform .7s cubic-bezier(.16,1,.3,1) var(--rd, 0s); }
.motion-enabled .hx-r.hx-in { opacity: 1; transform: none; } */

/* ---- journey cards ---- */
.journey-grid a::before {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--brand-dark), #ff8fa8);
	transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1);
}
/* [dir="rtl"] .journey-grid a::before { transform-origin: right; }
.journey-grid a:hover::before { transform: scaleX(1); background: #fff; } */
.journey-grid a svg { transition: transform .3s ease; }
.journey-grid a:hover svg { transform: translateX(-6px); }
[dir="ltr"] .journey-grid a:hover svg { transform: translateX(6px); }
.journey-grid a > span { display: inline-block; transition: transform .3s ease; }
.journey-grid a:hover > span { transform: translateY(-3px); }

/* ---- cursor spotlight (added by JS) ---- */
.hx-spot { position: relative; overflow: hidden; }
.hx-spot::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
	background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(198,0,61,.11), transparent 70%);
}
.hx-spot:hover::after { opacity: 1; }
#sectors .hx-spot::after { background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,140,170,.16), transparent 70%); }
:root[data-theme="dark"] .hx-spot::after { background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,92,129,.14), transparent 70%); }

/* ---- products ---- */
.product-panel-item, .product-preview-item { animation: hx-swap .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes hx-swap { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.product-selector > button.is-active > span { color: #fff; text-shadow: 0 0 12px rgba(255,159,184,.8); }
.product-interface::after {
	content: ""; position: absolute; inset: 34px 0 58px; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
	transform: translateX(-140%); 
	/* animation: hx-shine 6.5s ease-in-out 2s infinite; */
}
@keyframes hx-shine { 0%, 55% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }

/* ---- services ---- */
#services .service-card { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .3s ease; }
#services .service-card:hover { transform: translateY(-7px); border-color: #e3c3cd; box-shadow: 0 26px 55px rgba(47,15,27,.14); }
#services .service-body small { transition: transform .2s ease, border-color .2s ease, color .2s ease; }
#services .service-body small:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--brand); }

/* ---- proof ---- */
#sectors .proof-story > img { animation: hx-kenburns 30s ease-in-out infinite alternate; }
#sectors .sector-strip span { transition: transform .2s ease, color .2s ease; }
#sectors .sector-strip span:hover { transform: translateY(-2px); }

/* ---- final banner ---- */
.request-banner {
	position: relative; overflow: hidden;
	/* background: linear-gradient(120deg, #740023, #a0002f, #58001a, #740023); */
	background:#c10037;
	background-size: 300% 300%; ;
}
/* @keyframes hx-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.request-layout { position: relative; z-index: 1; }
.request-banner::before, .request-banner::after {
	content: ""; position: absolute; inset-inline-end: -140px; top: 50%; width: 380px; height: 380px; margin-top: -190px;
	border: 1px solid rgba(255,255,255,.22); border-radius: 50%; pointer-events: none;
	animation: hx-ringout 6s ease-out infinite;
}
.request-banner::after { animation-delay: 3s; }
@keyframes hx-ringout { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
 */

@media (max-width: 980px) { .hx-scroll { display: none; } }


@media (prefers-reduced-motion: reduce) {
	.hx-spark, .hx-scroll i, .hero-copy h1 em, .request-banner, .request-banner::before, .request-banner::after,
	.product-interface::after, .hero-section .primary-action::after, .request-layout .primary-action::after,
	.hero-section .hero-backdrop, #sectors .proof-story > img { animation: none !important; }
	.motion-enabled .hx-r { opacity: 1; transform: none; transition: none; }
	.hx-progress { display: none; }
}














/* ============================================================
   ABOUT PAGE REDESIGN (ab-)  — APPEND to the END of style.css
   ============================================================ */
.ab-page { overflow: hidden; }
.ab-page [data-ab] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease var(--d, 0s), transform .8s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
.ab-page [data-ab].is-visible { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.ab-hero { position: relative; padding-bottom: 150px; color: #fff; overflow: hidden; 
		  background: linear-gradient(135deg, #2c0716 0%, #57001f 46%, #8a0030 100%); 
		  /* background:#c10037; */
		 }
.ab-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.ab-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.ab-hero-bg i { position: absolute; border-radius: 50%; filter: blur(80px); }
.ab-hero-bg i:nth-child(1) { width: 420px; height: 420px; top: -150px; inset-inline-start: -100px; background: rgba(255,92,129,.3); animation: ab-blob 18s ease-in-out infinite; }
.ab-hero-bg i:nth-child(2) { width: 360px; height: 360px; bottom: -140px; inset-inline-end: 6%; background: rgba(255,255,255,.12); animation: ab-blob 22s ease-in-out infinite reverse; }
.ab-hero-bg i:nth-child(3) { width: 240px; height: 240px; top: 30%; inset-inline-end: 34%; background: rgba(198,0,61,.35); animation: ab-blob 15s ease-in-out infinite; }
@keyframes ab-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.14); } }
.ab-hero .site-shell { position: relative; z-index: 1; }
.ab-crumbs, .ab-crumbs em, .ab-crumbs b { color: rgba(255,255,255,.65); }
.ab-crumbs a:hover { color: #fff; }
.ab-hero-copy { max-width: 880px; padding-top: 40px; }
.ab-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #ffd1de; font-size: 12.5px; font-weight: 800; animation: ab-rise .6s ease both; }
/* .ab-badge i { width: 8px; height: 8px; border-radius: 50%; background: #ffd54a; animation: ab-ping 1.8s ease-in-out infinite; } */
@keyframes ab-ping { 0%,100% { box-shadow: 0 0 0 0 rgba(255,213,74,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,213,74,0); } }
.ab-hero h1 { margin: 24px 0 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; animation: ab-rise .8s cubic-bezier(.16,1,.3,1) .12s both; }
/* .ab-hero h1::after { content: ""; display: block; width: 70px; height: 4px; margin-top: 26px; background: #ff5c81; transform-origin: left; animation: ab-line .9s cubic-bezier(.16,1,.3,1) .6s both; } */
[dir="rtl"] .ab-hero h1::after { transform-origin: right; }
.ab-lead { max-width: 64ch; margin: 26px 0 0; color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.95; animation: ab-rise .8s cubic-bezier(.16,1,.3,1) .24s both; }
.ab-hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; animation: ab-rise .8s cubic-bezier(.16,1,.3,1) .36s both; }
@keyframes ab-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ab-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ab-btn { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, gap .2s ease; }
.ab-btn:hover { transform: translateY(-3px); gap: 13px; }
.ab-btn-light { background: #fff; color: var(--brand-dark); box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.ab-btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.ab-btn-ghost:hover { background: rgba(255,255,255,.16); }
[dir="rtl"] .ab-btn svg { transform: scaleX(-1); }

/* ---------- stats ---------- */
.ab-stats-wrap { position: relative; z-index: 2; margin-top: -70px; }
.ab-stats { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ab-stats article { padding: 32px 18px; text-align: center; border-inline-start: 1px solid var(--line); transition: background .25s ease; }
.ab-stats article:first-child { border-inline-start: 0; }
.ab-stats article:hover { background: var(--brand-soft); }
.ab-stats b { display: block; color: var(--brand); font: 800 clamp(30px, 3vw, 44px)/1.1 Arial, sans-serif; direction: ltr; }
.ab-stats b em { font-style: normal; }
.ab-stats article > span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5; }

/* ---------- shared heading ---------- */
.ab-head > p { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; color: var(--brand); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }
/* .ab-head > p::before { content: ""; width: 34px; height: 2px; background: var(--brand); } */
.ab-head h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.28; letter-spacing: -.02em; text-wrap: balance; }
.ab-head > span { display: block; margin-top: 18px; color: var(--muted); font-size: 15.5px; line-height: 1.95; text-wrap: pretty; }
.ab-center { max-width: 760px; margin-inline: auto; text-align: center; }
.ab-center > p { justify-content: center; }
.ab-on-dark > p { color: #ff9fb8; }
.ab-on-dark > p::before { background: #ff9fb8; }
.ab-on-dark h2 { color: #fff; }

.ab-ico { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--brand-soft); color: var(--brand); transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------- expertise ---------- */
.ab-expertise { padding: 100px 0 70px; }
.ab-expertise-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: start; }
.ab-pillars { display: grid; gap: 16px; }
.ab-pillar { display: flex; gap: 20px; padding: 26px 26px; background: var(--surface, #fff); border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); transition: opacity .8s ease var(--d), transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
/* .ab-pillar.is-visible:hover { transform: translateX(6px); box-shadow: 0 20px 45px rgba(47,15,27,.1); }
[dir="rtl"] .ab-pillar.is-visible:hover { transform: translateX(-6px); } */
.ab-pillar:hover .ab-ico { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.08); }
.ab-pillar h3 { margin: 2px 0 8px; font-size: 18px; }
.ab-pillar p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

/* ---------- services ---------- */
.ab-services { padding: 90px 0 100px; background: #efe8ea; }
.ab-svc-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ab-svc { position: relative; overflow: hidden; padding: 36px 30px 32px; background: var(--surface, #fff); border: 1px solid var(--line); transition: opacity .8s ease var(--d), transform .35s cubic-bezier(.16,1,.3,1),  }
/* .ab-svc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(198,0,61,.13), transparent 70%); }
.ab-svc::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brand-dark), var(--brand)); transform: scaleX(0); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.ab-svc:hover::before { opacity: 1; }
.ab-svc:hover::after { transform: scaleX(1); }
.ab-svc.is-visible:hover { transform: translateY(-8px); border-color: #e3c3cd; } */
.ab-svc:hover .ab-ico { background: var(--brand); color: #fff; transform: rotate(-6deg) scale(1.08); }
.ab-svc-no { position: absolute; top: 14px; inset-inline-end: 22px; color: rgba(198,0,61,.09); font: 800 56px/1 Arial, sans-serif; font-style: normal; }
.ab-svc .ab-ico { margin-bottom: 24px; position: relative; }
.ab-svc h3 { position: relative; margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
.ab-svc p { position: relative; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.9; }

/* ---------- goals (dark) ---------- */
.ab-goals { position: relative; padding: 100px 0; background: linear-gradient(160deg, #21161a 0%, #3a0a1e 100%); overflow: hidden; }
.ab-goals::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; }
.ab-goals-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.ab-goals .ab-head { position: sticky; top: 120px; }
.ab-goal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ab-goal-list li { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(6px); transition: opacity .8s ease var(--d), transform .3s ease, background .25s ease, border-color .25s ease; }
/* .ab-goal-list li.is-visible:hover { transform: translateX(8px); background: rgba(255,255,255,.1); border-color: rgba(255,92,129,.6); } */
/* [dir="rtl"] .ab-goal-list li.is-visible:hover { transform: translateX(-8px); } */
.ab-goal-list b { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; 
				 /* background: linear-gradient(135deg, var(--brand-dark), var(--brand));  */
				 background:#c10037;
				 color: #fff; font: 800 15px Arial, sans-serif; 
				 /* box-shadow: 0 10px 24px rgba(198,0,61,.4);  */
				}
.ab-goal-list span { color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.85; font-weight: 600; }

/* ---------- methodology ---------- */
.ab-method { padding: 100px 0; }
.ab-steps { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 24px; }
.ab-step { position: relative; padding: 0 12px; text-align: center; transition: opacity .8s ease var(--d), transform .8s cubic-bezier(.16,1,.3,1) var(--d); }
.ab-step:not(:nth-child(3n))::before { content: ""; position: absolute; top: 33px; inset-inline-start: calc(50% + 46px); width: calc(100% - 92px + 24px); height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 7px, transparent 7px 14px); opacity: .45; }
.ab-step-node { width: 68px; height: 68px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; 
			   /* background: linear-gradient(135deg, var(--brand-dark), var(--brand));  */
			   background:#c10037;
			   color: #fff; font: 800 22px Arial, sans-serif;  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.ab-step:hover .ab-step-node { transform: scale(1.12) rotate(-6deg); }
.ab-step h3 { margin: 0 0 8px; font-size: 18px; }
.ab-step p { margin: 0 auto; max-width: 28ch; color: var(--muted); font-size: 14px; line-height: 1.85; }

/* ---------- sectors ---------- */
.ab-sectors { padding: 90px 0; background: #efe8ea; }
.ab-sector-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-sector { display: flex; align-items: center; gap: 16px; padding: 24px 24px; background: var(--surface, #fff); border: 1px solid var(--line); transition: opacity .8s ease var(--d), transform .3s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.ab-sector b { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 800 13px Arial, sans-serif; transition: background .25s ease, color .25s ease; }
.ab-sector span { font-size: 16px; font-weight: 800; line-height: 1.4; }
.ab-sector.is-visible:hover { transform: translateY(-5px); background: var(--brand); border-color: var(--brand); color: #fff; }
.ab-sector:hover b { background: #fff; color: var(--brand); }

/* ---------- partners marquee ---------- */
.ab-partners { padding: 100px 0 90px; overflow: hidden; }
/* .ab-marquee { margin-top: 20px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ab-partners .ab-head + * , .ab-partners > .ab-marquee:first-of-type { margin-top: 46px; }
.ab-track { display: flex; gap: 16px; width: max-content; padding: 6px 0; animation: ab-scroll 55s linear infinite; }
.ab-track.is-rev { animation-direction: reverse; animation-duration: 65s; }
.ab-marquee:hover .ab-track { animation-play-state: paused; } */
.ab-chip { flex: 0 0 auto; padding: 16px 28px; background: var(--surface, #fff); border: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; font-weight: 800; white-space: nowrap; transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ab-chip:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(47,15,27,.1); }
/* @keyframes ab-scroll { to { transform: translateX(-50%); } } */


.ab-partner-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ab-chip {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 84px; padding: 18px 20px;
	background: var(--surface, #fff); border: 1px solid var(--line); border-top: 3px solid transparent;
	color: var(--ink-soft); font-size: 15px; font-weight: 800; line-height: 1.5;
	transition: opacity .8s ease var(--d, 0s), transform .3s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ab-chip.is-visible:hover { transform: translateY(-4px); color: var(--brand); border-top-color: var(--brand); box-shadow: 0 16px 34px rgba(47,15,27,.1); }

@media (max-width: 980px) { .ab-partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .ab-partner-grid { grid-template-columns: 1fr; } }




/* ---------- CTA ---------- */
.ab-cta { position: relative; padding: 90px 0; overflow: hidden; color: #fff; background: linear-gradient(120deg, #57001f 0%, #8a0030 60%, #c6003d 100%); }
.ab-cta-rings i { position: absolute; inset-inline-end: -120px; top: 50%; width: 380px; height: 380px; margin-top: -190px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: ab-ring 6s ease-out infinite; }
.ab-cta-rings i:nth-child(2) { animation-delay: 2s; }
.ab-cta-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes ab-ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.ab-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.ab-cta p { margin: 0 0 10px; color: #ffc1d4; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.ab-cta h2 { margin: 0; font-size: clamp(30px, 3vw, 46px); line-height: 1.25; }
.ab-cta-inner > div:first-child > span { display: block; max-width: 56ch; margin-top: 14px; color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.9; }
.ab-contact { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.ab-contact li { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 700; }
.ab-contact svg { color: #ffb3c8; }
.ab-contact a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.ab-stats { grid-template-columns: repeat(3, 1fr); }
	.ab-stats article:nth-child(4) { border-inline-start: 0; }
	.ab-stats article:nth-child(n+4) { border-top: 1px solid var(--line); }
	.ab-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
	.ab-expertise-grid, .ab-goals-grid { grid-template-columns: 1fr; gap: 44px; }
	.ab-goals .ab-head { position: static; }
	.ab-steps { grid-template-columns: repeat(2, 1fr); }
	.ab-step::before { display: none; }
	.ab-sector-grid { grid-template-columns: repeat(2, 1fr); }
	.ab-cta-inner { flex-direction: column; align-items: flex-start; gap: 30px; }
}
@media (max-width: 680px) {
	.ab-hero { padding-bottom: 120px; }
	.ab-hero-actions { flex-direction: column; }
	.ab-btn { width: 100%; }
	.ab-stats { grid-template-columns: repeat(2, 1fr); }
	.ab-stats article:nth-child(n) { border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); }
	.ab-stats article:nth-child(odd) { border-inline-start: 0; }
	.ab-stats article:nth-child(-n+2) { border-top: 0; }
	.ab-expertise, .ab-services, .ab-goals, .ab-method, .ab-sectors, .ab-partners { padding-top: 68px; padding-bottom: 68px; }
	.ab-svc-grid, .ab-steps, .ab-sector-grid { grid-template-columns: 1fr; }
	.ab-pillar { padding: 20px; }
	.ab-goal-list li { padding: 16px; gap: 14px; }
	.ab-cta { padding: 64px 0; }
}

/* ---------- dark mode ---------- */
:root[data-theme="dark"] .ab-services, :root[data-theme="dark"] .ab-sectors { background: var(--canvas); }
:root[data-theme="dark"] :is(.ab-stats, .ab-pillar, .ab-svc, .ab-sector, .ab-chip) { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .ab-sector.is-visible:hover { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .ab-stats article:hover { background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce) {
	.ab-page *, .ab-page *::before, .ab-page *::after { animation: none !important; transition-duration: .01ms !important; }
	.ab-page [data-ab] { opacity: 1 !important; transform: none !important; }
}








/* ===== Hero: new illustrated background ===== */
.hero-section .hero-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 0%;
}

.hero-shade {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(24,3,12,0) 0%, rgba(24,3,12,.15) 45%, rgba(24,3,12,.55) 100%);
}
[dir="ltr"] .hero-shade {
  background: linear-gradient(270deg, rgba(24,3,12,0) 0%, rgba(24,3,12,.15) 45%, rgba(24,3,12,.55) 100%);
}

@media (max-width: 980px) {
  .hero-backdrop { object-position: 70% center; }
  [dir="ltr"] .hero-backdrop { object-position: 30% center; }
}

@media (max-width: 680px) {
  .hero-backdrop,
  [dir="ltr"] .hero-backdrop { object-position: center top; }
  .hero-shade,
  [dir="ltr"] .hero-shade {
    background: linear-gradient(0deg, rgba(24,3,12,.92) 0%, rgba(24,3,12,.55) 45%, rgba(24,3,12,0) 75%);
  }
}

 

/* ===== Hero on phones: image as a banner above the text ===== */

@media (max-width: 680px) {
  .hero-section,
  .hero-section .hero-layout { min-height: 0 !important; }
  .hero-section { padding: 0; display: block; background: #2a0615; }
  .hero-section picture { display: block; position: relative; }
  .hero-section picture::after {           
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 110px;
    background: linear-gradient(180deg, rgba(42,6,21,0), #2a0615);
    pointer-events: none;
  }
  .hero-section .hero-backdrop {
    position: static !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: 340px !important;
    object-fit: cover;
    object-position: center 16% !important;
    animation: none;
  }

  .hero-shade { display: none !important; }

  
  /* .hero-section .hero-layout { margin-top: -50px; padding-bottom: 34px; position: relative; z-index: 2; } */
	.hero-section .hero-layout { margin-top: 0; padding-bottom: 34px; position: relative; z-index: 2; }
  /* .hero-section .hero-copy { padding-top: 0 !important; } */
	[dir] .hero-section .hero-copy { width: 77% !important; padding: 24px 0 0 !important; }
	[dir] .hero-section .hero-backdrop { -webkit-mask-image: none !important; mask-image: none !important; }
} 


.insight-feature img { object-position: center 30%; }
@media (max-width: 680px) {
  .insight-feature img { object-position: 52% 30%; }
}









/* ===== Why Mandumah: picture wrapper ===== */
.proof-story > picture {
  position: absolute;
  inset: 0;
  display: block;
}
.proof-story > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 680px) {
  .proof-story { display: block; min-height: 0 !important; background: #1b1115; }

  .proof-story > picture {
    position: relative;
    inset: auto;
    display: block;
  }
  .proof-story > picture > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
  }
  .proof-story-shade,
  html[dir="rtl"] .proof-story-shade { display: none; }

  .proof-copy { width: 100%; padding: 28px 24px 36px; }
}


.proof-story > picture {
  position: absolute;
  inset: 0;
  display: block;
}
.proof-story > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 680px) {
  .proof-story { display: block; min-height: 0 !important; background: #1b1115; }
  .proof-story > picture { position: relative; inset: auto; display: block; }
  .proof-story > picture > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .proof-story-shade,
  html[dir="rtl"] .proof-story-shade { display: none; }
  .proof-copy { width: 100%; padding: 28px 24px 36px; }
}

















/* =========================================================
   NEWS + TRAINING (inx-)
   ========================================================= */
.inx-section { padding: 98px 0; background: #fff; }
.inx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: stretch; }

/* ---- news column ---- */
.inx-newscol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.inx-bar-title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--ink); }
.inx-live { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: inx-ping 1.8s ease-in-out infinite; }
@keyframes inx-ping { 0%,100% { box-shadow: 0 0 0 0 rgba(198,0,61,.55); } 50% { box-shadow: 0 0 0 8px rgba(198,0,61,0); } }
.inx-all { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 13px; font-weight: 800; transition: gap .2s ease; }
.inx-all:hover { gap: 12px; }

.inx-news { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 20px; }

/* featured */
.inx-feature { position: relative; min-height: 480px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #21161a; }
.inx-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .8s ease; }
.inx-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29,8,16,.94) 0%, rgba(29,8,16,.55) 45%, rgba(29,8,16,0) 78%); }
.inx-feature:hover img { transform: scale(1.05); }
.inx-feature-body { position: relative; z-index: 1; padding: 30px 30px 28px; }
.inx-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.inx-chip { padding: 5px 12px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
.inx-meta time { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; }
.inx-feature h3 { margin: 0 0 12px; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.4; text-wrap: balance; }
.inx-feature p { margin: 0 0 18px; max-width: 60ch; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }
.inx-more { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; transition: gap .2s ease; }
.inx-feature:hover .inx-more { gap: 13px; }

/* side list */
.inx-list { display: flex; flex-direction: column; background: var(--canvas); border: 1px solid var(--line); }
.inx-item { flex: 1; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--line); transition: background .2s ease; }
.inx-item:first-child { border-top: 0; }
.inx-item:hover { background: #fff; }
.inx-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #ded5d8; }
.inx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.inx-item:hover .inx-thumb img { transform: scale(1.08); }
.inx-meta-sm { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; font-size: 11px; font-weight: 800; }
.inx-meta-sm span { color: var(--brand); }
.inx-meta-sm time { color: var(--muted); font-weight: 700; }
.inx-item h4 { margin: 0; font-size: 14.5px; line-height: 1.55; transition: color .2s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }
.inx-item:hover h4 { color: var(--brand); }

.inx-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 40px; background: var(--canvas); border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.inx-empty b { font-size: 20px; line-height: 1.5; }
.inx-empty span { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 800; font-size: 13px; }

/* ---- training box ---- */
.inx-training { position: relative; display: flex; flex-direction: column; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, #2c0716 0%, #57001f 55%, #740023 100%);
  box-shadow: 0 24px 55px rgba(87,0,31,.28); }
.inx-training::before { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -90px; bottom: -90px; border-radius: 50%; background: rgba(255,92,129,.22); filter: blur(60px); pointer-events: none; }
.inx-training-media { position: relative; height: 170px; overflow: hidden; }
.inx-training-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.inx-training:hover .inx-training-media img { transform: scale(1.06); }
.inx-training-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #4a0019 0%, rgba(74,0,25,0) 70%); }
.inx-training-badge { position: absolute; z-index: 2; inset-inline-start: 20px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.inx-training-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 18px 24px 22px; }
.inx-kicker { color: #ff9fb8; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.inx-training h3 { margin: 8px 0 0; font-size: 18.5px; line-height: 1.55; }
.inx-topics { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.inx-topics li { padding: 5px 11px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); font-size: 11.5px; font-weight: 700; }
.inx-train-btn { margin-top: 20px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--brand-dark); font-size: 13.5px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, gap .2s ease; }
.inx-train-btn:hover { transform: translateY(-3px); gap: 13px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.inx-support { margin-top: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.inx-training-body .inx-train-btn + .inx-support { margin-top: 22px; }
.inx-support > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); color: #ffb3c8; }
.inx-support b { display: block; font-size: 13px; }
.inx-support small { display: block; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.5; }
.inx-support > svg { color: #ffb3c8; transition: transform .2s ease; }
.inx-support:hover > svg { transform: translateX(-4px); }
[dir="ltr"] .inx-support:hover > svg { transform: translateX(4px); }

/* ---- responsive ---- */
@media (max-width: 1200px) {
  .inx-layout { grid-template-columns: 1fr; }
  .inx-training { display: grid; grid-template-columns: .8fr 1.2fr; }
  .inx-training-media { height: 100%; min-height: 260px; }
  .inx-training-media::after { background: linear-gradient(90deg, rgba(74,0,25,0) 60%, #4a0019 100%); }
  [dir="rtl"] .inx-training-media::after { background: linear-gradient(270deg, rgba(74,0,25,0) 60%, #4a0019 100%); }
  .inx-training-body { padding: 26px 28px; }
}
@media (max-width: 980px) {
  .inx-section { padding: 76px 0; }
  .inx-news { grid-template-columns: 1fr; }
  .inx-feature { min-height: 400px; }
}
@media (max-width: 680px) {
  .inx-training { display: flex; }
  .inx-training-media { height: 170px; min-height: 0; }
  .inx-training-media::after, [dir="rtl"] .inx-training-media::after { background: linear-gradient(0deg, #4a0019 0%, rgba(74,0,25,0) 70%); }
  .inx-feature { min-height: 360px; }
  .inx-feature-body { padding: 22px 20px; }
  .inx-item { grid-template-columns: 88px minmax(0, 1fr); padding: 14px; }
}

:root[data-theme="dark"] .inx-section { background: var(--canvas); }
:root[data-theme="dark"] .inx-list, :root[data-theme="dark"] .inx-empty { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .inx-item:hover { background: var(--surface-2); }
:root[data-theme="dark"] .inx-bar { border-color: var(--line); }



.svx-more {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  color: var(--ink); font-size: 13px; font-weight: 800;
  border-bottom: 1px solid var(--brand); padding-bottom: 2px;
  transition: gap .2s ease, color .2s ease;
}
.svx-more:hover { gap: 12px; color: var(--brand); }
[dir="rtl"] .svx-more svg { transform: scaleX(-1); }

/* =========================================================
   SERVICES — static cards (svx-)
   ========================================================= */
.svx-section { position: relative; padding: 98px 0 90px; background: linear-gradient(180deg, #f3ecee 0%, #efe8ea 100%); overflow: hidden; }
.svx-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(198,0,61,.12) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%); mask-image: linear-gradient(180deg, #000, transparent 65%);
}
.svx-section .site-shell { position: relative; }

.svx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.svx-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(47,15,27,.06);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .3s ease;
}
.svx-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
  transform: scaleX(.18); transform-origin: left; transition: transform .55s cubic-bezier(.16,1,.3,1);
}
[dir="rtl"] .svx-card::before { transform-origin: right; }
.svx-card:hover { transform: translateY(-8px); border-color: #e3c3cd; box-shadow: 0 28px 60px rgba(47,15,27,.15); }
.svx-card:hover::before { transform: scaleX(1); }

.svx-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #ded5d8; }
.svx-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease;     scale: 1.45;
    transform-origin: 25% 50%;}
.svx-card:hover .svx-media img { transform: scale(1.06); }
.svx-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(33,10,20,.72) 0%, rgba(33,10,20,0) 58%); }
.svx-num {
  position: absolute; z-index: 2; top: 16px; inset-inline-start: 16px;
  min-width: 46px; height: 46px; padding: 0 8px; display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--brand);
  font: 800 15px Arial, sans-serif; box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.svx-label {
  position: absolute; z-index: 2; inset-inline: 18px; bottom: 16px;
  color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  display: flex; align-items: center; gap: 10px;
}
.svx-label::before { content: ""; width: 26px; height: 2px; background: #ff8fa8; flex: 0 0 auto; }

.svx-body { flex: 1; display: flex; flex-direction: column; padding: 26px 26px 24px; }
.svx-body h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.45; letter-spacing: -.01em; }
.svx-body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.svx-tags { margin:5px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.svx-tags li {
  padding: 6px 12px; background: var(--canvas); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: 11.5px; font-weight: 700;
  transition: background .2s, border-color .2s, color .2s;
}
.svx-tags li:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.svx-link {
  margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between;
  color: var(--brand); font-size: 13.5px; font-weight: 800;
}
.svx-body ul + .svx-link { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.svx-link svg { transition: transform .25s ease; }
.svx-card:hover .svx-link svg { transform: translateX(-6px); }
[dir="ltr"] .svx-card:hover .svx-link svg { transform: translateX(6px); }

.svx-cta {
  margin-top: 28px; padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  background: linear-gradient(120deg, #57001f 0%, #8a0030 60%, #c6003d 100%); color: #fff;
  box-shadow: 0 22px 50px rgba(87,0,31,.28);
}
.svx-cta b { display: block; font-size: 19px; }
.svx-cta span { display: block; margin-top: 4px; color: rgba(255,255,255,.75); font-size: 13.5px; }
.svx-cta .primary-action { flex: 0 0 auto; background: #fff; border-color: #fff; color: var(--brand-dark); }

@media (max-width: 1100px) { .svx-grid { gap: 18px; } .svx-body { padding: 22px 20px; } }
@media (max-width: 980px) {
  .svx-section { padding: 76px 0; }
  .svx-grid { grid-template-columns: 1fr; }
  .svx-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .svx-media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 680px) {
  .svx-card { display: flex; }
  .svx-media { aspect-ratio: 16 / 10; }
  .svx-cta { flex-direction: column; align-items: stretch; text-align: start; padding: 24px 20px; }
  .svx-cta .primary-action { width: 100%; }
}

:root[data-theme="dark"] .svx-section { background: var(--canvas); }
:root[data-theme="dark"] .svx-card { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .svx-tags li { background: var(--surface-2); border-color: var(--line); }


/* =========================================================
   HERO v2  (append at END of style.css, replaces earlier hero fixes)
   ========================================================= */
.hero-section {
 /* --hero-img-w: 55%;     width of the picture box (desktop)  */
  /* --hero-edge: 24%;           oft fade on the side facing the text */ 
  --hero-edge: 0%;
  /* --hero-bg: linear-gradient(135deg, #2a0615 0%, #4a0020 55%, #6d0029 100%); */
--hero-bg: radial-gradient(circle at 72% 50%, #7a0a35 0%, #4a0020 38%, #1f0410 100%);
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--hero-bg);
}
[dir="ltr"] .hero-section { --hero-pos: right center; }   /* person on the right in English */
/* [dir="rtl"] .hero-section { --hero-pos: left center; }     */
[dir="rtl"] .hero-section { --hero-pos: left center; --hero-bg: radial-gradient(circle at 28% 50%, #7a0a35 0%, #4a0020 38%, #1f0410 100%); }
/* person on the left in Arabic  */
/* .hero-section .hero-shade { display: none !important; } */
/* .hero-section .hero-shade { background: rgba(42, 6, 21, .6); } */

/* ---------- Desktop + tablet: text one side, person other side ---------- */
@media (min-width: 761px) {
  /* .hero-section { min-height: clamp(540px, 40vw, 740px); } */

  .hero-section .hero-backdrop {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    /* width: var(--hero-img-w) !important; */
	width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: var(--hero-pos);
    animation: none;
  }
  [dir="ltr"] .hero-section .hero-backdrop {
    right: 0 !important; left: auto !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-edge));
            mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-edge));
  }
  [dir="rtl"] .hero-section .hero-backdrop {
    left: 0 !important; right: auto !important;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hero-edge));
            mask-image: linear-gradient(to left, transparent 0, #000 var(--hero-edge));
  }

  .hero-section .hero-layout {
    position: relative; z-index: 2;
    min-height: inherit;
    display: flex; flex-direction: row;
    align-items: center; justify-content: flex-start;
    padding: 0;
  }
  .hero-section .hero-copy {
    width: min(620px, 45%) !important;    
    /* padding: clamp(40px, 5vw, 72px) 0 clamp(70px, 8vw, 110px) !important; */
  }
  .hero-section .hero-copy h1 { font-size: clamp(28px, 3.8vw, 58px) !important; line-height: 1.12; }
  [dir="ltr"] .hero-section .hero-copy h1 { font-size: clamp(28px, 2.7vw, 48px) !important; }
  .hero-section .hero-copy > span { margin-top: clamp(18px, 1.4vw, 36px); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.8; }
  .hero-section .hero-actions { margin-top: clamp(20px, 2.4vw, 34px); gap: clamp(14px, 2vw, 24px); flex-wrap: wrap; }
}


/* ---------- Phones: side by side (text one side, person other side) ---------- */
@media (max-width: 760px) {
  .hero-section {
    /* --hero-m-w: 55vw; */
	--hero-m-w: 100vw;
    --hero-m-pos: 75% center;          /* English: where the person sits in the crop */
    display: block !important;
    position: relative;
    min-height: 0 !important;
    /* background: linear-gradient(135deg, #2a0615 0%, #4a0020 55%, #6d0029 100%); */
	background: var(--hero-bg);
  }
  [dir="rtl"] .hero-section { --hero-m-pos: 12% center; }   /* Arabic */

  /* picture column */
  .hero-section .hero-backdrop {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important;
    width: var(--hero-m-w) !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: var(--hero-m-pos) !important;
    animation: none;
  }
  [dir="ltr"] .hero-section .hero-backdrop {
    right: 0 !important; left: auto !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%) !important;
            mask-image: linear-gradient(to right, transparent 0, #000 30%) !important;
  }
  [dir="rtl"] .hero-section .hero-backdrop {
    left: 0 !important; right: auto !important;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 30%) !important;
            mask-image: linear-gradient(to left, transparent 0, #000 30%) !important;
  }

  /* text column: always stays on its own side */
  .hero-section .hero-layout {
    position: relative; z-index: 2;
    display: block !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  .hero-section .hero-copy {
    width: calc(60vw - 28px) !important;
    padding: 32px 0 48px !important;
  }
  .hero-section .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
  .hero-section .hero-copy h1 { font-size: clamp(17px, 5.2vw, 26px) !important; line-height: 1.18; letter-spacing: -.02em; }
  .hero-section .hero-copy > span { margin-top: 14px; font-size: 11px; line-height: 1.7; }
  .hero-section .hero-actions { margin-top: 18px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-section .hero-actions .primary-action { width: 100%; min-height: 40px; padding: 0 10px; font-size: 12px; }
  .hero-section .hero-actions .text-action { align-self: flex-start; padding-top: 0; font-size: 11.5px; }

  .journey-section { margin-top: -18px; }
}

/* very small phones: a bit more room for the text */
@media (max-width: 380px) {
  .hero-section { --hero-m-w: 60vw; }
  .hero-section .hero-copy { width: calc(64vw - 28px) !important; }
  .hero-section .hero-copy h1 { font-size: 17px !important; }
  .hero-section .hero-copy > span { font-size: 10.5px; }
}




/* ---------- Arabic phones: more room between text and picture ---------- */
@media (max-width: 760px) {
  [dir="rtl"] .hero-section {
    --hero-m-w: 55vw;
    --hero-m-pos: 25% center;          /* keep the person at the far-left of the crop */
  }
  [dir="rtl"] .hero-section .hero-backdrop {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 22%) !important;
            mask-image: linear-gradient(to left, transparent 0, #000 22%) !important;
  }
  [dir="rtl"] .hero-section .hero-copy {
    width: calc(66vw - 20px) !important;
    padding: 28px 0 44px 14px !important;   /* 14px gap on the picture side */
  }
  [dir="rtl"] .hero-section .hero-copy h1 {
    font-size: clamp(16px, 4.8vw, 24px) !important;
    line-height: 1.3;
  }
  [dir="rtl"] .hero-section .hero-copy > span {
    font-size: 10.5px;
    line-height: 1.75;
  }
  [dir="rtl"] .hero-section .hero-actions .primary-action {
    font-size: 11.5px;
    min-height: 38px;
  }
}


/* =========================================================
   NEWS + TRAINING — simple 2 blocks (nx-)
   ========================================================= */
.nx-section { padding: 90px 0; background: #fff; }
.nx-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }

/* ---------- News block ---------- */
.nx-news { display: flex; flex-direction: column; min-width: 0; }
.nx-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nx-head h3 { margin: 0; font-size: 19px; }
.nx-all { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-size: 13px; font-weight: 800; transition: gap .2s ease; }
.nx-all:hover { gap: 12px; }

.nx-news-grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nx-item {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.nx-item:hover { transform: translateY(-5px); border-color: #e3c3cd; box-shadow: 0 20px 44px rgba(47,15,27,.1); }
.nx-item-img { aspect-ratio: 16 / 10; overflow: hidden; background: #ded5d8; }
.nx-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nx-item:hover .nx-item-img img { transform: scale(1.06); }
.nx-item-body { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 20px; }
.nx-item-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; font-size: 11px; font-weight: 800; }
.nx-item-meta span { color: var(--brand); }
.nx-item-meta time { color: var(--muted); font-weight: 700; }
.nx-item h4 { margin: 0; font-size: 15.5px; line-height: 1.6; transition: color .2s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 3; }
.nx-item:hover h4 { color: var(--brand); }
.nx-item-more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 12px; transition: gap .2s ease; }
.nx-item:hover .nx-item-more { gap: 10px; }

.nx-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 36px; background: var(--canvas); border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.nx-empty b { font-size: 19px; line-height: 1.5; }
.nx-empty span { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 800; font-size: 13px; }

/* ---------- Training block ---------- */
.nx-train {
  display: flex; flex-direction: column; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, #2c0716 0%, #57001f 60%, #740023 100%);
  box-shadow: 0 22px 50px rgba(87,0,31,.25);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.nx-train:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(87,0,31,.35); }
.nx-train-img { flex: 1; min-height: 210px; overflow: hidden; position: relative; }
/* .nx-train-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } */
.nx-train-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; scale: 1.45; transform-origin: 25% 50%; }
/* .nx-train-img img { display: block; width: 100%; height: auto; transition: transform .7s ease; } */
.nx-train:hover .nx-train-img img { transform: scale(1.06); }
.nx-train-img::after { content: ""; position: absolute; inset: 0; 
					  /* background: linear-gradient(0deg, #4a0019 0%, rgba(74,0,25,0) 55%); */
					 }
.nx-train-body { padding: 4px 26px 26px; }
.nx-train-kicker { display: inline-block; margin-bottom: 10px; color: #ff9fb8; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.nx-train h3 { margin: 0; font-size: 19px; line-height: 1.6; }
.nx-train-btn { margin-top: 20px; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; background: #fff; color: var(--brand-dark); font-size: 13.5px; font-weight: 800; transition: gap .2s ease; }
.nx-train:hover .nx-train-btn { gap: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nx-layout { grid-template-columns: 1fr; }
  .nx-train { display: grid; grid-template-columns: 1fr 1fr; }
  .nx-train-img { min-height: 240px; }
  /* .nx-train-img::after { background: linear-gradient(90deg, rgba(74,0,25,0) 55%, #4a0019 100%); } */
  /* [dir="rtl"] .nx-train-img::after { background: linear-gradient(270deg, rgba(74,0,25,0) 55%, #4a0019 100%); } */
  .nx-train-body { align-self: center; padding: 26px; }
}
@media (max-width: 760px) {
  .nx-section { padding: 68px 0; }
  .nx-news-grid { grid-template-columns: 1fr; gap: 14px; }
  .nx-item { flex-direction: row; }
  .nx-item-img { flex: 0 0 120px; aspect-ratio: auto; }
  .nx-item-body { padding: 14px 16px; }
  .nx-item h4 { font-size: 14.5px; -webkit-line-clamp: 2; line-clamp: 2; }
  .nx-item-more { display: none; }
  .nx-train { display: flex; }
  .nx-train-img { min-height: 190px; }
  /* .nx-train-img::after, [dir="rtl"] .nx-train-img::after { background: linear-gradient(0deg, #4a0019 0%, rgba(74,0,25,0) 55%); } */
  .nx-train-body { padding: 4px 22px 24px; }
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] .nx-section { background: var(--canvas); }
:root[data-theme="dark"] .nx-item { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .nx-head { border-color: var(--line); }
:root[data-theme="dark"] .nx-empty { background: var(--surface); border-color: var(--line); }




/* =========================================================
   SERVICES (svx) — MOBILE FIX  (append at END of style.css)
   ========================================================= */

/* image can never control the card height again */
.svx-media { position: relative; flex: 0 0 auto; overflow: hidden; }
.svx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* text body always visible */
.svx-body { flex: 1 1 auto; min-height: 0; color: var(--ink); }
.svx-body h3 { color: var(--ink); }
.svx-body p  { color: var(--muted); }

/* ---------- Tablet + phone: one card per row, image on top ---------- */
@media (max-width: 1100px) {
  .svx-grid { gap: 18px; }
}
@media (max-width: 980px) {
  .svx-section { padding: 76px 0; }
  .svx-grid { grid-template-columns: 1fr; }
  .svx-card { display: flex; flex-direction: column; }
  .svx-media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
  .svx-body { padding: 24px 24px 22px; }
}

/* ---------- Tablet only: image beside text ---------- */
@media (min-width: 681px) and (max-width: 980px) {
  .svx-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .svx-media { aspect-ratio: auto; min-height: 280px; height: 100%; }
}

/* ---------- Phone ---------- */
@media (max-width: 680px) {
  .svx-section { padding: 60px 0; }
  .svx-card { display: flex; flex-direction: column; }
  .svx-media { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
  .svx-num { top: 12px; inset-inline-start: 12px; min-width: 38px; height: 38px; font-size: 13px; }
  .svx-label { inset-inline: 14px; bottom: 12px; font-size: 11.5px; }
  .svx-body { padding: 20px 18px 20px; }
  .svx-body h3 { font-size: 19px; line-height: 1.5; }
  .svx-body p { font-size: 13.5px; line-height: 1.85; }
  .svx-tags li { font-size: 11px; padding: 5px 10px; }
  .svx-link { font-size: 13px; }
  .svx-cta { flex-direction: column; align-items: stretch; padding: 22px 18px; gap: 18px; }
  .svx-cta .primary-action { width: 100%; }
}

/* ============ Service type dropdown ============ */
.svc-dd { position: relative; }
.svc-dd-label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }

.svc-dd-trigger {
	width: 100%; min-height: 62px; padding: 10px 16px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	text-align: start; cursor: pointer;
	background: #fff; border: 1px solid #d7ccd0; border-inline-start: 3px solid var(--brand);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.svc-dd-trigger:hover { border-color: var(--brand); }
.svc-dd.is-open .svc-dd-trigger,
.svc-dd-trigger:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(198,0,61,.09); outline: 0; }

.svc-dd-trigger-text { display: grid; gap: 1px; min-width: 0; }
.svc-dd-trigger-text b { font-size: 14.5px; color: var(--ink); }
.svc-dd-trigger-text small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }

.svc-dd-chevron {
	flex: 0 0 auto; width: 32px; height: 32px; padding: 7px;
	border-radius: 50%; background: var(--brand-soft); color: var(--brand);
	transition: transform .3s ease, background .2s ease, color .2s ease;
}
.svc-dd.is-open .svc-dd-chevron { transform: rotate(180deg); background: var(--brand); color: #fff; }

.svc-dd-menu {
	position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px);
	padding: 6px; display: grid; gap: 2px;
	background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand);
	box-shadow: 0 24px 60px rgba(50,14,28,.18);
	animation: svc-dd-in .22s cubic-bezier(.16,1,.3,1) both;
}
.svc-dd-menu[hidden] { display: none; }
@keyframes svc-dd-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.svc-dd-menu .service-btn {
	width: 100%; padding: 12px 14px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	text-align: start; cursor: pointer;
	background: transparent; border: 0; border-inline-start: 3px solid transparent;
	color: var(--ink);
	transition: background .15s ease, border-color .15s ease, padding-inline-start .2s ease;
}
.svc-dd-menu .service-btn:hover,
.svc-dd-menu .service-btn:focus-visible { background: #fbf4f6; border-inline-start-color: var(--brand); padding-inline-start: 18px; outline: 0; }
.svc-dd-opt-text { display: grid; gap: 1px; }
.svc-dd-opt-text b { font-size: 13.5px; }
.svc-dd-opt-text small { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.svc-dd-check { flex: 0 0 auto; color: var(--brand); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.svc-dd-menu .service-btn.is-selected { background: var(--brand-soft); border-inline-start-color: var(--brand); }
.svc-dd-menu .service-btn.is-selected .svc-dd-check { opacity: 1; transform: scale(1); }

/* dark mode */
:root[data-theme="dark"] .svc-dd-trigger,
:root[data-theme="dark"] .svc-dd-menu { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .svc-dd-menu { border-top-color: var(--brand); }
:root[data-theme="dark"] .svc-dd-trigger { border-inline-start-color: var(--brand); }
:root[data-theme="dark"] .svc-dd-menu .service-btn:hover { background: var(--surface); }
:root[data-theme="dark"] .svc-dd-menu .service-btn.is-selected { background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce) { .svc-dd-menu { animation: none; } }


/* ============ Request type cards (card wrapper + dropdown inside) ============ */
.path-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #d7ccd0;
	background: #fbf9f9;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.path-item:hover { border-color: #b99da7; background: #fff; transform: translateY(-2px); }
.path-item:has(.path-btn.is-selected) {
	border-color: var(--brand);
	background: #fff6f8;
	box-shadow: inset 0 -3px var(--brand);
	transform: none;
}

.path-item .path-btn {
	flex: 1;
	width: 100%;
	min-height: 130px;
	padding: 20px;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 13px;
	align-items: start;
	text-align: start;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.path-item .path-btn > svg { color: var(--brand); }
.path-item .path-btn > span { display: grid; gap: 5px; }
.path-item .path-btn b { font-size: 17px; }
.path-item .path-btn small { color: var(--muted); font-size: 11px; line-height: 1.6; }
.path-item .path-btn:focus-visible { outline: 3px solid rgba(198,0,61,.22); outline-offset: -3px; }


.path-item .svc-dd {
	position: relative;
	margin: 0 20px 24px;
}
.path-item .svc-dd-trigger { background: #fff; }


:root[data-theme="dark"] .path-item { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .path-item:hover { background: var(--surface); }
:root[data-theme="dark"] .path-item:has(.path-btn.is-selected) { background: var(--brand-soft); border-color: var(--brand); }
:root[data-theme="dark"] .path-item .svc-dd-trigger { background: var(--surface); }


.path-item:not(:has(.path-btn.is-selected)) .svc-dd-trigger { opacity: .65; }
.path-item:not(:has(.path-btn.is-selected)) .svc-dd-trigger:hover { opacity: 1; }
.path-item .svc-dd-trigger { transition: opacity .2s ease, border-color .2s ease, box-shadow .2s ease; }

.path-selector { align-items: start; }
@media (max-width: 980px) {
	.header-publish-link {
		display: none !important;
	}
}


/* ============ Service type selector (Consulting / Cataloging / OCR) ============ */
.service-type-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.service-type-selector .service-btn {
	position: relative;
	min-height: 96px;
	padding: 18px 18px 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: start;
	cursor: pointer;
	border: 1px solid #d7ccd0;
	background: #fbf9f9;
	color: var(--ink);
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service-type-selector .service-btn b { font-size: 15px; line-height: 1.4; }
.service-type-selector .service-btn span { color: var(--muted); font-size: 11.5px; line-height: 1.65; }

.service-type-selector .service-btn:hover {
	transform: translateY(-2px);
	border-color: #b99da7;
	background: #fff;
}
.service-type-selector .service-btn.is-selected {
	border-color: var(--brand);
	background: #fff6f8;
	box-shadow: inset 0 -3px var(--brand);
}
.service-type-selector .service-btn.is-selected b { color: var(--brand); }
.service-type-selector .service-btn:focus-visible { outline: 3px solid rgba(198,0,61,.22); outline-offset: 3px; }

@media (max-width: 980px) {
	.service-type-selector { grid-template-columns: 1fr; }
	.service-type-selector .service-btn { min-height: 0; }
}

/* dark mode */
:root[data-theme="dark"] .service-type-selector button.service-btn {
	background: var(--surface-2);
	border-color: var(--line);
	color: var(--ink);
}
:root[data-theme="dark"] .service-type-selector button.service-btn span { color: var(--muted); }
:root[data-theme="dark"] .service-type-selector button.service-btn.is-selected {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--ink);
}
:root[data-theme="dark"] .service-type-selector button.service-btn.is-selected b { color: var(--brand); }

/* 
.leadership-list article .leader-name {
	display: block;
	margin-block: 14px 4px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.leadership-list article .leader-name + h3 {
	margin-top: 0;
	font-size: 0.95rem;
	font-weight: 500;
	opacity: 0.75;
} */
.leadership-list article .leader-name {
	display: block;
	padding: 14px 16px 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.leadership-list article .leader-name + h3 {
	margin-top: 4px;
	font-size: 0.95rem;
	font-weight: 500;
	opacity: 0.75;
}



/* Request banner */
.request-banner { padding: 76px 0; background: #740023; color: #fff; }
.request-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.request-layout p { color: #f1a2ba; font-size:17px; }
.request-layout h2 { margin: 0; font-size: clamp(34px, 3.4vw, 47px); line-height: 1.25; }
.request-layout > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.request-layout > div:last-child > span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.76); font-size: 11px; }
.request-layout .primary-action { width: 100%; margin-top: 13px; background: #fff; border-color: #fff; color: var(--brand-dark); }
.request-form .primary-action:focus-visible, .secondary-action:focus-visible, .path-selector button:focus-visible, .service-type-selector button:focus-visible { outline: 3px solid rgba(198,0,61,.22); outline-offset: 3px; }

/* ---- final banner ---- */
.request-banner {
	position: relative; overflow: hidden;
	background:#c10037;
}

.proof-story-shade {
    background: linear-gradient(90deg, #190c1114 0%, #1c091140 43%, #2d0717ed 72%, #250813fc 100%);
}

/* .proof-story-shade {
    background: linear-gradient(270deg, #190c1114 0%, #1c091140 43%, #2d0717ed 72%, #250813fc 100%);
} */

html[lang="en"] .proof-story-shade {
    background: linear-gradient(270deg, #190c1114 0%, #1c091140 43%, #2d0717ed 72%, #250813fc 100%);
}


.hero-section {
	position: relative;
	overflow: hidden;
}

.hero-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-shade {
	position: absolute;
	inset: 0;
}

.hero-layout {
	position: relative; /* keeps the text above the image and shade */
}








/* ===== Hero on phones: full background image with text on top (EN + AR) ===== */
@media (max-width: 760px) {
  html[dir] .hero-section {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #2a0615 !important;
  }

  /* image: fills the whole hero, behind the text */
  html[dir] .hero-section .hero-backdrop {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* light overlay only so the white text stays readable (set 0 to remove) */
  html[dir] .hero-section .hero-shade {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(42, 6, 21, .45) !important;
  }

  /* text: on top of the image, full width */
  html[dir] .hero-section .hero-layout {
    position: relative !important;
    z-index: 2;
    display: block !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  html[dir] .hero-section .hero-copy {
    width: 70% !important;
    padding: 40px 0 48px !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  }
  html[dir] .hero-section .hero-copy h1 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.25;
  }
  html[dir] .hero-section .hero-copy > span {
    font-size: 13px;
    line-height: 1.8;
  }
  html[dir] .hero-section .eyebrow { font-size: 12px; }
  html[dir] .hero-section .hero-actions { flex-direction: column; align-items: stretch; }
  html[dir] .hero-section .hero-actions .primary-action { width: 100%; min-height: 44px; font-size: 14px; }
  html[dir] .hero-section .hero-actions .text-action { align-self: flex-start; font-size: 13px; }
}


@media (max-width: 680px){
	.request-banner { padding: 56px 0; }
.request-layout { grid-template-columns: 1fr; gap: 28px; }
}



@media (max-width: 680px) {

    html[lang="ar"] .proof-story > img {
        object-position: 9% center;
    }
}

html[lang="en"] .hero-copy {
    width: min(610px, 52%);
    padding: 50px 0 84px;
}
.phone-field{display:grid;gap:8px}


/* Keep header buttons + language switch in light-mode colors when dark theme is on */
:root[data-theme="dark"] :is(.primary-action, .publish-action header-publish-link, .lang-selector mobile-lang-selector, .submit, .header-action-group, .is-active, .sticky-cta,  .editorial-icon, .journey-grid:hover, .journey-intro, .product-search) {
  --brand: #c10037;
  --brand-dark: #700021;
  --brand-soft: #f5dfe6;
  --ink: #1c1719;
  --ink-soft: #51484c;
  --muted: #71676b;
  --warm: #f0e9eb;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: #ded4d7;
}












/* ==========================================================================
   Product detail pages - extended sections  (databases / ai / kashaf)
   Add at the END of your main stylesheet. All class names start with .pdx-
   so nothing existing is touched. Flat design: borders and tints only,
   there is no box-shadow anywhere in this file.
   Uses your existing variables (--brand, --brand-dark, --canvas, --line,
   --ink, --ink-soft, --muted); the fallbacks only apply if one is missing.
   ========================================================================== */

.pdx-stats, .pdx-intro, .pdx-features, .pdx-caps,
.pdx-steps, .pdx-split, .pdx-faq, .pdx-cta {
	--pdx-brand: var(--brand, #c6003d);
	--pdx-brand-dark: var(--brand-dark, #710022);
	--pdx-tint: rgba(198, 0, 61, .07);
	--pdx-canvas: var(--canvas, #f7f3f4);
	--pdx-line: var(--line, #e6dce0);
	--pdx-line-strong: #d6c4cb;
	--pdx-ink: var(--ink, #2a1620);
	--pdx-ink-soft: var(--ink-soft, #4a3640);
	--pdx-muted: var(--muted, #6d5d64);
}
.pdx-stats *, .pdx-intro *, .pdx-features *, .pdx-caps *,
.pdx-steps *, .pdx-split *, .pdx-faq *, .pdx-cta * {
	box-sizing: border-box;
	box-shadow: none;
}

/* ---------- Shared section heading ---------- */
.pdx-head { max-width: 720px; margin: 0 0 44px; }
.pdx-head.is-center { margin-inline: auto; text-align: center; }
.pdx-head h2 { margin: 0; color: var(--pdx-ink); font-size: clamp(28px, 2.7vw, 40px); line-height: 1.35; text-wrap: balance; }
.pdx-head p { margin: 12px 0 0; color: var(--pdx-muted); font-size: 15.5px; line-height: 1.9; text-wrap: pretty; }

/* ---------- 1. Key figures ---------- */
.pdx-stats { background: #fff; border-bottom: 1px solid var(--pdx-line); }
.pdx-stats-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.pdx-stat { padding: 36px 28px; border-inline-start: 1px solid var(--pdx-line); }
.pdx-stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.pdx-stat-num { display: block; color: var(--pdx-brand); font-size: clamp(34px, 3.6vw, 50px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pdx-stat-label { display: block; max-width: 26ch; margin-top: 10px; color: var(--pdx-muted); font-size: 14px; line-height: 1.7; }

/* ---------- 2. Overview + at a glance ---------- */
.pdx-intro { padding: 88px 0 84px; background: #fff; }
.pdx-intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: start; }
.pdx-intro-grid.is-single { grid-template-columns: minmax(0, 820px); }
.pdx-intro-copy h2 { margin: 0 0 24px; color: var(--pdx-ink); font-size: clamp(28px, 2.7vw, 40px); line-height: 1.35; text-wrap: balance; }
.pdx-prose { max-width: 68ch; margin: 0 0 16px; color: var(--pdx-muted); font-size: 15.5px; line-height: 2; text-wrap: pretty; }
.pdx-prose.pdx-lead { color: var(--pdx-ink-soft); font-size: 17px; }

.pdx-facts { padding: 26px 28px 10px; background: var(--pdx-canvas); border: 1px solid var(--pdx-line); border-top: 3px solid var(--pdx-brand); }
.pdx-facts-title { display: block; margin-bottom: 8px; color: var(--pdx-brand-dark); font-size: 14px; font-weight: 800; }
.pdx-facts dl { margin: 0; }
.pdx-facts dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 15px 0; border-top: 1px solid var(--pdx-line); }
.pdx-facts dt { color: var(--pdx-muted); font-size: 13px; font-weight: 700; line-height: 1.7; }
.pdx-facts dd { margin: 0; color: var(--pdx-ink); font-size: 14.5px; font-weight: 600; line-height: 1.75; }

/* ---------- 3. Features / databases ---------- */
.pdx-features { padding: 88px 0; background: var(--pdx-canvas); border-top: 1px solid var(--pdx-line); }
.pdx-grid { display: grid; gap: 20px; }
.pdx-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdx-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pdx-card { display: flex; flex-direction: column; padding: 32px 28px 28px; background: #fff; border: 1px solid var(--pdx-line); border-top: 3px solid var(--pdx-line-strong); transition: border-color .2s ease; }
.pdx-card:hover { border-color: var(--pdx-brand); }
.pdx-card-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 22px; background: var(--pdx-canvas); border: 1px solid var(--pdx-line); }
.pdx-card-icon img { width: 42px; height: 42px; object-fit: contain; }
.pdx-card h3 { margin: 0 0 10px; color: var(--pdx-ink); font-size: 20px; line-height: 1.4; }
.pdx-card p { margin: 0; color: var(--pdx-muted); font-size: 14.5px; line-height: 1.9; }
.pdx-card-foot { margin-top: auto; padding-top: 22px; }
.pdx-badge { display: inline-block; padding: 5px 12px; background: var(--pdx-tint); color: var(--pdx-brand-dark); font-size: 12.5px; font-weight: 800; line-height: 1.6; }
.pdx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--pdx-line); }
.pdx-tags li { padding: 3px 10px; border: 1px solid var(--pdx-line); color: var(--pdx-ink-soft); font-size: 12.5px; font-weight: 600; line-height: 1.7; }

/* ---------- 4. Capabilities ---------- */
.pdx-caps { padding: 88px 0; background: #fff; }
.pdx-cap-grid { display: grid; gap: 18px; }
.pdx-cap-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdx-cap-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdx-cap { padding: 26px 24px 28px; background: #fff; border: 1px solid var(--pdx-line); transition: border-color .2s ease, background-color .2s ease; }
.pdx-cap:hover { border-color: var(--pdx-brand); 
				/* background: var(--pdx-canvas);  */
			   }
.pdx-cap-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px; background: var(--pdx-tint); color: var(--pdx-brand); }
.pdx-cap h3 { margin: 0 0 8px; color: var(--pdx-ink); font-size: 16.5px; line-height: 1.5; }
.pdx-cap p { margin: 0; color: var(--pdx-muted); font-size: 13.5px; line-height: 1.85; }

/* ---------- 5. Steps (a real sequence, so numbered) ---------- */
.pdx-steps { padding: 88px 0; background: var(--pdx-canvas); border-top: 1px solid var(--pdx-line); }
.pdx-track { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pdx-track::before { content: ""; position: absolute; top: 33px; inset-inline: calc(50% / var(--cols, 4)); border-top: 2px dashed var(--pdx-line-strong); }
.pdx-step { position: relative; z-index: 1; padding: 0 20px; text-align: center; }
.pdx-step-node { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 22px; border: 6px solid var(--pdx-canvas); border-radius: 50%; background: var(--pdx-brand); box-sizing: content-box; color: #fff; font-size: 19px; font-weight: 800; }
.pdx-step h3 { margin: 0 0 8px; color: var(--pdx-ink); font-size: 17px; line-height: 1.45; }
.pdx-step p { margin: 0; color: var(--pdx-muted); font-size: 13.5px; line-height: 1.85; }

/* ---------- 6. Outcomes + audience ---------- */
.pdx-split { padding: 88px 0; background: #fff; }
.pdx-split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pdx-split-grid.is-single { grid-template-columns: minmax(0, 640px); }
.pdx-panel { padding: 30px 32px 20px; background: #fff; border: 1px solid var(--pdx-line); border-top: 3px solid var(--pdx-brand); }
.pdx-panel h3 { margin: 0 0 8px; color: var(--pdx-ink); font-size: 19px; line-height: 1.5; }
.pdx-list { margin: 0; padding: 0; list-style: none; }
.pdx-list li { position: relative; padding: 13px 0 13px 0; padding-inline-start: 34px; border-top: 1px solid var(--pdx-line); color: var(--pdx-ink-soft); font-size: 14.5px; line-height: 1.75; }
.pdx-list li::before { content: ""; position: absolute; top: 15px; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--pdx-tint); }
.pdx-list li::after { content: ""; position: absolute; top: 19px; inset-inline-start: 7px; width: 5px; height: 9px; border: solid var(--pdx-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- 7. FAQ + downloads ---------- */
.pdx-faq { padding: 88px 0 96px; background: var(--pdx-canvas); border-top: 1px solid var(--pdx-line); }
.pdx-faq-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: 64px; align-items: start; }
.pdx-faq-aside { position: sticky; top: 112px; }
.pdx-faq-aside h2 { margin: 0; color: var(--pdx-ink); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.35; text-wrap: balance; }
.pdx-downloads { display: grid; gap: 10px; margin-top: 30px; }
.pdx-download { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--pdx-line); color: var(--pdx-ink); text-decoration: none; transition: border-color .2s ease; }
.pdx-download:hover { border-color: var(--pdx-brand); }
.pdx-download-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; background: var(--pdx-tint); color: var(--pdx-brand); }
.pdx-download-text b { display: block; font-size: 14.5px; line-height: 1.5; }
.pdx-download-text small { display: block; margin-top: 2px; color: var(--pdx-muted); font-size: 12px; }

.pdx-faq-list { display: grid; gap: 12px; }
.pdx-faq-item { background: #fff; border: 1px solid var(--pdx-line); border-inline-start: 3px solid transparent; transition: border-color .2s ease; }
.pdx-faq-item[open] { border-inline-start-color: var(--pdx-brand); }
.pdx-faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 18px; padding: 20px 24px; list-style: none; cursor: pointer; color: var(--pdx-ink); font-size: 16px; font-weight: 700; line-height: 1.65; }
.pdx-faq-item summary::-webkit-details-marker { display: none; }
.pdx-faq-item summary:focus-visible { outline: 2px solid var(--pdx-brand); outline-offset: -2px; }
.pdx-faq-plus { position: relative; display: block; width: 28px; height: 28px; border: 1px solid var(--pdx-line); border-radius: 50%; background: var(--pdx-canvas); transition: background-color .2s ease, border-color .2s ease; }
.pdx-faq-plus::before, .pdx-faq-plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--pdx-brand); transition: transform .2s ease, background-color .2s ease; }
.pdx-faq-plus::before { width: 12px; height: 2px; margin: -1px 0 0 -6px; }
.pdx-faq-plus::after { width: 2px; height: 12px; margin: -6px 0 0 -1px; }
.pdx-faq-item[open] .pdx-faq-plus {
	background: var(--pdx-brand);
								   border-color: var(--pdx-brand); }
.pdx-faq-item[open] .pdx-faq-plus::before { background: #fff; }
.pdx-faq-item[open] .pdx-faq-plus::after { background: #fff; transform: scaleY(0); }
.pdx-faq-a { max-width: 68ch; padding: 0 24px 24px; color: var(--pdx-muted); font-size: 14.5px; line-height: 1.95; }

/* ---------- 8. Closing call to action ---------- */
.pdx-cta { padding: 68px 0; background: var(--pdx-brand-dark); color: #fff; }
.pdx-cta-layout { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.pdx-cta-copy h2 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.4; text-wrap: balance; }
.pdx-cta-copy p { max-width: 620px; margin: 14px 0 0; color: rgba(255, 255, 255, .78); font-size: 15.5px; line-height: 1.9; }
.pdx-cta-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 12px; }
.pdx-cta .primary-action { background: #fff; border-color: #fff; color: var(--pdx-brand-dark); }
.pdx-cta .secondary-action { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; padding-top:8px;}
.pdx-cta .secondary-action:hover { background: rgba(255, 255, 255, .1); }
.pdx-cta .primary-action, .pdx-cta .secondary-action { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
	.pdx-card, .pdx-cap, .pdx-download, .pdx-faq-item, .pdx-faq-plus,
	.pdx-faq-plus::before, .pdx-faq-plus::after { transition: none; }
}


/* ==========================================================================
   TABLET   (up to 1100px / 980px / 900px)
   ========================================================================== */
@media (max-width: 1100px) {
	.pdx-cap-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdx-intro-grid { gap: 48px; }
	.pdx-faq-layout { gap: 44px; }
}

@media (max-width: 980px) {
	.pdx-intro, .pdx-features, .pdx-caps, .pdx-steps, .pdx-split { padding-top: 72px; padding-bottom: 72px; }
	.pdx-faq { padding-top: 72px; padding-bottom: 76px; }

	.pdx-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.pdx-grid.cols-3, .pdx-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdx-cap-grid.cols-3, .pdx-cap-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pdx-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
	.pdx-track::before { display: none; }

	.pdx-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.pdx-faq-aside { position: static; }
	.pdx-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pdx-cta-layout { align-items: flex-start; flex-direction: column; gap: 28px; }
}

@media (max-width: 900px) {
	.pdx-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pdx-stat { padding: 26px 20px; border-inline-start: 0; border-top: 1px solid var(--pdx-line); }
	.pdx-stat:first-child { padding-inline-start: 20px; }
	.pdx-stat:nth-child(-n+2) { border-top: 0; }
	.pdx-stat:nth-child(even) { border-inline-start: 1px solid var(--pdx-line); }
	.pdx-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ==========================================================================
   MOBILE   (up to 680px)
   ========================================================================== */
@media (max-width: 680px) {
	.pdx-intro, .pdx-features, .pdx-caps, .pdx-steps, .pdx-split { padding-top: 56px; padding-bottom: 56px; }
	.pdx-faq { padding-top: 56px; padding-bottom: 60px; }
	.pdx-cta { padding: 52px 0; }

	.pdx-head { margin-bottom: 30px; }
	.pdx-head h2, .pdx-intro-copy h2 { font-size: 27px; }
	.pdx-head p { font-size: 15px; }
	.pdx-prose { font-size: 15px; line-height: 1.95; }
	.pdx-prose.pdx-lead { font-size: 16px; }

	/* key figures: two per row, compact */
	.pdx-stat { padding: 22px 14px; }
	.pdx-stat:first-child { padding-inline-start: 14px; }
	.pdx-stat-num { font-size: 30px; }
	.pdx-stat-label { font-size: 12.5px; }

	/* at a glance: label above value */
	.pdx-facts { padding: 22px 20px 6px; }
	.pdx-facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 13px 0; }

	/* cards */
	.pdx-grid.cols-3, .pdx-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
	.pdx-card { padding: 26px 22px 24px; }
	.pdx-cap-grid.cols-3, .pdx-cap-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
	.pdx-cap { padding: 22px 20px 24px; }

	/* steps: vertical timeline */
	.pdx-track { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
	.pdx-step { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; padding: 0; text-align: start; }
	.pdx-step-node { margin: 0; }
	.pdx-step-body { padding-top: 14px; }
	.pdx-step:not(:last-child)::after { content: ""; position: absolute; top: 68px; bottom: -36px; inset-inline-start: 33px; border-inline-start: 2px dashed var(--pdx-line-strong); }

	/* outcomes + audience */
	.pdx-split-grid, .pdx-split-grid.is-single { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.pdx-panel { padding: 24px 20px 14px; }

	/* FAQ */
	.pdx-downloads { grid-template-columns: minmax(0, 1fr); }
	.pdx-faq-item summary { gap: 12px; padding: 16px 16px; font-size: 15px; }
	.pdx-faq-a { padding: 0 16px 20px; font-size: 14px; }

	/* CTA */
	.pdx-cta-layout { gap: 24px; }
	.pdx-cta-actions { width: 100%; flex-direction: column; }
	.pdx-cta-actions a { display: flex; align-items: center; justify-content: center; width: 100%; }
}

@media (max-width: 380px) {
	.pdx-stat-num { font-size: 26px; }
	.pdx-step { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
	.pdx-step-node { width: 48px; height: 48px; font-size: 17px; }
	.pdx-step:not(:last-child)::after { top: 60px; inset-inline-start: 29px; }
}


/* ==========================================================================
   OPTIONAL - remove shadows/glow from the existing hero mockup too.
   I have not seen your .pd-hero CSS, so this is commented out. Uncomment it
   if the hero image still shows a shadow or glow behind it.
   ========================================================================== */
.pd-hero-media .pd-tilt,
.pd-hero-media .pd-browser,
.pd-hero-media .pd-screen,
.pd-hero-media .pd-screen img { box-shadow: none; filter: none; }
.pd-hero-media .pd-glow { display: none; }
















/* ==========================================================================
   POLISH LAYER - animations + visual refinement (append at END of stylesheet)
   Pure CSS. No HTML/PHP changes. Flat style kept: no box-shadow anywhere.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes pdx-rise    { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes pdx-reveal  { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes pdx-float   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes pdx-blink   { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pdx-ring    { 0% { scale: .9; opacity: .55; } 70%, 100% { scale: 1.45; opacity: 0; } }
@keyframes pdx-dash    { to { background-position: 32px 0; } }
@keyframes pdx-drift   { 0%, 100% { translate: 0 0; } 50% { translate: 40px 24px; } }
@keyframes pdx-fade    { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes pdx-grow    { from { width: 0; } to { width: 56px; } }

/* ---------- Section headings: gradient accent bar ---------- */
.pdx-head h2::after,
.pdx-intro-copy h2::after,
.pdx-faq-aside h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 18px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--pdx-brand), var(--pdx-brand-dark));
}
.pdx-head.is-center h2::after { margin-inline: auto; }

/* ---------- 1. Key figures ---------- */
.pdx-stats { background: linear-gradient(180deg, #fff 0%, var(--pdx-canvas) 140%); }
.pdx-stat { position: relative; transition: background-color .3s ease; }
.pdx-stat::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pdx-brand), var(--pdx-brand-dark));
	transform: scaleX(0);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
/* .pdx-stat:hover { background: var(--pdx-tint); }
.pdx-stat:hover::before { transform: scaleX(1); } */
.pdx-stat-num {
	background: linear-gradient(135deg, var(--pdx-brand) 20%, var(--pdx-brand-dark) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ---------- 2. Overview + at a glance ---------- */
.pdx-intro { position: relative; overflow: hidden; }
/* .pdx-intro::before {
	content: "";
	position: absolute;
	top: -180px;
	inset-inline-end: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(198, 0, 61, .09), transparent 68%);
	pointer-events: none;
} */
.pdx-intro > .site-shell { position: relative; z-index: 1; }
/* .pdx-prose.pdx-lead {
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--pdx-brand);
} */

.pdx-facts {
	background: linear-gradient(160deg, #fff 0%, var(--pdx-canvas) 100%);
	transition: border-color .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pdx-facts dl > div { transition: background-color .25s ease; }
.pdx-facts dl > div:hover { background: var(--pdx-tint); }
.pdx-facts dt { position: relative; padding-inline-start: 14px; }
.pdx-facts dt::before {
	content: "";
	position: absolute;
	top: .78em;
	inset-inline-start: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pdx-brand);
}

/* ---------- 3. Features / databases ---------- */
.pdx-features {
	background-color: var(--pdx-canvas);
	background-image: radial-gradient(circle at 1px 1px, rgba(198, 0, 61, .07) 1px, transparent 0);
	background-size: 24px 24px;
}
.pdx-card {
	position: relative;
	transition: border-color .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1), background-color .25s ease;
}
/* .pdx-card::before {
	content: "";
	position: absolute;
	top: -3px;
	inset-inline: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--pdx-brand), var(--pdx-brand-dark));
	transform: scaleX(0);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
} */
	/* .pdx-card-icon { transition: background-color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
	.pdx-card-icon img { transition: transform .4s cubic-bezier(.2, .8, .2, 1); } */
.pdx-badge { transition: background-color .25s ease, color .25s ease; }
.pdx-tags li { transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.pdx-tags li:hover { border-color: var(--pdx-brand); color: var(--pdx-brand-dark); background: var(--pdx-tint); }

/* ---------- 4. Capabilities ---------- */
.pdx-caps {
	background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--pdx-canvas) 140%);
}
.pdx-cap {
	position: relative;
	transition: border-color .25s ease, background-color .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.pdx-cap::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: -1px;
	width: 3px;
	background: var(--pdx-brand);
	transform: scaleY(0);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.pdx-cap-icon { transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 5. Steps ---------- */
.pdx-track::before {
	border-top: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--pdx-line-strong) 0 10px, transparent 10px 20px);
	background-size: 32px 2px;
}
.pdx-step-node {
	position: relative;
	background: linear-gradient(135deg, var(--pdx-brand), var(--pdx-brand-dark));
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* .pdx-step-node::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--pdx-brand);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
} */
.pdx-step h3 { transition: color .25s ease; }

/* ---------- 6. Outcomes + audience ---------- */
/* .pdx-split {
	background: linear-gradient(180deg, #fff 0%, var(--pdx-canvas) 160%);
}
.pdx-panel {
	background: linear-gradient(180deg, var(--pdx-tint) 0%, #fff 90px);
	transition: border-color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
} */
.pdx-list li { transition: color .2s ease, background-color .2s ease; }
.pdx-list li::before { transition: background-color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.pdx-list li::after  { transition: border-color .25s ease; }
.pdx-list li:hover { color: var(--pdx-ink); }
.pdx-list li:hover::before { background: var(--pdx-brand); transform: scale(1.15); }
.pdx-list li:hover::after { border-color: #fff; }

/* ---------- 7. FAQ ---------- */
.pdx-faq-item {
	transition: border-color .25s ease, background-color .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.pdx-faq-item:hover { border-color: var(--pdx-line-strong); border-inline-start-color: var(--pdx-brand); }
.pdx-faq-item[open] { background: linear-gradient(180deg, var(--pdx-tint) 0%, #fff 70px); }
.pdx-faq-item summary { transition: color .2s ease; }
.pdx-faq-item summary:hover { color: var(--pdx-brand-dark); }
.pdx-faq-plus { transition: background-color .25s ease, border-color .25s ease, rotate .4s cubic-bezier(.2, .8, .2, 1); }
.pdx-faq-item[open] .pdx-faq-plus { rotate: 180deg; }
.pdx-faq-item[open] .pdx-faq-a { animation: pdx-fade .4s cubic-bezier(.2, .8, .2, 1); }
.pdx-download { transition: border-color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 8. Closing CTA ---------- */
.pdx-cta {
	position: relative;
	overflow: hidden;
	background: #c10037;
	/* background: linear-gradient(120deg, var(--pdx-brand-dark) 0%, var(--pdx-brand-dark) 35%, var(--pdx-brand) 140%); */
}
.pdx-cta::before {
	content: "";
	position: absolute;
	top: -140px;
	inset-inline-end: -100px;
	width: 440px;
	height: 440px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
	pointer-events: none;
}
.pdx-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 0);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 100%);
	pointer-events: none;
}
.pdx-cta > .site-shell { position: relative; z-index: 1; }
.pdx-cta .primary-action,
.pdx-cta .secondary-action {
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.pdx-cta .primary-action:hover { transform: translateY(-3px); background: var(--pdx-canvas); }
.pdx-cta .secondary-action:hover { transform: translateY(-3px); border-color: #fff; }

/* ---------- Hero (existing .pd-hero markup) ---------- */
.pd-hero-media .pd-live b { animation: pdx-blink 1.8s ease-in-out infinite; }


/* ==========================================================================
   HOVER EFFECTS (only on devices that really hover)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
	.pdx-card:hover { transform: translateY(-8px); }
	.pdx-card:hover::before { transform: scaleX(1); }
	.pdx-card:hover .pdx-card-icon { background: var(--pdx-tint); border-color: var(--pdx-brand); 
									/* transform: rotate(-6deg) scale(1.06); */
								   }
	/* .pdx-card:hover .pdx-card-icon img { transform: scale(1.12); } */
	.pdx-card:hover .pdx-badge { background: var(--pdx-brand); color: #fff; }

	.pdx-cap:hover { transform: translateY(-5px); }
	.pdx-cap:hover::before { transform: scaleY(1); }
	.pdx-cap:hover .pdx-cap-icon { background: var(--pdx-brand); color: #fff; 
								  /* transform: rotate(-8deg) scale(1.08);  */
								 }

	.pdx-step:hover .pdx-step-node { transform: scale(1.1); }
	.pdx-step:hover h3 { color: var(--pdx-brand); }

	.pdx-panel:hover { transform: translateY(-4px); }
	.pdx-facts:hover { border-color: var(--pdx-line-strong); border-top-color: var(--pdx-brand); }
	.pdx-download:hover { transform: translateX(-4px); }
	[dir="ltr"] .pdx-download:hover, html[lang="en"] .pdx-download:hover { transform: translateX(4px); }
}


/* ==========================================================================
   MOTION (skipped completely when the visitor prefers reduced motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Hero: staggered entrance on page load */
	.pd-hero-copy > * { animation: pdx-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
	.pd-hero-copy > :nth-child(1) { animation-delay: .05s; }
	.pd-hero-copy > :nth-child(2) { animation-delay: .15s; }
	.pd-hero-copy > :nth-child(3) { animation-delay: .25s; }
	.pd-hero-copy > :nth-child(4) { animation-delay: .35s; }
	.pd-hero-media { animation: pdx-rise 1s cubic-bezier(.2, .8, .2, 1) .25s both; }
	.pd-hero-media .pd-browser { animation: pdx-float 6s ease-in-out 1.4s infinite; }

	/* Steps: soft pulsing ring, staggered */
	.pdx-step-node::after { animation: pdx-ring 2.8s ease-out infinite; }
	.pdx-step:nth-child(2) .pdx-step-node::after { animation-delay: .5s; }
	.pdx-step:nth-child(3) .pdx-step-node::after { animation-delay: 1s; }
	.pdx-step:nth-child(4) .pdx-step-node::after { animation-delay: 1.5s; }

	/* Steps: dashed connector slowly "flows" */
	.pdx-track::before { animation: pdx-dash 1.6s linear infinite; }

	/* CTA: light blob drifts slowly */
	.pdx-cta::before { animation: pdx-drift 14s ease-in-out infinite; }

	/* Scroll reveal (modern browsers; others simply show the content) */
	@supports (animation-timeline: view()) {
		.pdx-head, .pdx-intro-copy, .pdx-facts, .pdx-stat,
		.pdx-card, .pdx-cap, .pdx-step, .pdx-panel, .pdx-faq-item {
			animation: pdx-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		/* light stagger inside grids */
		.pdx-card:nth-child(3n+2), .pdx-cap:nth-child(4n+2), .pdx-stat:nth-child(2) { animation-range: entry 6% entry 52%; }
		.pdx-card:nth-child(3n+3), .pdx-cap:nth-child(4n+3), .pdx-stat:nth-child(3) { animation-range: entry 12% entry 58%; }
		.pdx-cap:nth-child(4n+4), .pdx-stat:nth-child(4) { animation-range: entry 18% entry 64%; }
		.pdx-step:nth-child(2) { animation-range: entry 6% entry 52%; }
		.pdx-step:nth-child(3) { animation-range: entry 12% entry 58%; }
		.pdx-step:nth-child(4) { animation-range: entry 18% entry 64%; }

		/* heading accent bar grows when the heading appears */
		.pdx-head h2::after,
		.pdx-intro-copy h2::after,
		.pdx-faq-aside h2::after {
			animation: pdx-grow linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 70%;
		}
	}
}













































/* ---- section headings ---- */
.editorial-heading { position: relative; margin-block-end: 36px; padding-inline-start: 0; }

.editorial-kicker { display: flex; align-items: center; margin-block-end: 12px; }

.editorial-label {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 0; border: 0; border-radius: 0; background: none;
	color: var(--brand); font-size: 13px; font-weight: 600; line-height: 1;
}
.editorial-label::before {
	content: ""; width: 28px; height: 2px; background: var(--brand);
}
.editorial-label b { font-weight: 600; }
:lang(en) .editorial-label { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }

.editorial-heading h2 {
	margin: 0; 
	/* max-width: 820px; */
	font-size: clamp(24px, 2.4vw, 32px); font-weight: 700;
	line-height: 1.3; text-wrap: balance;
}
:lang(en) .editorial-heading h2 { letter-spacing: -.01em; }

.editorial-summary { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; text-wrap: pretty; }

@media (max-width: 680px) {
	.editorial-heading { margin-block-end: 26px; }
	.editorial-kicker { margin-block-end: 10px; }
	.editorial-label { font-size: 5px; gap: 10px; }
	:lang(en) .editorial-label { font-size: 2px; letter-spacing: .12em; }
	.editorial-label::before { width: 20px; }
	.editorial-heading h2 { font-size: 22px; line-height: 1.35; }
}















/* =========================================================
   HERO v3 - text + small globe  (replaces the previous v3 block)
   ========================================================= */
.hero-section { --hero-globe-size: 600px; }   /* <- make the globe bigger / smaller here */

.hero-section .hero-globe {
  position: relative; z-index: 2; min-width: 0;
  width: min(100%, var(--hero-globe-size));
}
.hero-section .hero-globe .hero-globe-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  cursor: grab; touch-action: pan-y;
}

/* ---------- Desktop + tablet: two equal columns ---------- */
@media (min-width: 761px) {
  .hero-section .hero-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
  }
  [dir] .hero-section .hero-layout .hero-copy { width: 100% !important; max-width: 620px; }
  .hero-section .hero-globe { justify-self: center; }
}

/* ---------- Phones: text first, small globe below ---------- */
@media (max-width: 760px) {
  [dir] .hero-section .hero-layout {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }
  [dir] .hero-section .hero-layout .hero-copy {
    width: 80% !important;
    padding: 32px 0 12px !important;
  }
  [dir] .hero-section .hero-layout .hero-copy h1 { font-size: clamp(24px, 7vw, 34px) !important; }
  [dir] .hero-section .hero-layout .hero-copy > span { font-size: 13px; line-height: 1.8; }

  .hero-section .hero-globe { width: min(72vw, 300px); margin: 4px auto 36px; }
}


/* ---------- Hero: clients panel (reuses the cg-* styles) ---------- */
.hero-section .hero-stats {
  grid-column: 1 / -1;                 
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 16px; align-items: stretch;
  margin: 8px 0 32px;                 
}
.hero-section .hero-stats .cg-stats { margin-top: 0; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hero-section .hero-stats .cg-listbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-section .hero-stats-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.hero-section .hero-stats-more:hover { text-decoration: underline; }

@media (min-width: 761px) {
  .hero-section .hero-stats .cg-chips { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 760px) {
  .hero-section .hero-stats { grid-template-columns: 1fr; margin: 0 0 28px; }
  .hero-section .hero-stats .cg-stats { grid-template-columns: 1fr 1fr; }
}
















/* 

.hero-section .hero-stats {
  grid-column: 1 / -1;               
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 16px; align-items: stretch;
  margin: 8px 0 32px;
}
.hero-section .hero-stats .cg-stats { margin-top: 0; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.hero-section .hero-stats .cg-listbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-section .hero-stats-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.hero-section .hero-stats-more:hover { text-decoration: underline; }

@media (min-width: 761px) {
  .hero-section .hero-stats .cg-chips { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 760px) {
  .hero-section .hero-stats { grid-template-columns: 1fr; margin: 0 0 28px; }
  .hero-section .hero-stats .cg-stats { grid-template-columns: 1fr 1fr; }
}




@media (min-width: 1200px) {
  .hero-section .hero-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) clamp(230px, 17vw, 280px);
    column-gap: clamp(20px, 2.4vw, 40px);
  }


  .hero-section .hero-layout .hero-copy  { grid-column: 1; grid-row: 1; }
  .hero-section .hero-globe              { grid-column: 2; grid-row: 1; justify-self: center; }
  .hero-section .hero-stats {
    grid-column: 3; grid-row: 1;
    display: flex; flex-direction: column; gap: 10px;
    margin: 0; align-self: center;
  }


  .hero-section .hero-stats .cg-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-section .hero-stats .cg-stat { padding: 9px 11px; }
  .hero-section .hero-stats .cg-stat b { font-size: 20px; }
  .hero-section .hero-stats .cg-stat span { font-size: 10px; }


  .hero-section .hero-stats .cg-listbox { padding: 10px; }
  .hero-section .hero-stats .cg-listbox-head { margin-bottom: 8px; font-size: 10px; }
  .hero-section .hero-stats-more { font-size: 10.5px; }
  .hero-section .hero-stats .cg-chips { grid-template-columns: 1fr; gap: 4px; max-height: 300px; }
  .hero-section .hero-stats .cg-chip { grid-template-columns: 24px 1fr auto; gap: 7px; padding: 5px 8px; }
  .hero-section .hero-stats .cg-chip-name { font-size: 11px; }
  .hero-section .hero-stats .cg-chip-n { min-width: 18px; height: 18px; padding: 0 5px; font-size: 9.5px; }
  .hero-section .hero-stats .cg-code { width: 24px; height: 19px; font-size: 9px; }



}
 */








/* @media (min-width: 1200px) {
  .hero-section .hero-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) clamp(230px, 17vw, 280px);
    column-gap: clamp(20px, 2.4vw, 40px);
  }

  .hero-section .hero-stats {
    grid-column: auto; grid-row: 1;
    display: flex; flex-direction: column; gap: 10px;
    margin: 0; align-self: center;
  }

  .hero-section .hero-stats .cg-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-section .hero-stats .cg-stat { padding: 9px 11px; }
  .hero-section .hero-stats .cg-stat b { font-size: 20px; }
  .hero-section .hero-stats .cg-stat span { font-size: 10px; }

  
  .hero-section .hero-stats .cg-listbox { padding: 10px; }
  .hero-section .hero-stats .cg-listbox-head { margin-bottom: 8px; font-size: 10px; }
  .hero-section .hero-stats-more { font-size: 10.5px; }
  .hero-section .hero-stats .cg-chips { grid-template-columns: 1fr; gap: 4px; max-height: 300px; }
  .hero-section .hero-stats .cg-chip { grid-template-columns: 24px 1fr auto; gap: 7px; padding: 5px 8px; }
  .hero-section .hero-stats .cg-chip-name { font-size: 11px; }
  .hero-section .hero-stats .cg-chip-n { min-width: 18px; height: 18px; padding: 0 5px; font-size: 9.5px; }
  .hero-section .hero-stats .cg-code { width: 24px; height: 19px; font-size: 9px; } */














/* ---------- Hero: heading at the top of the clients panel ---------- */
/* .hero-section .hero-stats-head { grid-column: 1 / -1; }  
.hero-section .hero-stats-head .cg-eyebrow { margin: 0 0 8px; font-size: 20px; }
.hero-section .hero-stats-head h2 {
  margin: 0; color: #fff;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3; letter-spacing: -.015em; text-wrap: balance;
}

@media (min-width: 1200px) {
  .hero-section .hero-stats-head .cg-eyebrow { font-size: 10.5px; margin-bottom: 6px; }
  .hero-section .hero-stats-head h2 { font-size: 15px; line-height: 1.35; }
} */


/* ---------- Hero: heading at the top of the clients panel ---------- */
/* .hero-section .hero-stats-head { grid-column: 1 / -1; 
							   padding-top:15px}
.hero-section .hero-stats-head .cg-eyebrow { margin: 0 0 12px; font-size: 14px; } */
/* .hero-section .hero-stats-head h2 {
  margin: 0 0 20px; color: #fff;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.2; letter-spacing: -.02em; text-wrap: balance;
} */
/* .hero-section .hero-stats-head h2 {
  margin: 0 0 20px; color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25; letter-spacing: -.015em; text-wrap: balance;
} */
/* desktop: still large (this rule was what made it tiny before) */
@media (min-width: 1200px) {
  .hero-section .hero-stats-head .cg-eyebrow { font-size: 15px; margin-bottom: 12px; }
  .hero-section .hero-stats-head h2 { font-size: 40px; line-height: 1.2; }
}



.hero-section .hero-stats-head { grid-column: 1 / -1; text-align: center; padding-top:10px;}
.hero-section .hero-stats-head .cg-eyebrow { margin: 0 0 12px; font-size: 20px; justify-content: center; padding-top:5px;}
.hero-section .hero-stats-head h2 {
  margin: 0px; color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25; letter-spacing: -.015em; text-wrap: balance;
}


.hero-section .hero-globe .hero-globe-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  cursor: grab; touch-action: pan-y;
  margin-top: -40px;
}




.hero-section .hero-stats-head h2 {
  margin: 0; color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25; letter-spacing: -.015em; text-wrap: balance;
  position: absolute; top: 70%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; text-align: center;
  z-index: 3; pointer-events: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}





.hero-section .hero-globe-title {
  margin: -50px 0 0; color: #fff; text-align: center;
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.3; letter-spacing: -.01em; text-wrap: balance;
  position: relative; z-index: 3;
}

/* 
.hero-section .hero-globe-title {
  margin: 0; color: #fff; text-align: start;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.3; letter-spacing: -.01em; text-wrap: balance;
  position: absolute; bottom: 4%; inset-inline-start: 0;
  width: 30%; z-index: 3; pointer-events: none;
} */

/* 
.hero-section .hero-globe-title {
  margin: 0; color: #fff; text-align: start;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.3; letter-spacing: -.01em; text-wrap: balance;
  position: absolute; top: 8%; inset-inline-start: 0;
  width: 30%; z-index: 3; pointer-events: none;
} */


/* .hero-section .hero-globe-title {
  margin: 0; color: #fff; text-align: start;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35; letter-spacing: -.01em; text-wrap: balance;
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-end: -28%;
  width: 26%; z-index: 3; pointer-events: none;
} */




@media (max-width: 760px) {
  .hero-section .hero-globe {
    width: min(92vw, 400px);
    margin: 0 auto 40px;
  }

  .hero-section .hero-stats-head { padding-top: 0; }
  .hero-section .hero-stats-head .cg-eyebrow {
    font-size: 13px; margin: 0 0 6px; padding-top: 0;
  }

  .hero-section .hero-globe .hero-globe-canvas { margin-top: -24px; }

  .hero-section .hero-globe-title {
    position: relative;
    margin: -34px auto 0;
    width: 92%;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    transform: none;
    inset: auto;
  }
}