/* =============================================================
   MENA Newswire - main stylesheet
   Brand: primary #5f68e7 · secondary #99999b
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
	--c-primary: #5f68e7;
	--c-primary-dark: #4a52c9;
	--c-primary-deep: #343b96;
	--c-primary-soft: #eef0fd;
	--c-secondary: #99999b;
	--c-ink: #171a33;
	--c-ink-2: #454965;
	--c-muted: #7c7f96;
	--c-bg: #ffffff;
	--c-bg-soft: #f6f7fd;
	--c-line: #e6e8f4;
	--c-dark: #12142b;
	--c-dark-2: #1a1d3a;
	--grad: linear-gradient(120deg, #5f68e7 0%, #7d6cf0 55%, #4a52c9 100%);
	--font-head: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", -apple-system, sans-serif;
	--font-body: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", -apple-system, sans-serif;
	--radius: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 2px 10px rgba(23, 26, 51, 0.06);
	--shadow-md: 0 10px 34px rgba(23, 26, 51, 0.1);
	--shadow-brand: 0 12px 30px rgba(95, 104, 231, 0.32);
	--container: 1200px;
	--header-h: 76px;
	--topbar-h: 40px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--c-ink-2);
	background: var(--c-bg);
	overflow-x: hidden;
}

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

a {
	color: var(--c-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--c-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--c-ink);
	line-height: 1.42;
	margin: 0 0 0.6em;
	overflow-wrap: break-word;
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0;
	padding: 0;
}

.container {
	width: min(100% - 2.5rem, var(--container));
	margin-inline: auto;
}

.container--narrow {
	max-width: 860px;
}

.section {
	padding: clamp(3.2rem, 7vw, 5.5rem) 0;
}

/* Stroke icon system */
svg.i,
.feature-card__icon svg,
.stat__icon svg,
.globe svg,
.addon-card__icon svg,
.region-card__icon svg,
.contact-card__icon svg,
.step__icon svg,
.side-card--cta__icon svg,
.no-results__icon svg,
.thumb-fallback svg,
.social-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

svg.i {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	inset-inline-start: 1rem;
	z-index: 999;
	background: var(--c-primary);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 8px;
}

.skip-link:focus {
	top: 1rem;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	white-space: nowrap;
}

.btn--sm {
	padding: 0.65rem 1.15rem;
	font-size: 0.88rem;
}

.btn--primary {
	background: var(--grad);
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(95, 104, 231, 0.45);
}

.btn--ghost {
	background: var(--c-bg);
	color: var(--c-ink);
	border-color: var(--c-line);
	box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
	color: var(--c-primary);
	border-color: var(--c-primary);
	transform: translateY(-2px);
}

.btn--light {
	background: #fff;
	color: var(--c-primary-deep);
}

.btn--light:hover {
	color: var(--c-primary);
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}

.btn--outline-light:hover {
	color: #fff;
	border-color: #fff;
	transform: translateY(-2px);
}

.btn .i {
	transition: transform 0.25s var(--ease);
}

.btn:hover .i {
	transform: translateX(3px);
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Pulse dot ---------- */
.pulse-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-primary);
	position: relative;
	flex: none;
	display: inline-block;
}

.pulse-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--c-primary);
	animation: pulse-ring 1.8s ease-out infinite;
}

.pulse-dot--light,
.pulse-dot--light::after {
	background-color: #fff;
	border-color: #fff;
}

.pulse-dot--light {
	background: #fff;
}

@keyframes pulse-ring {
	0% { transform: scale(0.6); opacity: 1; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* =============================================================
   HEADER
   ============================================================= */
.topbar {
	background: var(--c-dark);
	color: #c9cbe3;
	font-size: 0.82rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	flex-wrap: wrap;
	padding-block: 0.25rem;
}

.topbar__contacts {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	flex-wrap: wrap;
}

.topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #c9cbe3;
}

.topbar__link:hover {
	color: #fff;
}

.topbar__right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.topbar__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #9fa3c8;
}

.social-row {
	display: flex;
	gap: 0.45rem;
}

.social-btn {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #c9cbe3;
	background: rgba(255, 255, 255, 0.07);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-btn svg {
	width: 15px;
	height: 15px;
}

.social-btn:hover {
	background: var(--c-primary);
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Language switch (Arabic / English sister sites) ---------- */
.lang-switch {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.lang-switch--topbar {
	padding-inline-start: 0.85rem;
	margin-inline-start: 0.15rem;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.lang-switch__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.22rem 0.45rem;
	border-radius: 7px;
	color: #9fa3c8;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.lang-switch__item:hover {
	background: rgba(255, 255, 255, 0.09);
	color: #fff;
}

.lang-switch__item.is-current {
	background: rgba(255, 255, 255, 0.11);
	color: #fff;
	cursor: default;
}

/* The flag is the control; the language name is there for screen readers and
   for the roomier drawer, where it doubles as the label. */
.lang-switch--topbar .lang-switch__name {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.lang-switch__flag {
	width: 22px;
	height: 11px;
	flex: none;
	display: block;
	border-radius: 2px;
	/* Flags carry their own geometry and must never be mirrored in RTL. */
	direction: ltr;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.lang-switch__item.is-current .lang-switch__flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* In the drawer the switch is a full-width row under the menu. */
.lang-switch--nav {
	display: none;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--c-line);
	gap: 0.5rem;
}

.lang-switch--nav .lang-switch__item {
	/* .main-nav a forces display:block on everything inside the drawer. */
	display: flex;
	flex: 1;
	justify-content: center;
	padding: 0.6rem 0.5rem;
	border: 1px solid var(--c-line);
	border-radius: 12px;
	color: var(--c-ink-2);
	font-size: 0.9rem;
}

.lang-switch--nav .lang-switch__item:hover {
	background: var(--c-primary-soft);
	color: var(--c-primary-dark);
	border-color: rgba(95, 104, 231, 0.35);
}

.lang-switch--nav .lang-switch__item.is-current {
	background: var(--c-primary-soft);
	color: var(--c-primary-dark);
	border-color: rgba(95, 104, 231, 0.45);
}

.lang-switch--nav .lang-switch__flag {
	width: 26px;
	height: 13px;
	box-shadow: 0 0 0 1px rgba(23, 26, 51, 0.18);
}

/* Masthead */
.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow 0.3s ease;
}

.masthead.is-scrolled {
	box-shadow: var(--shadow-md);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	min-height: var(--header-h);
}

.site-branding .custom-logo-link {
	display: inline-flex;
}

.site-branding img {
	max-height: 54px;
	width: auto;
	transition: transform 0.3s var(--ease);
}

.site-branding a:hover img {
	transform: scale(1.04);
}

/* Nav */
.main-nav__list,
.main-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
}

.main-nav li {
	position: relative;
}

.main-nav a {
	display: block;
	padding: 0.5rem 0.62rem;
	font-family: var(--font-head);
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--c-ink);
	border-radius: 10px;
	position: relative;
	white-space: nowrap;
}

.main-nav > ul > li > a::after,
.main-nav__list > li > a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.62rem;
	inset-inline-end: 100%;
	bottom: 0.22rem;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transition: inset-inline-end 0.3s var(--ease);
}

.main-nav > ul > li > a:hover::after,
.main-nav__list > li > a:hover::after,
.main-nav li.current-menu-item > a::after,
.main-nav li.current_page_item > a::after {
	inset-inline-end: 0.62rem;
}

.main-nav a:hover,
.main-nav li.current-menu-item > a,
.main-nav li.current_page_item > a {
	color: var(--c-primary);
}

/* Submenus (desktop) */
.main-nav li ul {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	box-shadow: var(--shadow-md);
	padding: 0.5rem;
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0.25s;
}

.main-nav li:hover > ul,
.main-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.main-nav li ul li {
	width: 100%;
}

.main-nav li ul a {
	padding: 0.55rem 0.8rem;
	font-weight: 500;
}

.main-nav li ul a:hover {
	background: var(--c-primary-soft);
}

.masthead__actions {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.search-toggle {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid var(--c-line);
	background: #fff;
	color: var(--c-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
	color: var(--c-primary);
	border-color: var(--c-primary);
	transform: translateY(-1px);
}

/* Burger */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid var(--c-line);
	background: #fff;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-ink);
	transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Header search drawer */
.header-search {
	border-top: 1px solid var(--c-line);
	padding: 1rem 0;
	background: #fff;
}

/* =============================================================
   SEARCH FORM
   ============================================================= */
.search-form__box {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--c-bg-soft);
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	padding-block: 0.35rem;
	padding-inline: 1rem 0.4rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form__box:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 4px rgba(95, 104, 231, 0.14);
}

.search-form__box .i {
	color: var(--c-muted);
}

.search-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--c-ink);
	outline: none;
}

/* =============================================================
   HERO (homepage)
   ============================================================= */
.hero {
	position: relative;
	overflow: hidden;
	/* No min-height: the hero is exactly as tall as its content, so the stats
	   band sits directly beneath it and both share the first screen. */
	display: grid;
	/* Anchored to the top with an explicit gap, so the space above the badge
	   stays predictable on every viewport height (centring made it grow with
	   the screen). */
	align-content: start;
	padding: clamp(1.6rem, 3.4vw, 3rem) 0 clamp(0.9rem, 1.7vw, 1.6rem);
	background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	animation: blob-float 14s ease-in-out infinite alternate;
}

.blob--1 {
	width: 460px;
	height: 460px;
	top: -180px;
	inset-inline-end: -120px;
	background: radial-gradient(circle, rgba(95, 104, 231, 0.5), transparent 65%);
}

.blob--2 {
	width: 380px;
	height: 380px;
	bottom: -160px;
	inset-inline-start: -120px;
	background: radial-gradient(circle, rgba(125, 108, 240, 0.4), transparent 65%);
	animation-delay: -5s;
}

.blob--3 {
	width: 260px;
	height: 260px;
	top: 30%;
	inset-inline-start: 42%;
	background: radial-gradient(circle, rgba(95, 104, 231, 0.25), transparent 65%);
	animation-delay: -9s;
}

@keyframes blob-float {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(36px, -30px) scale(1.12); }
}

/* Animated background grid: drifting lattice, breathing nodes, sweeping beam.
   The mask stays on the parent so only the inner layers move. */
.hero-grid {
	position: absolute;
	inset: 0;
	overflow: hidden;
	mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 75%);
}

.hero-grid::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -220px;
	bottom: -220px;
	left: -220px;
	background-image:
		radial-gradient(circle, rgba(95, 104, 231, 0.42) 1.7px, transparent 2.1px),
		linear-gradient(rgba(95, 104, 231, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(95, 104, 231, 0.08) 1px, transparent 1px);
	background-size: 176px 176px, 44px 44px, 44px 44px;
	animation: grid-drift 26s linear infinite, grid-breathe 7s ease-in-out infinite alternate;
	will-change: transform, opacity;
}

/* 176px = 4 grid cells, so both the lines and the nodes loop seamlessly. */
@keyframes grid-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(176px, 176px, 0); }
}

@keyframes grid-breathe {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

.hero-grid::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -70%;
	width: 42%;
	height: 220%;
	background: linear-gradient(90deg, transparent, rgba(95, 104, 231, 0.14), transparent);
	transform: rotate(14deg);
	animation: grid-sweep 11s ease-in-out infinite;
	will-change: transform;
}

@keyframes grid-sweep {
	0% { transform: translateX(0) rotate(14deg); opacity: 0; }
	12% { opacity: 1; }
	78% { opacity: 1; }
	100% { transform: translateX(430%) rotate(14deg); opacity: 0; }
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: #fff;
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-sm);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--c-ink);
	margin-bottom: 1.9rem;
}

.hero__title {
	/* Sized so each line fits the hero column on one line (see .hero__title-line). */
	font-size: clamp(1.8rem, 3.4vw, 43px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.32;
	margin-bottom: 1.6rem;
}

.hero__title-line {
	display: block;
}

/* Second line carries the same dark as the top bar, so the headline reads
   as one gradient line answered by one solid one. */
.hero__title-line--dark {
	color: var(--c-dark);
}

.hero__title-line + .hero__title-line {
	margin-top: 0.16em;
}

.grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

.hero__lead {
	font-size: 1.08rem;
	line-height: 1.95;
	max-width: 56ch;
	margin-bottom: 2.3rem;
}

/* Justified only on the two-column desktop hero; below 900px the hero copy is
   centred, where justification would open ugly rivers of whitespace. */
@media (min-width: 901px) {
	.hero__lead {
		text-align: justify;
		text-justify: inter-word;
		hyphens: auto;
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-bottom: 2.1rem;
}

.hero__actions--center {
	justify-content: center;
	margin-top: 1.5rem;
}

.hero__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.7rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--c-ink-2);
}

.hero__points--stack {
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 1.2rem;
}

.hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.hero__points .i {
	color: var(--c-primary);
}

/* Orbit visual */
.hero__visual {
	display: flex;
	justify-content: center;
}

.globe {
	position: relative;
	width: min(440px, 82vw);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	filter: drop-shadow(0 30px 60px rgba(23, 26, 51, 0.28));
	animation: globe-bob 9s ease-in-out infinite alternate;
}

.globe__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hollow variant: nothing floats around it, so the sphere runs larger and
   casts no shadow of its own. */
.globe--wire {
	width: min(500px, 88vw);
	filter: none;
}

@keyframes globe-bob {
	from { transform: translateY(-6px); }
	to { transform: translateY(6px); }
}

/* Still used by the world map hub ring on the About page. */
@keyframes spin {
	to { transform: rotate(360deg); }
}

.float-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: #fff;
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-md);
	border-radius: 999px;
	padding: 0.5rem 0.95rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-ink);
	animation: chip-float 5.5s ease-in-out infinite alternate;
}

.float-chip .i {
	color: var(--c-primary);
}

.float-chip--1 { top: 8%; inset-inline-end: 0; animation-delay: -1s; }
.float-chip--2 { bottom: 12%; inset-inline-start: -4%; animation-delay: -2.5s; }
.float-chip--3 { bottom: -4%; inset-inline-end: 8%; animation-delay: -4s; }
.float-chip--4 { top: 2%; inset-inline-start: -7%; animation-delay: -3.2s; }

@keyframes chip-float {
	0% { transform: translateY(-7px); }
	100% { transform: translateY(7px); }
}

/* =============================================================
   TICKER
   ============================================================= */
.ticker {
	display: flex;
	align-items: stretch;
	background: var(--c-dark);
	overflow: hidden;
}

.ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--grad);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0;
	word-spacing: 0.10em;
	padding: 0.8rem 1.3rem;
	flex: none;
}

.ticker__viewport {
	overflow: hidden;
	flex: 1;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ticker__track {
	display: flex;
	gap: 0;
	white-space: nowrap;
	animation: ticker-scroll 45s linear infinite;
	width: max-content;
}

.ticker:hover .ticker__track {
	animation-play-state: paused;
}

@keyframes ticker-scroll {
	to { transform: translateX(-50%); }
}

.ticker__item {
	color: #d4d6ee;
	font-size: 0.9rem;
	padding: 0.8rem 1.6rem;
	position: relative;
}

.ticker__item::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-primary);
	transform: translateY(-50%);
}

.ticker__item:hover {
	color: #fff;
}

/* =============================================================
   SECTION HEADS
   ============================================================= */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
	margin-bottom: 0.8rem;
}

.eyebrow--center {
	justify-content: center;
}

.section-head {
	max-width: 720px;
	margin: 0 auto 2.6rem;
	text-align: center;
}

.section-head--row {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	text-align: start;
	flex-wrap: wrap;
}

.section-head--tight {
	margin-bottom: 1.6rem;
	align-items: center;
}

.section-title {
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: 0;
	margin-bottom: 0.4rem;
}

.section-title--sm {
	font-size: clamp(1.3rem, 2.5vw, 1.65rem);
	margin: 0;
}

.section-sub {
	color: var(--c-muted);
	font-size: 1.02rem;
	margin: 0;
}

.rule {
	flex: 1;
	height: 1px;
	background: var(--c-line);
	min-width: 40px;
}

/* =============================================================
   STATS
   ============================================================= */
.stats-band {
	padding-block: clamp(2rem, 3.4vw, 3rem);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
	background: var(--c-dark);
	border-radius: var(--radius-lg);
	padding: clamp(1.1rem, 2.2vw, 1.55rem);
	position: relative;
	overflow: hidden;
}

.stats-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(600px 200px at 20% 0%, rgba(95, 104, 231, 0.35), transparent 70%), radial-gradient(500px 220px at 85% 100%, rgba(125, 108, 240, 0.28), transparent 70%);
	pointer-events: none;
}

.stat {
	position: relative;
	text-align: center;
	color: #fff;
	padding: 0.2rem 0.4rem;
}

.stat__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	align-items: center;
	justify-content: center;
	color: #aeb3f5;
	margin-bottom: 0.45rem;
}

.stat__icon svg {
	width: 20px;
	height: 20px;
}

.stat__num {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
}

.stat__label {
	display: block;
	color: #9fa3c8;
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

/* =============================================================
   FEATURE CARDS
   ============================================================= */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.feature-grid--three {
	grid-template-columns: repeat(3, 1fr);
}

.feature-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.8rem 1.6rem;
	position: relative;
	overflow: hidden;
	transition:
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 0.7s ease;
}

.feature-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--grad);
	opacity: 0;
	transition: opacity 0.75s ease;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.3);
}

.feature-card:hover::before {
	opacity: 1;
}

.feature-card__icon {
	display: inline-flex;
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
	transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease;
}

.feature-card__icon svg {
	width: 28px;
	height: 28px;
}

.feature-card:hover .feature-card__icon {
	background: var(--grad);
	color: #fff;
	transform: rotate(-6deg) scale(1.06);
}

/* icon stroke-draw animation on reveal */
.anim-draw svg path,
.anim-draw svg circle {
	stroke-dasharray: 90;
	stroke-dashoffset: 90;
}

.is-revealed .anim-draw svg path,
.is-revealed .anim-draw svg circle {
	animation: draw 1.4s var(--ease) forwards;
}

@keyframes draw {
	to { stroke-dashoffset: 0; }
}

.feature-card h3 {
	font-size: 1.12rem;
	margin-bottom: 0.5rem;
}

.feature-card p {
	font-size: 0.94rem;
	color: var(--c-muted);
	margin: 0;
}

/* =============================================================
   HOW IT WORKS (band + timeline)
   ============================================================= */
.how-band {
	background: var(--c-bg-soft);
}

.steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.4rem;
	counter-reset: step;
}

.step {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.7rem 1.5rem;
	position: relative;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.step:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.step__num {
	position: absolute;
	top: 1.2rem;
	inset-inline-end: 1.3rem;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--c-primary-soft);
	-webkit-text-stroke: 1px rgba(95, 104, 231, 0.4);
}

.step__icon {
	display: inline-flex;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

.step__icon svg {
	width: 26px;
	height: 26px;
}

.step h3 {
	font-size: 1.05rem;
}

.step p {
	font-size: 0.92rem;
	color: var(--c-muted);
	margin: 0;
}

/* Timeline (How It Works page) */
.timeline {
	list-style: none;
	max-width: 820px;
	margin-inline: auto;
	position: relative;
	padding-inline-start: 0;
}

.timeline::before {
	content: "";
	position: absolute;
	inset-inline-start: 29px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: linear-gradient(180deg, var(--c-primary), rgba(95, 104, 231, 0.15));
}

.timeline__item {
	position: relative;
	padding-block: 0 2rem;
	padding-inline-start: 5.2rem;
}

.timeline__item:last-child {
	padding-bottom: 0;
}

.timeline__num {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--grad);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-brand);
}

.timeline__card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.7rem;
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.timeline__card:hover {
	transform: translateX(6px);
	box-shadow: var(--shadow-md);
}

.timeline__card .feature-card__icon {
	margin-bottom: 0.8rem;
}

.timeline__card h3 {
	font-size: 1.15rem;
}

.timeline__card p {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.96rem;
}

/* =============================================================
   TESTIMONIALS SLIDER
   ============================================================= */
.slider__viewport {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.slider__track {
	display: flex;
	transition: transform 0.6s var(--ease);
}

.quote-card {
	flex: 0 0 100%;
	margin: 0;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: clamp(1.8rem, 4vw, 3rem);
	position: relative;
}

.quote-card::before {
	content: "\201C";
	position: absolute;
	top: 0.4rem;
	inset-inline-start: 1.6rem;
	font-family: Georgia, serif;
	font-size: 5.5rem;
	line-height: 1;
	color: rgba(95, 104, 231, 0.18);
}

.quote-card blockquote {
	margin: 0 0 1.4rem;
	font-size: clamp(1.02rem, 2vw, 1.18rem);
	color: var(--c-ink-2);
	position: relative;
}

.quote-card figcaption strong {
	display: block;
	font-family: var(--font-head);
	color: var(--c-ink);
}

/* The attribution now carries a link to the person's profile. */
.quote-card figcaption {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.quote-card__li {
	display: inline-flex;
	line-height: 0;
	border-radius: 5px;
	transition: transform 0.5s var(--ease), filter 0.5s ease;
}

.quote-card__li img {
	display: block;
	height: 20px;
	width: auto;
}

.quote-card__li:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}


.slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.4rem;
}

.slider__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--c-line);
	background: #fff;
	color: var(--c-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s var(--ease);
}

.slider__btn:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	transform: translateY(-2px);
}

.slider__dots {
	display: flex;
	gap: 0.5rem;
}

.slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: var(--c-line);
	cursor: pointer;
	transition: all 0.3s var(--ease);
}

.slider__dot.is-active {
	width: 26px;
	background: var(--grad);
}

/* =============================================================
   NEWS CARDS / GRIDS
   ============================================================= */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

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

.news-grid--three {
	grid-template-columns: repeat(3, 1fr);
}

.news-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.news-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-primary-soft);
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.news-card:hover .news-card__media img {
	transform: scale(1.06);
}

.thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(95, 104, 231, 0.45);
	background: linear-gradient(135deg, var(--c-primary-soft), #fff);
}

.thumb-fallback svg {
	width: 54px;
	height: 54px;
}

.news-card__body {
	padding: 1.25rem 1.35rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
}

.cat-badge {
	align-self: flex-start;
	display: inline-block;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	word-spacing: 0.09em;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
}

.cat-badge:hover {
	background: var(--c-primary);
	color: #fff;
}

.news-card__title {
	font-size: 1.06rem;
	margin: 0;
	line-height: 1.35;
}

.news-card__title a {
	color: var(--c-ink);
}

.news-card__title a:hover {
	color: var(--c-primary);
}

.news-card__excerpt {
	font-size: 0.92rem;
	color: var(--c-muted);
	margin: 0;
}

.news-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--c-muted);
}

/* The slider nav is visually light, so the section closes tighter than a
   default section would to keep the gap looking even top and bottom. */
.testimonials {
	padding-bottom: clamp(1.6rem, 3.4vw, 3rem);
}

/* =============================================================
   CTA BAND
   ============================================================= */
/* The section before this one already supplies the gap above the card, so
   no top padding here: the card then sits evenly between the two. */
.cta-band {
	padding-top: 0;
}

.cta-card {
	position: relative;
	overflow: hidden;
	background: var(--c-dark);
	border-radius: var(--radius-lg);
	padding: clamp(2.4rem, 6vw, 4rem);
	text-align: center;
	color: #fff;
}

/* The glow drifts sideways, so it is drawn larger than the card. With
   inset 0 the travel exposed a dark strip along one edge. */
.cta-card__glow {
	position: absolute;
	inset: -40px;
	background: radial-gradient(500px 240px at 15% 15%, rgba(95, 104, 231, 0.55), transparent 70%), radial-gradient(480px 260px at 88% 90%, rgba(125, 108, 240, 0.4), transparent 70%);
	animation: glow-drift 9s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes glow-drift {
	0% { transform: translate3d(-26px, -6px, 0); }
	100% { transform: translate3d(26px, 6px, 0); }
}

.cta-card h2 {
	position: relative;
	color: #fff;
	font-size: clamp(1.6rem, 3.6vw, 2.3rem);
}

.cta-card p {
	position: relative;
	color: #c9cbe3;
	margin-bottom: 1.6rem;
}

.cta-card__actions {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

/* =============================================================
   PAGE HERO (inner pages)
   ============================================================= */
.page-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(3.2rem, 7vw, 5.2rem) 0;
	background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
}

.page-hero--compact {
	padding: clamp(2.6rem, 5vw, 3.8rem) 0;
}

.page-hero__title {
	font-size: clamp(2rem, 4.6vw, 3.1rem);
	font-weight: 800;
	letter-spacing: 0;
	margin-bottom: 0.7rem;
	position: relative;
}

.page-hero__sub {
	position: relative;
	max-width: 62ch;
	margin: 0 auto;
	color: var(--c-muted);
	font-size: 1.04rem;
}

.page-hero__search {
	position: relative;
	max-width: 540px;
	margin: 1.6rem auto 0;
}

.error-code {
	position: relative;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(5rem, 16vw, 9rem);
	line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.9;
}

/* Category chips */
.cat-chips {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 1.6rem;
}

.cat-chip {
	background: #fff;
	border: 1.5px solid var(--c-line);
	color: var(--c-ink-2);
	border-radius: 999px;
	padding: 0.45rem 1.05rem;
	font-size: 0.86rem;
	font-weight: 600;
	transition: all 0.25s var(--ease);
}

.cat-chip:hover,
.cat-chip--active {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-brand);
}

/* =============================================================
   NEWSROOM LAYOUT + STICKY SIDEBAR
   ============================================================= */
.newsroom__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2.4rem;
	padding-block: clamp(2.4rem, 5vw, 3.6rem);
	align-items: start;
}

.newsroom__layout--pad {
	padding-top: 3rem;
}

/* The aside must stretch the full grid-row height, otherwise the sticky
   child has no travel room and scrolls away with the content. */
.newsroom__sidebar {
	align-self: stretch;
	height: 100%;
	min-width: 0;
}

.sidebar-sticky {
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--header-h) + 20px);
	display: flex;
	flex-direction: column;
	gap: 1.3rem;
}

.side-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.4rem 1.5rem;
	box-shadow: var(--shadow-sm);
}

.side-card__title {
	font-size: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--c-line);
	position: relative;
}

.side-card__title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 46px;
	height: 2px;
	background: var(--grad);
}

.trend-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
}

.trend-item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.trend-item__rank {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	flex: none;
}

.trend-item__title {
	display: block;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.4;
}

.trend-item__title:hover {
	color: var(--c-primary);
}

.trend-item__date {
	display: block;
	font-size: 0.78rem;
	color: var(--c-muted);
	margin-top: 0.15rem;
}

.side-cats {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.side-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.55rem 0.2rem;
	color: var(--c-ink-2);
	font-size: 0.92rem;
	font-weight: 500;
	border-bottom: 1px dashed var(--c-line);
	transition: color 0.2s ease, padding-inline-start 0.25s var(--ease);
}

.side-cats li:last-child a {
	border-bottom: 0;
}

.side-cats a:hover {
	color: var(--c-primary);
	padding-inline-start: 0.55rem;
}

.side-cats__count {
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
}

.side-card--cta {
	background: var(--c-dark);
	border-color: transparent;
	color: #c9cbe3;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.side-card--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(260px 150px at 80% 0%, rgba(95, 104, 231, 0.5), transparent 70%);
}

.side-card--cta > * {
	position: relative;
}

.side-card--cta__icon {
	display: inline-flex;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.09);
	color: #aeb3f5;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.9rem;
}

.side-card--cta__icon svg {
	width: 26px;
	height: 26px;
}

.side-card--cta h3 {
	color: #fff;
	font-size: 1.05rem;
}

.side-card--cta p {
	font-size: 0.88rem;
	margin-bottom: 1.1rem;
}

/* =============================================================
   MAGAZINE SPREAD (Newsroom page 1)
   ============================================================= */
.mag-spread {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 1.4rem;
	margin-bottom: 2.6rem;
}

.mag-lead {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 420px;
	display: flex;
}

.mag-lead__media {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--c-primary-soft);
}

.mag-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.mag-lead:hover .mag-lead__media img {
	transform: scale(1.05);
}

.mag-lead__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 20, 43, 0) 25%, rgba(18, 20, 43, 0.55) 62%, rgba(18, 20, 43, 0.92) 100%);
}

.mag-lead__overlay {
	position: absolute;
	inset: auto 0 0;
	padding: 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
}

.mag-lead__overlay .cat-badge {
	background: var(--grad);
	color: #fff;
}

.mag-lead__title {
	color: #fff;
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	margin: 0;
	line-height: 1.3;
}

.mag-lead:hover .mag-lead__title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.mag-lead__meta {
	display: flex;
	gap: 0.5rem;
	color: #c9cbe3;
	font-size: 0.85rem;
}

.mag-side {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.mag-mini {
	flex: 1;
	display: flex;
	gap: 1rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.mag-mini:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.mag-mini__media {
	flex: 0 0 40%;
	background: var(--c-primary-soft);
	overflow: hidden;
}

.mag-mini__media img,
.mag-mini__media .thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mag-mini__body {
	padding-block: 1rem;
	padding-inline: 1.1rem 0.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	justify-content: center;
}

.mag-mini__title {
	font-size: 0.98rem;
	margin: 0;
	line-height: 1.35;
}

.mag-mini__title a {
	color: var(--c-ink);
}

.mag-mini__title a:hover {
	color: var(--c-primary);
}

.mag-mini__date {
	font-size: 0.78rem;
	color: var(--c-muted);
}

/* =============================================================
   SINGLE ARTICLE
   ============================================================= */
.article-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
	padding: clamp(2.6rem, 6vw, 4rem) 0;
}

.article-hero__inner {
	position: relative;
	max-width: 860px;
}

.article-hero__title {
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	letter-spacing: 0;
	margin: 0.8rem 0;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	color: var(--c-muted);
	font-size: 0.9rem;
}

.post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.post-meta .i {
	color: var(--c-primary);
}

.article__media {
	margin: 0 0 1.8rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.article__footer {
	margin-top: 2.2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag-row a {
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	color: var(--c-ink-2);
	font-size: 0.8rem;
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	transition: all 0.2s ease;
}

.tag-row a:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

.share-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.share-row__label {
	font-weight: 700;
	font-family: var(--font-head);
	font-size: 0.88rem;
	color: var(--c-ink);
}

.share-btn {
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--c-ink-2);
	transition: all 0.25s var(--ease);
}

.share-btn:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	transform: translateY(-2px);
}

.related {
	margin-top: 3rem;
}

/* Entry content typography */
.entry-content {
	font-size: 1.03rem;
}

.entry-content h2 {
	font-size: 1.6rem;
	margin-top: 1.8em;
}

.entry-content h3 {
	font-size: 1.3rem;
	margin-top: 1.6em;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.4rem;
	margin-bottom: 1.2em;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content blockquote {
	margin: 1.6em 0;
	padding: 1.2rem 1.5rem;
	border-inline-start: 4px solid var(--c-primary);
	background: var(--c-primary-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: var(--c-ink);
}

.entry-content img {
	border-radius: var(--radius);
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	display: block;
	overflow-x: auto;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--c-line);
	padding: 0.65rem 0.9rem;
	text-align: start;
}

.entry-content th {
	background: var(--c-bg-soft);
	font-family: var(--font-head);
}

/* =============================================================
   PRICING PAGE
   ============================================================= */
.price-hero {
	padding-top: clamp(1.8rem, 4vw, 3.6rem);
	padding-bottom: 0;
}

.price-card {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	background: var(--c-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: #fff;
	position: relative;
}

.price-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(560px 300px at 0% 0%, rgba(95, 104, 231, 0.5), transparent 70%);
	pointer-events: none;
}

.price-card__left {
	position: relative;
	padding: clamp(2rem, 5vw, 3.2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	justify-content: center;
}

.price-card__badge {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #c9cbe3;
}

.price-card__amount {
	display: flex;
	align-items: flex-start;
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1;
}

.price-card__currency {
	font-size: 1.8rem;
	margin-top: 0.5rem;
	color: #aeb3f5;
}

.price-card__value {
	font-size: clamp(3.6rem, 9vw, 5.4rem);
	background: linear-gradient(120deg, #fff, #aeb3f5);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.price-card__note {
	color: #c9cbe3;
	font-size: 0.95rem;
	margin: 0;
}

.price-card__right {
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.09);
	padding: clamp(2rem, 5vw, 3.2rem);
}

.price-card__ftitle {
	color: #fff;
	font-size: 1.15rem;
	margin-bottom: 1.2rem;
}

.check-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.8rem;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	color: #dcdef2;
	font-size: 0.95rem;
}

.check-ic {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--grad);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-top: 0.05rem;
}

.check-ic svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Regions */
.region-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
}

.region-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease;
}

.region-card:hover {
	transform: translateY(-6px);
	border-color: rgba(95, 104, 231, 0.4);
	box-shadow: var(--shadow-md);
}

.region-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s var(--ease), background 0.3s ease, color 0.3s ease;
}

.region-card__icon svg {
	width: 28px;
	height: 28px;
}

.region-card:hover .region-card__icon {
	background: var(--grad);
	color: #fff;
	transform: rotate(8deg) scale(1.08);
}

.region-card__name {
	font-size: 1.02rem;
	margin: 0;
}

.region-card__price {
	font-family: var(--font-head);
	font-weight: 800;
	color: var(--c-primary);
	font-size: 1.1rem;
}

.region-card__price span {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--c-muted);
}

.region-card__buy {
	margin-top: 0.4rem;
}

/* Add-ons */
.addons {
	background: var(--c-bg-soft);
}

.addon-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.addon-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.8rem 1.6rem;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.addon-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.addon-card__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
}

.addon-card__icon svg {
	width: 27px;
	height: 27px;
}

.addon-card h3 {
	font-size: 1.08rem;
	margin-bottom: 0.3rem;
}

.addon-card__price {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--c-primary);
	margin-bottom: 0.6rem;
}

.addon-card__price span {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--c-muted);
}

.addon-card p {
	font-size: 0.92rem;
	color: var(--c-muted);
	margin: 0;
}

/* Payment notes */
.payment-notes {
	padding-top: 0;
}

.notes-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	box-shadow: var(--shadow-sm);
}

.notes-card h3 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.05rem;
}

.notes-card h3 .i {
	color: var(--c-primary);
}

.pay-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pay-badge {
	border: 1.5px solid var(--c-line);
	border-radius: 10px;
	padding: 0.5rem 1rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--c-ink);
	background: var(--c-bg-soft);
	transition: all 0.25s var(--ease);
}

.pay-badge:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
}

.fine-print {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	color: var(--c-muted);
	font-size: 0.92rem;
}

.fine-print li {
	padding-inline-start: 1.2rem;
	position: relative;
}

.fine-print li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-primary);
}

/* =============================================================
   SPLIT SECTION (About)
   ============================================================= */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

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

/* =============================================================
   CONTACT PAGE
   ============================================================= */
.contact-layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 2.4rem;
	align-items: stretch;
}

.contact-cards {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

/* The form fills the same height as the details beside it: the message
   field takes whatever room is left, so both columns end on one line. */
.contact-form-wrap {
	display: flex;
	flex-direction: column;
}

.contact-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* The form is a flex column now, so the submit button keeps its own width
   instead of stretching across the card. */
.contact-form > button[type="submit"] {
	align-self: flex-start;
}

.form-field--grow {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 190px;
}

.form-field--grow textarea {
	flex: 1;
	min-height: 150px;
}

@media (max-width: 900px) {
	.form-field--grow {
		flex: none;
		min-height: 0;
	}

	.form-field--grow textarea {
		min-height: 160px;
	}
}

.contact-card {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.contact-card__icon {
	display: inline-flex;
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 0.6rem;
}

.contact-card__icon svg {
	width: 24px;
	height: 24px;
}

.contact-card h3 {
	font-size: 1rem;
	margin-bottom: 0.2rem;
}

.contact-card a,
.contact-card span {
	color: var(--c-ink-2);
	font-size: 0.94rem;
}

.contact-card a:hover {
	color: var(--c-primary);
}

.contact-form-wrap {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: clamp(1.6rem, 4vw, 2.4rem);
	box-shadow: var(--shadow-sm);
}

.contact-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.1rem;
}

.form-field label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.86rem;
	color: var(--c-ink);
}

.form-field input,
.form-field select,
.form-field textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	font: inherit;
	color: var(--c-ink);
	background: var(--c-bg-soft);
	border: 1.5px solid var(--c-line);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	outline: none;
	width: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--c-primary);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(95, 104, 231, 0.14);
}

.form-field textarea {
	resize: vertical;
	min-height: 130px;
}

.hp-field {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.form-notice {
	border-radius: 12px;
	padding: 0.9rem 1.2rem;
	margin-bottom: 1.2rem;
	font-weight: 500;
}

.form-notice--success {
	background: #e8f8ef;
	color: #157347;
	border: 1px solid #b8e6cd;
}

.form-notice--error {
	background: #fdecec;
	color: #b02a37;
	border: 1px solid #f5c2c7;
}

/* =============================================================
   PAGINATION / NAVIGATION
   ============================================================= */
.pagination,
.navigation.pagination {
	margin-top: 2.6rem;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.nav-links .page-numbers {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.9rem;
	border: 1.5px solid var(--c-line);
	border-radius: 12px;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 0.92rem;
	transition: all 0.25s var(--ease);
	background: #fff;
}

.nav-links .page-numbers:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
	transform: translateY(-2px);
}

.nav-links .page-numbers.current {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.nav-links .page-numbers.dots {
	border: 0;
	background: transparent;
}

/* =============================================================
   COMMENTS
   ============================================================= */
.comments-area {
	margin-top: 3rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: clamp(1.4rem, 4vw, 2.2rem);
}

.comments-title {
	font-size: 1.3rem;
}

.comment-list {
	list-style: none;
	margin: 0 0 1.5rem;
}

.comment-list .comment {
	border-bottom: 1px solid var(--c-line);
	padding: 1.1rem 0;
}

.comment-list .children {
	list-style: none;
	padding-inline-start: 2rem;
}

.comment-author img {
	border-radius: 50%;
	margin-inline-end: 0.6rem;
}

.comment-metadata {
	font-size: 0.8rem;
}

.comment-form label {
	display: block;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.86rem;
	margin-bottom: 0.3rem;
}

.comment-form p {
	margin-bottom: 1rem;
}

.comment-form .submit {
	background: var(--grad);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-head);
	font-weight: 600;
	padding: 0.9rem 1.7rem;
	cursor: pointer;
	box-shadow: var(--shadow-brand);
	transition: transform 0.25s var(--ease);
}

.comment-form .submit:hover {
	transform: translateY(-2px);
}

/* =============================================================
   EMPTY STATE
   ============================================================= */
.no-results {
	text-align: center;
	background: #fff;
	border: 1px dashed var(--c-line);
	border-radius: var(--radius-lg);
	padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem);
}

.no-results__icon {
	display: inline-flex;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
}

.no-results__icon svg {
	width: 32px;
	height: 32px;
}

.no-results .search-form {
	max-width: 480px;
	margin: 1.4rem auto 0;
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
	position: relative;
	background: var(--c-dark);
	color: #b9bcd8;
	padding: clamp(3rem, 7vw, 4.5rem) 0 0;
	overflow: hidden;
}

.footer-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(700px 320px at 10% 0%, rgba(95, 104, 231, 0.22), transparent 70%), radial-gradient(600px 300px at 95% 100%, rgba(125, 108, 240, 0.16), transparent 70%);
	pointer-events: none;
}

.footer-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 0.8fr 1.2fr 1fr;
	gap: 2.4rem;
	padding-bottom: 2.6rem;
}

.footer-logo {
	display: inline-flex;
	background: #fff;
	border-radius: 14px;
	padding: 0.55rem 0.9rem;
	margin-bottom: 1.1rem;
}

.footer-logo img {
	max-height: 52px;
	width: auto;
}

.footer-about {
	font-size: 0.92rem;
	margin-bottom: 1.2rem;
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

@media (max-width: 900px) {
	.footer-about {
		text-align: start;
		hyphens: none;
	}
}

.footer-title {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 1.1rem;
	position: relative;
	padding-bottom: 0.6rem;
}

.footer-title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--grad);
}

.footer-menu,
.site-footer .footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-menu a {
	color: #b9bcd8;
	font-size: 0.92rem;
	position: relative;
	transition: color 0.2s ease, padding-inline-start 0.25s var(--ease);
}

.footer-menu a:hover {
	color: #fff;
	padding-inline-start: 0.5rem;
}

.footer-news li {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
	padding-bottom: 0.55rem;
}

.footer-news li:last-child {
	border-bottom: 0;
}

.footer-news a {
	color: #d4d6ee;
	font-size: 0.9rem;
	line-height: 1.4;
}

.footer-news a:hover {
	color: #fff;
}

.footer-news time {
	font-size: 0.76rem;
	color: #8489b3;
}

.footer-contact li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.92rem;
}

.footer-contact .i {
	color: var(--c-primary);
	flex: none;
}

.footer-contact a {
	color: #b9bcd8;
}

.footer-contact a:hover {
	color: #fff;
}

.footer-bottom {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	padding: 1.2rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.footer-bottom p {
	margin: 0;
}

.footer-bottom__nav {
	display: flex;
	gap: 1.2rem;
}

.footer-bottom__nav a {
	color: #b9bcd8;
}

.footer-bottom__nav a:hover {
	color: #fff;
}

/* Back to top */
.back-to-top {
	position: fixed;
	inset-inline-end: 1.4rem;
	bottom: 1.4rem;
	z-index: 90;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	border: 0;
	background: var(--grad);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-brand);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all 0.35s var(--ease);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.back-to-top:hover {
	transform: translateY(-3px);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
	.feature-grid,
	.feature-grid--three,
	.addon-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.region-grid {
		grid-template-columns: repeat(3, 1fr);
	}

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

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

	.newsroom__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

@media (max-width: 900px) {
	.hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hero__actions,
	.hero__points {
		justify-content: center;
	}

	.hero__visual {
		margin-top: 1.5rem;
	}

	.split,
	.price-card,
	.contact-layout,
	.notes-card {
		grid-template-columns: 1fr;
	}

	.price-card__right {
		border-inline-start: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.09);
	}

	.contact-cards {
		position: static;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.newsroom__layout {
		grid-template-columns: 1fr;
	}

	.sidebar-sticky {
		position: static;
	}

	.mag-spread {
		grid-template-columns: 1fr;
	}

	.mag-lead {
		min-height: 340px;
	}

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

	/* --- Mobile nav --- */
	.nav-toggle {
		display: inline-flex;
	}

	/* The masthead's backdrop-filter would otherwise become the containing
	   block for this fixed panel, trapping it inside the header. */
	.masthead {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: #fff;
	}

	.main-nav {
		position: fixed;
		top: 0;
		inset-inline-end: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: #fff;
		box-shadow: -18px 0 50px rgba(23, 26, 51, 0.18);
		/* Clears the topbar too until it scrolls away, then tightens up. */
		padding: calc(var(--topbar-h) + var(--header-h) + 0.9rem) 1.2rem 1.6rem;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.4s var(--ease), visibility 0s 0.4s;
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 99;
	}

	.masthead.is-scrolled .main-nav {
		padding-top: calc(var(--header-h) + 0.9rem);
	}

	.main-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.4s var(--ease), visibility 0s 0s;
	}

	.main-nav__list,
	.main-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0.2rem;
	}

	.main-nav a {
		padding: 0.85rem 0.9rem;
		font-size: 1rem;
		border-radius: 12px;
	}

	.main-nav a:hover {
		background: var(--c-primary-soft);
	}

	.main-nav > ul > li > a::after,
	.main-nav__list > li > a::after {
		display: none;
	}

	.main-nav li ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0;
		padding-inline-start: 1rem;
		min-width: 0;
	}

	.masthead__cta {
		display: none;
	}

	.topbar__link--md,
	.topbar__tag,
	.lang-switch--topbar {
		display: none;
	}

	.lang-switch--nav {
		display: flex;
	}
}

@media (max-width: 640px) {
	.news-grid,
	.news-grid--two,
	.news-grid--three,
	.feature-grid,
	.feature-grid--three,
	.addon-grid,
	.steps,
	.contact-form .form-row,
	.contact-cards {
		grid-template-columns: 1fr;
	}

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

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

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.topbar__inner {
		justify-content: center;
	}

	.topbar__right {
		display: none;
	}

	/* Keep the two secondary releases compact on phones: a small
	   thumbnail beside the headline instead of a full width image. */
	.mag-mini {
		flex-direction: row;
		gap: 0.85rem;
	}

	.mag-mini__media {
		flex: 0 0 34%;
		aspect-ratio: auto;
	}

	.mag-mini__body {
		padding-block: 0.85rem;
		padding-inline: 0.9rem 0.1rem;
	}

	.mag-mini__title {
		font-size: 0.95rem;
	}

	.mag-mini__body {
		padding: 0 1.1rem 1.1rem;
	}

	.timeline::before {
		inset-inline-start: 22px;
	}

	.timeline__num {
		width: 44px;
		height: 44px;
		font-size: 0.85rem;
	}

	.timeline__item {
		padding-inline-start: 3.8rem;
	}

	.float-chip--2 {
		inset-inline-start: 0;
	}

	/* The globe is too narrow on phones for two chips side by side, so
	   this one drops to the free space on the left. */
	.float-chip--4 {
		top: 32%;
		inset-inline-start: 0;
	}

	.search-form__submit {
		display: none;
	}
}

@media (max-width: 400px) {
	.region-grid {
		grid-template-columns: 1fr;
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr;
		gap: 0.6rem;
	}
}

/* =============================================================
   v1.1 - NEWSROOM MAGAZINE REDESIGN + ARTICLE POLISH
   ============================================================= */

/* ---------- Line-clamp utilities (uniform card heights) ---------- */
.clamp-2,
.clamp-3,
.clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* Excerpts everywhere: exactly 2 lines. Titles on cards: max 3 lines. */
.news-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.news-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* Related news: uniform 4-line titles, same size */
.news-card--related .news-card__title {
	-webkit-line-clamp: 4;
	font-size: 0.98rem;
	line-height: 1.45;
	min-height: calc(0.98rem * 1.45 * 2);
}

/* ---------- Newsroom title strip ---------- */
.newsroom-strip {
	border-bottom: 1px solid var(--c-line);
	background: #fff;
}

.newsroom-strip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	flex-wrap: wrap;
}

.newsroom-strip__title {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 1.45rem;
	margin: 0;
}

.newsroom-strip__tag {
	color: var(--c-muted);
	font-size: 0.88rem;
}

/* ---------- Hero slider ---------- */
.hero-slider {
	padding-top: 1.6rem;
}

.hero-slider .slider {
	position: relative;
}

/* Bulletproof: each slide must occupy exactly one full viewport width. */
.hero-slider .slider__track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
}

.hero-slider .slider__track > .hero-slide {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}

.hero-slide__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7;
	min-height: 340px;
	overflow: hidden;
	background: var(--c-dark);
}

.hero-slide__media img,
.hero-slide__media .thumb-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 6s ease;
}

.hero-slide__media:hover img {
	transform: scale(1.05);
}

.hero-slide__shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(18, 20, 43, 0.05) 25%, rgba(18, 20, 43, 0.6) 62%, rgba(18, 20, 43, 0.95) 100%);
	pointer-events: none;
	z-index: 1;
}

.hero-slide__overlay {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	padding: clamp(1.4rem, 4vw, 2.4rem);
	padding-inline-end: clamp(1.4rem, 18vw, 15rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	z-index: 2;
}

.hero-slide__overlay .cat-badge {
	background: var(--grad);
	color: #fff;
}

.hero-slide__title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.2rem, 2.6vw, 1.75rem);
	line-height: 1.3;
	margin: 0;
}

.hero-slide__title a {
	color: #fff;
}

.hero-slide__title a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.hero-slide__excerpt {
	color: #d4d6ee;
	font-size: 0.95rem;
	margin: 0;
	max-width: 62ch;
}

.hero-slide__meta {
	display: flex;
	gap: 0.5rem;
	color: #a9adcf;
	font-size: 0.84rem;
}

.slider__nav--overlay {
	position: absolute;
	inset-inline-end: 1.3rem;
	bottom: 1.3rem;
	margin: 0;
	z-index: 3;
	gap: 0.7rem;
}

.slider__nav--overlay .slider__btn {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
	backdrop-filter: blur(6px);
}

.slider__nav--overlay .slider__btn:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.slider__nav--overlay .slider__dot {
	background: rgba(255, 255, 255, 0.35);
}

.slider__nav--overlay .slider__dot.is-active {
	background: var(--grad);
}

.hero-slider .slider__viewport {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* ---------- Category sections: shared chrome ---------- */
.cat-section {
	padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
}

.cat-section--alt {
	background: var(--c-bg-soft);
}

.cat-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.6rem;
	border-bottom: 2px solid var(--c-line);
	padding-bottom: 0.8rem;
	position: relative;
}

.cat-section__head::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -2px;
	width: 110px;
	height: 2px;
	background: var(--grad);
}

.cat-section__title {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	margin: 0;
}

.cat-section__marker {
	width: 9px;
	height: 24px;
	border-radius: 4px;
	background: var(--grad);
	flex: none;
}

.cat-section__more {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0;
	word-spacing: 0.08em;
	color: var(--c-ink-2);
	white-space: nowrap;
}

.cat-section__more:hover {
	color: var(--c-primary);
}

.cat-section__more .i {
	transition: transform 0.25s var(--ease);
}

.cat-section__more:hover .i {
	transform: translateX(3px);
}

/* Shared overlay pieces (used by split-feature and hero slides) */
.ov-shade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(18, 20, 43, 0) 28%, rgba(18, 20, 43, 0.58) 64%, rgba(18, 20, 43, 0.94) 100%);
	pointer-events: none;
	z-index: 1;
}

.ov-body {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	z-index: 2;
}

.ov-title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	line-height: 1.32;
	margin: 0;
}

.ov-title a {
	color: #fff;
}

.ov-title a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.ov-meta {
	display: flex;
	gap: 0.45rem;
	color: #c9cbe3;
	font-size: 0.8rem;
}

/* Shared media helper: image fills its box */
.split-feature__media,
.tile__media,
.show-card__media,
.stack-hero__media,
.row-item__media,
.rank-item__media,
.hero-slide__media {
	display: block;
	overflow: hidden;
	background: var(--c-primary-soft);
	position: relative;
}

.split-feature__media img,
.split-feature__media .thumb-fallback,
.tile__media img,
.tile__media .thumb-fallback,
.show-card__media img,
.show-card__media .thumb-fallback,
.stack-hero__media img,
.stack-hero__media .thumb-fallback,
.row-item__media img,
.row-item__media .thumb-fallback,
.rank-item__media img,
.rank-item__media .thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

/* =========================================================
   LAYOUT 1 & 5 - SPLIT (spotlight = feature left, mirror = feature right)
   ========================================================= */
.lay-split {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: 1.8rem;
	align-items: start;
}

.cat-section--mirror .lay-split .split-feature {
	order: 2;
}

.split-feature {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.split-feature__media {
	aspect-ratio: 16 / 11;
	min-height: 300px;
}

.split-feature:hover .split-feature__media img {
	transform: scale(1.05);
}

.split-list {
	display: flex;
	flex-direction: column;
}

.row-item {
	display: flex;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px dashed var(--c-line);
}

.row-item:first-child {
	padding-top: 0;
}

.row-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.row-item__media {
	flex: 0 0 122px;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}

.row-item:hover .row-item__media img {
	transform: scale(1.07);
}

.row-item__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
}

.row-item__title {
	font-size: 0.96rem;
	line-height: 1.4;
	margin: 0;
}

.row-item__title a {
	color: var(--c-ink);
}

.row-item__title a:hover {
	color: var(--c-primary);
}

.row-item__excerpt {
	font-size: 0.85rem;
	color: var(--c-muted);
	margin: 0;
}

.row-item__date {
	font-size: 0.75rem;
	color: var(--c-muted);
	margin-top: auto;
}

/* =========================================================
   LAYOUT 2 - MOSAIC (lead tile spans 2 cols, 4 cards beside)
   ========================================================= */
.lay-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.3rem;
}

.tile {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease;
}

.cat-section--alt .tile {
	background: #fff;
}

.tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.35);
}

.tile--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.tile__media {
	aspect-ratio: 16 / 10;
}

.tile--lead .tile__media {
	aspect-ratio: 16 / 9;
	flex: 1;
	min-height: 240px;
}

.tile:hover .tile__media img {
	transform: scale(1.06);
}

.tile__body {
	padding: 1rem 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: none;
}

.tile__title {
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
}

.tile--lead .tile__title {
	font-size: 1.25rem;
	line-height: 1.32;
}

.tile__title a {
	color: var(--c-ink);
}

.tile__title a:hover {
	color: var(--c-primary);
}

.tile__excerpt {
	font-size: 0.9rem;
	color: var(--c-muted);
	margin: 0;
}

.tile__date {
	font-size: 0.75rem;
	color: var(--c-muted);
	margin-top: auto;
}

/* =========================================================
   LAYOUT 3 - RANKED (numbered two-column list, editorial feel)
   ========================================================= */
.lay-ranked {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2.4rem;
	margin: 0;
	padding: 0;
	counter-reset: rank;
}

.rank-item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding: 1rem 0;
	border-bottom: 1px solid var(--c-line);
}

.rank-item:nth-last-child(-n+2) {
	border-bottom: 0;
}

.rank-item__num {
	flex: none;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	width: 2.1rem;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-top: 0.1rem;
}

.rank-item__media {
	flex: 0 0 74px;
	height: 74px;
	border-radius: 12px;
}

.rank-item:hover .rank-item__media img {
	transform: scale(1.08);
}

.rank-item__media .thumb-fallback svg {
	width: 28px;
	height: 28px;
}

.rank-item__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rank-item__title {
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0;
}

.rank-item__title a {
	color: var(--c-ink);
}

.rank-item__title a:hover {
	color: var(--c-primary);
}

.rank-item__excerpt {
	font-size: 0.84rem;
	color: var(--c-muted);
	margin: 0;
}

.rank-item__date {
	font-size: 0.74rem;
	color: var(--c-muted);
}

/* =========================================================
   LAYOUT 4 - SHOWCASE (five equal cards in a row)
   ========================================================= */
.lay-showcase {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
}

.show-card {
	display: flex;
	flex-direction: column;
	transition: transform 0.35s var(--ease);
}

.show-card:hover {
	transform: translateY(-5px);
}

.show-card__media {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	box-shadow: var(--shadow-sm);
}

.show-card:hover .show-card__media img {
	transform: scale(1.07);
}

.show-card__num {
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 34px;
	height: 34px;
	border-radius: 0 14px 0 14px;
	background: var(--grad);
	color: #fff;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.show-card__body {
	padding: 0.85rem 0.15rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
}

.show-card__title {
	font-size: 0.93rem;
	line-height: 1.42;
	margin: 0;
}

.show-card__title a {
	color: var(--c-ink);
}

.show-card__title a:hover {
	color: var(--c-primary);
}

.show-card__date {
	font-size: 0.75rem;
	color: var(--c-muted);
	margin-top: auto;
}

/* =========================================================
   LAYOUT 6 - STACK (wide hero card + 4 text briefs)
   ========================================================= */
.lay-stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.stack-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow 0.35s var(--ease);
}

.stack-hero:hover {
	box-shadow: var(--shadow-md);
}

.stack-hero__media {
	aspect-ratio: 16 / 9;
	min-height: 250px;
}

.stack-hero:hover .stack-hero__media img {
	transform: scale(1.04);
}

.stack-hero__body {
	padding: clamp(1.2rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	justify-content: center;
}

.stack-hero__title {
	font-size: clamp(1.1rem, 2.1vw, 1.4rem);
	line-height: 1.32;
	margin: 0;
}

.stack-hero__title a {
	color: var(--c-ink);
}

.stack-hero__title a:hover {
	color: var(--c-primary);
}

.stack-hero__excerpt {
	font-size: 0.94rem;
	color: var(--c-muted);
	margin: 0;
}

.stack-hero__meta {
	display: flex;
	gap: 0.45rem;
	font-size: 0.8rem;
	color: var(--c-muted);
}

.stack-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.brief {
	display: flex;
	gap: 0.8rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 1rem 1.1rem;
	transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s var(--ease);
}

.brief:hover {
	transform: translateY(-4px);
	border-color: rgba(95, 104, 231, 0.4);
	box-shadow: var(--shadow-sm);
}

.brief__bar {
	flex: none;
	width: 4px;
	border-radius: 4px;
	background: var(--grad);
}

.brief__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.brief__title {
	font-size: 0.93rem;
	line-height: 1.4;
	margin: 0;
}

.brief__title a {
	color: var(--c-ink);
}

.brief__title a:hover {
	color: var(--c-primary);
}

.brief__excerpt {
	font-size: 0.84rem;
	color: var(--c-muted);
	margin: 0;
}

.brief__date {
	font-size: 0.74rem;
	color: var(--c-muted);
	margin-top: auto;
}

/* =========================================================
   LAYOUT RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
	.lay-mosaic {
		grid-template-columns: repeat(2, 1fr);
	}

	.tile--lead {
		grid-column: span 2;
		grid-row: auto;
	}

	.lay-showcase {
		grid-template-columns: repeat(3, 1fr);
	}

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

	.row-item__media {
		flex-basis: 108px;
	}
}

@media (max-width: 900px) {
	.lay-split,
	.stack-hero {
		grid-template-columns: 1fr;
	}

	.cat-section--mirror .lay-split .split-feature {
		order: 0;
	}

	.split-feature__media {
		min-height: 260px;
	}

	.lay-ranked {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.rank-item:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--c-line);
	}

	.rank-item:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 640px) {
	.lay-mosaic,
	.lay-showcase,
	.stack-grid {
		grid-template-columns: 1fr;
	}

	.tile--lead {
		grid-column: span 1;
	}

	.row-item__media {
		flex-basis: 96px;
	}

	.row-item__excerpt,
	.rank-item__excerpt {
		display: none;
	}

	.rank-item__media {
		flex-basis: 62px;
		height: 62px;
	}
}

/* ---------- Reading progress bar ---------- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	background: transparent;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--grad);
	transition: width 0.1s linear;
}

/* ---------- Article header (left-aligned) ---------- */
.article-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.8rem;
	margin-bottom: 2.2rem;
	padding-bottom: 0.4rem;
}

.article-head__title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.45;
	margin: 0;
	text-align: start;
}

.article-head__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.article-head__rule {
	width: 88px;
	height: 4px;
	border-radius: 4px;
	background: var(--grad);
}

/* ---------- Entry content typography (refined) ---------- */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.85;
	color: #3c405c;
}

.entry-content > p {
	margin-bottom: 1.35em;
}

.single-post-page .entry-content > p:first-of-type::first-letter {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 3.2em;
	line-height: 0.85;
	float: inline-start;
	padding: 0.08em 0.14em 0 0;
	color: var(--c-primary);
}

.entry-content h2 {
	font-size: 1.55rem;
	margin: 1.9em 0 0.7em;
	padding-inline-start: 0.85rem;
	position: relative;
}

.entry-content h2::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 4px;
	background: var(--grad);
}

.entry-content h3 {
	font-size: 1.25rem;
	margin: 1.7em 0 0.6em;
}

.entry-content h4 {
	font-size: 1.08rem;
	margin: 1.5em 0 0.5em;
}

.entry-content strong,
.entry-content b {
	color: var(--c-ink);
	font-weight: 700;
}

.entry-content em,
.entry-content i {
	color: var(--c-ink-2);
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.5rem;
	margin: 0 0 1.35em;
}

.entry-content ul li {
	list-style: none;
	position: relative;
	padding-inline-start: 0.4rem;
	margin-bottom: 0.5em;
}

.entry-content ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.05rem;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--c-primary);
	transform: rotate(45deg);
}

.entry-content ol li {
	margin-bottom: 0.5em;
	padding-inline-start: 0.3rem;
}

.entry-content ol li::marker {
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--c-primary);
}

.entry-content a {
	color: var(--c-primary);
	text-decoration: underline;
	text-decoration-color: rgba(95, 104, 231, 0.35);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

.entry-content a:hover {
	text-decoration-color: var(--c-primary);
}

.entry-content hr {
	border: 0;
	height: 1px;
	background: var(--c-line);
	margin: 2.2em 0;
}

.entry-content figure {
	margin: 1.8em 0;
}

/* WordPress stamps an inline width on classic caption figures
   (style="width: 1920px"), which drags a full-size image clean past the
   reading column. max-width is applied after width when the used width is
   worked out, so a plain 100% here beats the inline value without !important. */
.entry-content figure,
.entry-content .wp-caption,
.entry-content .wp-block-image {
	max-width: 100%;
	height: auto;
}

.entry-content figure img,
.entry-content .wp-caption img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.entry-content .aligncenter,
.entry-content .alignnone,
.entry-content .alignwide,
.entry-content .alignfull {
	display: block;
	margin-inline: auto;
}

/* The editor's left and right stay literal, as WordPress means them. */
.entry-content .alignleft {
	float: left;
	margin: 0.4em 1.4em 1em 0;
	max-width: 50%;
}

.entry-content .alignright {
	float: right;
	margin: 0.4em 0 1em 1.4em;
	max-width: 50%;
}

.entry-content .wp-caption-text {
	text-align: center;
	font-size: 0.85rem;
	color: var(--c-muted);
	margin-top: 0.6em;
}

.entry-content figcaption {
	text-align: center;
	font-size: 0.85rem;
	color: var(--c-muted);
	margin-top: 0.6em;
}

.entry-content code {
	background: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	border-radius: 6px;
	padding: 0.12em 0.4em;
	font-size: 0.9em;
	color: var(--c-primary-deep);
}

/* ---------- Sidebar: latest 7 articles ---------- */
.side-latest {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.side-latest__item {
	display: flex;
	gap: 0.85rem;
	padding: 0.65rem 0;
	border-bottom: 1px dashed var(--c-line);
}

.side-latest__item:first-child {
	padding-top: 0;
}

.side-latest__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.side-latest__media {
	flex: 0 0 58px;
	height: 58px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--c-primary-soft);
	display: block;
}

.side-latest__media img,
.side-latest__media .thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}

.side-latest__media .thumb-fallback svg {
	width: 26px;
	height: 26px;
}

.side-latest__item:hover .side-latest__media img {
	transform: scale(1.1);
}

.side-latest__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.side-latest__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--c-ink);
}

.side-latest__title:hover {
	color: var(--c-primary);
}

.side-latest__date {
	font-size: 0.75rem;
	color: var(--c-muted);
}

/* ---------- Sidebar: styled sections list ---------- */
.side-sections {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.side-section {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid var(--c-line);
	border-radius: 14px;
	background: #fff;
	transition: all 0.28s var(--ease);
}

.side-section__icon {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.28s var(--ease);
}

.side-section__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.side-section__name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--c-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.28s ease;
}

.side-section__count {
	flex: none;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.12rem 0.55rem;
	transition: all 0.28s ease;
}

.side-section__arrow {
	flex: none;
	color: var(--c-muted);
	transition: all 0.28s var(--ease);
}

.side-section:hover {
	background: var(--grad);
	border-color: transparent;
	transform: translateX(4px);
	box-shadow: var(--shadow-brand);
}

.side-section:hover .side-section__icon {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.side-section:hover .side-section__name {
	color: #fff;
}

.side-section:hover .side-section__count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.side-section:hover .side-section__arrow {
	color: #fff;
	transform: translateX(2px);
}

/* ---------- v1.1 responsive ---------- */
@media (max-width: 1080px) {
	.cat-mini__media {
		flex-basis: 110px;
	}
}

@media (max-width: 900px) {
	.cat-section__grid {
		grid-template-columns: 1fr;
	}

	.cat-section--alt .cat-feature {
		order: 0;
	}

	.cat-feature__media {
		min-height: 260px;
	}

	.hero-slide__media {
		aspect-ratio: 16 / 9;
		min-height: 300px;
	}

	.hero-slide__overlay {
		padding-inline-end: clamp(1.4rem, 4vw, 2.4rem);
		padding-bottom: 4.4rem;
	}

	.newsroom-strip__inner {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 640px) {
	.hero-slide__media {
		aspect-ratio: auto;
		min-height: 340px;
	}

	.hero-slide__excerpt {
		display: none;
	}

	.cat-mini__media {
		flex-basis: 96px;
	}

	.cat-mini__excerpt {
		display: none;
	}

	.slider__nav--overlay {
		right: 50%;
		transform: translateX(50%);
		bottom: 0.9rem;
	}

	.article-head__title {
		font-size: 1rem;
	}
}

/* =============================================================
   v1.4 - PARTNERS + MOTION SYSTEM
   ============================================================= */

/* ---------- Homepage logo marquee ---------- */
.partner-strip {
	padding-block: clamp(2rem, 4vw, 3rem);
	border-block: 1px solid var(--c-line);
	background: var(--c-bg-soft);
	overflow: hidden;
}

.partner-strip__label {
	text-align: center;
	font-family: var(--font-head);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 0 1.6rem;
}

.logo-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: logo-scroll 38s linear infinite;
}

.logo-marquee:hover .logo-marquee__track {
	animation-play-state: paused;
}

@keyframes logo-scroll {
	to { transform: translateX(-50%); }
}

.logo-marquee__item {
	flex: none;
	width: 190px;
	height: 84px;
	margin-inline: 0.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 1rem;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--c-line);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s ease;
}

.logo-marquee__item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

.logo-marquee__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.4);
}

.logo-marquee__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------- Partners page: logo wall ---------- */
.partner-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 1.4rem;
}

.partner-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	min-height: 190px;
	padding: 1.8rem 1.3rem 1.6rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s ease;
	transform-style: preserve-3d;
}

.partner-card:hover {
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.4);
}

/* Sheen sweep on hover */
.partner-card__sheen {
	position: absolute;
	top: -60%;
	left: -80%;
	width: 45%;
	height: 220%;
	background: linear-gradient(90deg, transparent, rgba(95, 104, 231, 0.16), transparent);
	transform: rotate(16deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.partner-card:hover .partner-card__sheen {
	opacity: 1;
	animation: partner-sheen 0.9s ease-out;
}

@keyframes partner-sheen {
	from { transform: translateX(0) rotate(16deg); }
	to { transform: translateX(420%) rotate(16deg); }
}

.partner-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 92px;
	margin-bottom: 0;
}

.partner-card__logo img {
	max-width: 84%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s var(--ease);
}

.partner-card:hover .partner-card__logo img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.05);
}

/* The wall is logos only now: the name lives in each image's alt text, and the
   visit prompt is the single piece of copy, revealed on hover. */
.partner-card__go {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.6rem;
	height: 1.1rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0;
	word-spacing: 0.09em;
	color: var(--c-primary);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s var(--ease);
}

.partner-card:hover .partner-card__go {
	opacity: 1;
	transform: none;
}

/* ---------- Motion: cursor spotlight on cards ---------- */
[data-spotlight] {
	position: relative;
	overflow: hidden;
}

[data-spotlight]::after {
	content: "";
	position: absolute;
	top: var(--spot-y, 50%);
	left: var(--spot-x, 50%);
	width: 320px;
	height: 320px;
	margin: -160px 0 0 -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(95, 104, 231, 0.13), transparent 65%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 0;
}

[data-spotlight]:hover::after {
	opacity: 1;
}

[data-spotlight] > * {
	position: relative;
	z-index: 1;
}

/* ---------- Motion: 3D tilt ---------- */
[data-tilt] {
	will-change: transform;
}

/* ---------- Motion: magnetic buttons ---------- */
[data-magnetic] {
	will-change: transform;
}

/* ---------- Motion: animated gradient border on the CTA card ---------- */
.cta-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(120deg, rgba(95, 104, 231, 0.95), rgba(174, 179, 245, 0.75), rgba(95, 104, 231, 0.95));
	background-size: 300% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: border-flow 6s linear infinite;
	pointer-events: none;
	z-index: 1;
}

@keyframes border-flow {
	to { background-position: 300% 0; }
}

/* ---------- Motion: Ken Burns on hero slides ---------- */
.hero-slide__media img {
	animation: ken-burns 18s ease-in-out infinite alternate;
}

@keyframes ken-burns {
	from { transform: scale(1); }
	to { transform: scale(1.07); }
}

/* ---------- Motion: shimmer across the gradient headline ---------- */
.grad-text {
	background: linear-gradient(100deg, #5f68e7 0%, #7d6cf0 25%, #a99bff 45%, #7d6cf0 65%, #4a52c9 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: text-shimmer 7s ease-in-out infinite;
}

@keyframes text-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ---------- Motion: icon float on stat tiles ---------- */
.stat:hover .stat__icon {
	animation: icon-pop 0.6s var(--ease);
	background: var(--grad);
	color: #fff;
	border-color: transparent;
}

@keyframes icon-pop {
	0% { transform: scale(1) rotate(0); }
	45% { transform: scale(1.14) rotate(-8deg); }
	100% { transform: scale(1) rotate(0); }
}

/* ---------- Motion: underline sweep on section "View All" ---------- */
.cat-section__more {
	position: relative;
}

.cat-section__more::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 100%;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transition: inset-inline-end 0.35s var(--ease);
}

.cat-section__more:hover::after {
	inset-inline-end: 0;
}

/* ---------- v1.4 responsive ---------- */
@media (max-width: 1080px) {
	.partner-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

	.logo-marquee__item {
		width: 156px;
		height: 72px;
		margin-inline: 0.6rem;
	}
}

@media (max-width: 460px) {
	.partner-card {
		min-height: 150px;
		padding: 1.4rem 0.9rem 1.2rem;
	}
}

/* =============================================================
   v1.5 - FOOTER MOTION
   ============================================================= */

/* Moving light line across the top edge of the footer */
.footer-topline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.07);
	z-index: 2;
}

.footer-topline::after {
	content: "";
	position: absolute;
	top: 0;
	left: -35%;
	width: 35%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--c-primary), #a99bff, var(--c-primary), transparent);
	animation: footer-line 7s ease-in-out infinite;
}

@keyframes footer-line {
	0% { left: -35%; }
	100% { left: 100%; }
}

/* Soft glow that follows the cursor across the footer */
.footer-cursor {
	position: absolute;
	top: var(--fy, 50%);
	left: var(--fx, 50%);
	width: 520px;
	height: 520px;
	margin: -260px 0 0 -260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(95, 104, 231, 0.18), transparent 62%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
	z-index: 0;
}

.site-footer:hover .footer-cursor {
	opacity: 1;
}

.site-footer > .container {
	position: relative;
	z-index: 3;
}

/* Footer logo: gentle float */
.footer-logo {
	animation: footer-logo-float 6s ease-in-out infinite alternate;
}

@keyframes footer-logo-float {
	from { transform: translateY(-3px); }
	to { transform: translateY(3px); }
}

/* Section titles: the underline bar sweeps wider on hover */
.footer-title::after {
	transition: width 0.4s var(--ease), background-position 0.4s ease;
	background-size: 200% 100%;
}

.footer-col:hover .footer-title::after {
	width: 76px;
}

/* Useful links: chevron slides in */
.footer-menu li {
	position: relative;
}

.footer-menu a {
	display: inline-block;
	padding-inline-start: 0;
}

.footer-menu a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 0;
	height: 1.5px;
	border-radius: 2px;
	background: var(--grad);
	transform: translateY(-50%);
	transition: width 0.3s var(--ease);
}

.footer-menu a:hover::before {
	width: 12px;
}

.footer-menu a:hover {
	padding-inline-start: 18px;
}

/* Latest news: accent bar grows, row lifts */
.footer-news li {
	position: relative;
	padding-inline-start: 0;
	transition: padding-inline-start 0.35s var(--ease);
}

.footer-news li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	bottom: 0.7em;
	width: 2px;
	border-radius: 2px;
	background: var(--grad);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.35s var(--ease);
}

.footer-news li:hover {
	padding-inline-start: 12px;
}

.footer-news li:hover::before {
	transform: scaleY(1);
}

/* Contact rows: icon badge fills on hover */
.footer-contact li {
	transition: transform 0.3s var(--ease);
}

.footer-contact li:hover {
	transform: translateX(4px);
}

.footer-contact .i {
	width: 30px;
	height: 30px;
	padding: 6px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-sizing: border-box;
	transition: background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease), border-color 0.3s ease;
}

.footer-contact li:hover .i {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
	transform: rotate(-8deg) scale(1.08);
}

/* Social buttons: lift with a glow ring */
.site-footer .social-btn {
	position: relative;
}

.site-footer .social-btn::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	bottom: -3px;
	left: -3px;
	border-radius: 11px;
	border: 1.5px solid var(--c-primary);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s ease, transform 0.35s var(--ease);
	pointer-events: none;
}

.site-footer .social-btn:hover::after {
	opacity: 1;
	transform: scale(1);
}

.site-footer .social-btn:hover {
	transform: translateY(-3px) scale(1.06);
}

/* Bottom bar links: underline sweep */
.footer-bottom__nav a {
	position: relative;
}

.footer-bottom__nav a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 100%;
	bottom: -3px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--grad);
	transition: inset-inline-end 0.32s var(--ease);
}

.footer-bottom__nav a:hover::after {
	inset-inline-end: 0;
}

/* Back to top: gentle bob while idle */
.back-to-top.is-visible {
	animation: btt-bob 2.6s ease-in-out infinite alternate;
}

@keyframes btt-bob {
	from { transform: translateY(0); }
	to { transform: translateY(-5px); }
}

.back-to-top.is-visible:hover {
	animation: none;
	transform: translateY(-3px) scale(1.06);
}

/* =============================================================
   v1.8 - SIGNAL MAP VISUAL + POLICY CARDS + LIGHT TICKER
   ============================================================= */

/* ---------- Editorial Policy cards with Lordicon ---------- */
.policy-card {
	text-align: start;
}

/* Bare icon, no plate behind it - centred above a centred heading. */
.policy-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: none;
	border-radius: 0;
	margin-bottom: 0.9rem;
	transition: transform 0.4s var(--ease);
}

.policy-card:hover .policy-card__icon {
	transform: translateY(-4px);
}

.policy-card__icon lord-icon {
	display: block;
}

/* Reserve the space before the custom element upgrades, so nothing jumps. */
.policy-card__icon lord-icon:not(:defined) {
	width: 96px;
	height: 96px;
}

.policy-card h3 {
	font-size: 1.08rem;
	margin-bottom: 0.7rem;
	text-align: center;
}

/* Justified body copy across policy cards */
.policy-card p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	line-height: 1.8;
}

@media (max-width: 640px) {
	.policy-card p {
		text-align: start;
		hyphens: none;
	}

	.policy-card__icon lord-icon {
		width: 80px !important;
		height: 80px !important;
	}
}

/* ---------- Light news ticker ---------- */
.ticker {
	background: #f1f2f8;
	border-block: 1px solid var(--c-line);
}

.ticker__item {
	color: var(--c-ink);
	font-weight: 500;
}

.ticker__item:hover {
	color: var(--c-primary);
}

.ticker__item::after {
	background: var(--c-primary);
	opacity: 0.55;
}

/* Short desktop screens (e.g. 1366x768): compress the hero just enough that
   the stats card still clears the fold, without touching taller displays. */
@media (min-width: 901px) and (max-height: 840px) {
	.hero {
		padding-top: clamp(1.1rem, 2.2vw, 2rem);
		padding-bottom: clamp(0.7rem, 1vw, 0.9rem);
	}

	.stats-band {
		padding-block: clamp(0.7rem, 1vw, 0.9rem) clamp(1.4rem, 2.2vw, 1.9rem);
	}

	.hero__badge {
		margin-bottom: 1rem;
	}

	.hero__title {
		margin-bottom: 1rem;
	}

	.hero__lead {
		line-height: 1.68;
		margin-bottom: 1.35rem;
	}

	.hero__actions {
		margin-bottom: 1.2rem;
	}

	.hero__points {
		gap: 0.5rem 1.5rem;
	}

	.stats-grid {
		padding: clamp(0.9rem, 1.8vw, 1.25rem);
	}

	.stat__icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0.35rem;
	}

	.stat__icon svg {
		width: 18px;
		height: 18px;
	}

	.globe {
		width: min(340px, 78vw);
	}

	.float-chip {
		font-size: 0.76rem;
		padding: 0.42rem 0.8rem;
	}
}

/* =============================================================
   v2.0 - FAQ PAGE
   ============================================================= */

/* ---------- Hero search ---------- */
.faq-search {
	position: relative;
	max-width: 560px;
	margin: 1.8rem auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.faq-search__box {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	background: #fff;
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	padding: 0.7rem 1.3rem;
	box-shadow: var(--shadow-sm);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-search__box:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 4px rgba(95, 104, 231, 0.14);
}

.faq-search__box .i {
	color: var(--c-muted);
	flex: none;
}

.faq-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--c-ink);
	outline: none;
}

.faq-search__count {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--c-muted);
	letter-spacing: 0;
	word-spacing: 0.05em;
}

/* ---------- Layout ---------- */
.faq-layout {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 2.6rem;
	align-items: start;
	padding-block: clamp(2.4rem, 5vw, 3.6rem);
}

.faq-rail {
	align-self: stretch;
	height: 100%;
	min-width: 0;
}

.faq-rail__sticky {
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--header-h) + 20px);
}

.faq-rail__title {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 1rem;
}

.faq-rail__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.faq-rail__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.7rem;
	border-radius: 12px;
	border: 1.5px solid transparent;
	color: var(--c-ink-2);
	transition: all 0.28s var(--ease);
}

.faq-rail__icon {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.28s var(--ease);
}

.faq-rail__icon svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.faq-rail__name {
	flex: 1;
	min-width: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.35;
}

.faq-rail__count {
	flex: none;
	background: var(--c-bg-soft);
	color: var(--c-muted);
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.1rem 0.5rem;
	transition: all 0.28s ease;
}

.faq-rail__link:hover,
.faq-rail__link.is-active {
	background: #fff;
	border-color: rgba(95, 104, 231, 0.35);
	color: var(--c-ink);
	box-shadow: var(--shadow-sm);
}

.faq-rail__link:hover .faq-rail__icon,
.faq-rail__link.is-active .faq-rail__icon {
	background: var(--grad);
	color: #fff;
}

.faq-rail__link.is-active .faq-rail__count {
	background: var(--c-primary-soft);
	color: var(--c-primary);
}

/* ---------- Groups ---------- */
.faq-group {
	scroll-margin-top: calc(var(--header-h) + 24px);
	margin-bottom: 2.6rem;
}

.faq-group:last-of-type {
	margin-bottom: 0;
}

.faq-group__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	margin: 0 0 1.1rem;
	padding-bottom: 0.8rem;
	border-bottom: 2px solid var(--c-line);
	position: relative;
}

.faq-group__title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -2px;
	width: 90px;
	height: 2px;
	background: var(--grad);
}

.faq-group__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.faq-group__icon svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Accordion ---------- */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.faq-item {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.28s ease, box-shadow 0.28s var(--ease);
}

.faq-item:hover {
	border-color: rgba(95, 104, 231, 0.35);
}

.faq-item.is-open {
	border-color: rgba(95, 104, 231, 0.45);
	box-shadow: var(--shadow-sm);
}

.faq-item__head {
	margin: 0;
	font-size: 1rem;
}

.faq-item__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 1.25rem;
	background: none;
	border: 0;
	text-align: start;
	cursor: pointer;
	font: inherit;
	color: var(--c-ink);
	transition: color 0.25s ease;
}

.faq-item__btn:hover,
.faq-item.is-open .faq-item__btn {
	color: var(--c-primary);
}

.faq-item__q {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.45;
}

/* Plus that rotates into a minus */
.faq-item__sign {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	transition: background 0.3s ease, transform 0.35s var(--ease);
}

.faq-item__sign::before,
.faq-item__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 2px;
	border-radius: 2px;
	background: var(--c-primary);
	transform: translate(-50%, -50%);
	transition: transform 0.35s var(--ease), background 0.3s ease;
}

.faq-item__sign::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-item__sign {
	background: var(--grad);
	transform: rotate(180deg);
}

.faq-item.is-open .faq-item__sign::before,
.faq-item.is-open .faq-item__sign::after {
	background: #fff;
}

.faq-item.is-open .faq-item__sign::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__panel {
	padding: 0 1.25rem 1.15rem;
}

.faq-item__panel p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--c-ink-2);
	text-align: justify;
	text-justify: inter-word;
	padding-top: 0.15rem;
	border-top: 1px dashed var(--c-line);
	padding-block-start: 0.9rem;
}

/* Smooth open/close */
.faq-item__panel[hidden] {
	display: none;
}

.faq-item.is-animating .faq-item__panel {
	overflow: hidden;
}

/* Filter states */
.faq-item[hidden],
.faq-group[hidden] {
	display: none;
}

.faq-empty {
	text-align: center;
	color: var(--c-muted);
	background: #fff;
	border: 1px dashed var(--c-line);
	border-radius: 14px;
	padding: 2.2rem 1.4rem;
	margin: 0;
}

/* Highlight matched text while filtering */
.faq-item__q mark {
	background: rgba(95, 104, 231, 0.18);
	color: inherit;
	border-radius: 4px;
	padding: 0 0.15em;
}

/* ---------- FAQ responsive ---------- */
@media (max-width: 1000px) {
	.faq-layout {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	.faq-rail__sticky {
		position: static;
	}

	.faq-rail__list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.faq-rail__link {
		background: #fff;
		border-color: var(--c-line);
	}

	.faq-rail__name {
		flex: none;
	}
}

@media (max-width: 640px) {
	.faq-rail__icon {
		display: none;
	}

	.faq-rail__link {
		padding: 0.45rem 0.7rem;
	}

	.faq-rail__name {
		font-size: 0.8rem;
	}

	.faq-item__btn {
		padding: 0.9rem 1rem;
	}

	.faq-item__q {
		font-size: 0.92rem;
	}

	.faq-item__panel {
		padding: 0 1rem 1rem;
	}

	.faq-item__panel p {
		text-align: start;
		font-size: 0.9rem;
	}
}

/* =============================================================
   v2.2 - DOTTED WORLD MAP (About: global reach)
   ============================================================= */
.world-map {
	position: relative;
}

.world-map__panel {
	position: relative;
	border-radius: var(--radius-lg);
	background: linear-gradient(160deg, #fff 0%, var(--c-primary-soft) 100%);
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	padding: clamp(0.6rem, 1.6vw, 1.4rem);
}

.world-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Land dots ---------- */
.wm-dots {
	fill: var(--c-primary);
}

.wm-dots--a {
	opacity: 0.52;
	animation: wm-breathe-a 9s ease-in-out infinite;
}

.wm-dots--b {
	opacity: 0.74;
	animation: wm-breathe-b 9s ease-in-out infinite;
}

@keyframes wm-breathe-a {
	0%, 100% { opacity: 0.46; }
	50% { opacity: 0.6; }
}

@keyframes wm-breathe-b {
	0%, 100% { opacity: 0.74; }
	50% { opacity: 0.58; }
}

/* ---------- Routes ---------- */
.wm-base {
	fill: none;
	stroke: rgba(95, 104, 231, 0.28);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 4 6;
}

.wm-beam {
	fill: none;
	stroke: url(#menaRouteGrad);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 26 460;
	stroke-dashoffset: 486;
	animation: wm-travel 4.2s linear infinite;
}

@keyframes wm-travel {
	to { stroke-dashoffset: 0; }
}

.wm-beam--1 { animation-delay: 0s; }
.wm-beam--2 { animation-delay: 0.7s; }
.wm-beam--3 { animation-delay: 1.4s; }
.wm-beam--4 { animation-delay: 2.1s; }
.wm-beam--5 { animation-delay: 2.8s; }
.wm-beam--6 { animation-delay: 3.5s; }

/* ---------- Continent nodes ---------- */
.wm-node {
	fill: #fff;
	stroke: var(--c-primary);
	stroke-width: 2.6;
}

.wm-ping {
	fill: none;
	stroke: var(--c-primary);
	stroke-width: 1.8;
	transform-box: fill-box;
	transform-origin: center;
	animation: wm-ping 3s ease-out infinite;
}

@keyframes wm-ping {
	0% { transform: scale(0.5); opacity: 0.85; }
	100% { transform: scale(2.8); opacity: 0; }
}

.wm-ping--1 { animation-delay: 0s; }
.wm-ping--2 { animation-delay: 0.5s; }
.wm-ping--3 { animation-delay: 1s; }
.wm-ping--4 { animation-delay: 1.5s; }
.wm-ping--5 { animation-delay: 2s; }
.wm-ping--6 { animation-delay: 2.5s; }

/* ---------- Continent labels ---------- */
.wm-label {
	fill: var(--c-ink);
	font-family: var(--font-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 4px;
	stroke-linejoin: round;
}

/* ---------- Dubai hub ---------- */
.wm-hub__core {
	fill: url(#menaRouteGrad);
}

.wm-hub__ring {
	fill: none;
	stroke: rgba(95, 104, 231, 0.6);
	stroke-width: 2;
	stroke-dasharray: 6 8;
	transform-box: fill-box;
	transform-origin: center;
	animation: spin 18s linear infinite;
}

.wm-hub__halo {
	fill: none;
	stroke: rgba(95, 104, 231, 0.3);
	stroke-width: 1.6;
	transform-box: fill-box;
	transform-origin: center;
	animation: wm-ping 3.6s ease-out infinite;
}

/* ---------- Overlays ---------- */
.wm-badge {
	position: absolute;
	transform: translate(-50%, -190%);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-md);
	border-radius: 999px;
	padding: 0.36rem 0.85rem;
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
	z-index: 2;
}

.wm-meter {
	position: absolute;
	left: 2.2%;
	bottom: 6%;
	display: flex;
	flex-direction: column;
	gap: 0.32rem;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	padding: 0.6rem 0.9rem;
	box-shadow: var(--shadow-sm);
	min-width: 176px;
	z-index: 2;
}

.wm-meter__label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.wm-meter__track {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: var(--c-line);
	overflow: hidden;
}

.wm-meter__fill {
	display: block;
	height: 100%;
	width: 20%;
	border-radius: 999px;
	background: var(--grad);
	animation: wm-fill 5s ease-in-out infinite;
}

@keyframes wm-fill {
	0% { width: 14%; }
	55% { width: 94%; }
	100% { width: 14%; }
}

.wm-meter__value {
	font-family: var(--font-head);
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--c-ink);
}

/* ---------- Reach cards (About split, right column) ---------- */
.reach-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.reach-card {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 16px;
	padding: 1.1rem 1.2rem;
	transition: transform 0.32s var(--ease), border-color 0.3s ease, box-shadow 0.32s var(--ease);
}

.reach-card:hover {
	transform: translateX(5px);
	border-color: rgba(95, 104, 231, 0.4);
	box-shadow: var(--shadow-sm);
}

.reach-card__icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease, color 0.3s ease;
}

.reach-card:hover .reach-card__icon {
	background: var(--grad);
	color: #fff;
}

.reach-card__icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.reach-card__body {
	min-width: 0;
}

.reach-card__title {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--c-ink);
	margin-bottom: 0.15rem;
}

.reach-card__text {
	display: block;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--c-muted);
}

/* Continent list shown only where the in-map labels are too small to read */
.wm-legend {
	display: none;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
}

.wm-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: 999px;
	padding: 0.34rem 0.8rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.8rem;
	color: var(--c-ink);
}

.wm-legend__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--grad);
	flex: none;
}

/* ---------- World map responsive ---------- */
@media (max-width: 1000px) {
	.wm-label {
		font-size: 23px;
	}

	.wm-node {
		r: 6;
	}

	.wm-meter {
		min-width: 152px;
		padding: 0.5rem 0.7rem;
	}

	.wm-meter__value {
		font-size: 0.68rem;
	}
}

/* Below this width the map is too short for overlaid text: the labels and the
   dispatch meter move out, so the map itself stays clean and legible. */
@media (max-width: 720px) {
	.world-map__panel {
		padding: 0.5rem 0.5rem 0.9rem;
	}

	.wm-label {
		display: none;
	}

	.wm-node {
		r: 8;
	}

	.wm-ping {
		stroke-width: 2.4;
	}

	.wm-beam {
		stroke-width: 4.5;
	}

	.wm-base {
		stroke-width: 2.2;
	}

	.wm-badge {
		font-size: 0.68rem;
		padding: 0.26rem 0.6rem;
		transform: translate(-50%, -150%);
	}

	.wm-meter {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		margin-top: 0.7rem;
		flex-direction: row;
		align-items: center;
		gap: 0.6rem;
		background: transparent;
		backdrop-filter: none;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	.wm-meter__label {
		flex: none;
	}

	.wm-meter__track {
		flex: 1;
	}

	.wm-meter__value {
		flex: none;
		font-size: 0.7rem;
	}

	.wm-legend {
		display: flex;
	}
}

@media (max-width: 420px) {
	.wm-legend__item {
		font-size: 0.74rem;
		padding: 0.28rem 0.65rem;
	}

	.wm-meter__label {
		display: none;
	}
}

/* =============================================================
   v2.3 - SCAN TO PAY (Pricing)
   ============================================================= */
.pay-band {
	padding-top: clamp(1.8rem, 4vw, 3.6rem);
}

.pay-card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.6rem, 4vw, 3.4rem);
	align-items: center;
	background: var(--c-dark);
	border-radius: var(--radius-lg);
	padding: clamp(1.8rem, 4vw, 3rem);
	color: #fff;
}

.pay-card__glow {
	position: absolute;
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	background: radial-gradient(600px 300px at 12% 10%, rgba(95, 104, 231, 0.5), transparent 68%),
		radial-gradient(520px 280px at 88% 90%, rgba(125, 108, 240, 0.38), transparent 68%);
	animation: glow-drift 10s ease-in-out infinite alternate;
	pointer-events: none;
}

.pay-card__text {
	position: relative;
	z-index: 1;
}

.pay-card__text .eyebrow {
	color: #aeb3f5;
}

.pay-card__text .section-title {
	color: #fff;
	margin-bottom: 0.7rem;
}

.pay-card__text > p {
	color: #c9cbe3;
	max-width: 54ch;
	margin-bottom: 1.4rem;
}

/* numbered steps */
.pay-steps {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0 0 1.7rem;
	padding: 0;
}

.pay-steps li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.95rem;
	color: #dcdef2;
}

.pay-steps__n {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #aeb3f5;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pay-card__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.pay-card__secure {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.84rem;
	color: #9fa3c8;
}

.pay-card__secure .i {
	color: #7de3a8;
}

/* ---------- QR ---------- */
.pay-qr {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
}

.pay-qr__frame {
	position: relative;
	width: clamp(180px, 22vw, 232px);
	padding: 14px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
	overflow: hidden;
}

.pay-qr__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Dark modules stay well above the contrast a scanner needs; the white
   background and finder gap are explicit so nothing shows through. */
.qr-bg,
.qr-gap {
	fill: #fff;
}

.qr-dots,
.qr-core {
	fill: var(--c-primary-deep);
}

.qr-ring {
	fill: var(--c-primary-dark);
}

/* scanner sweep */
.pay-qr__scan {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 8px;
	height: 38%;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(95, 104, 231, 0) 0%, rgba(95, 104, 231, 0.16) 70%, rgba(95, 104, 231, 0.42) 100%);
	animation: qr-scan 3.4s ease-in-out infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes qr-scan {
	0%, 100% { transform: translateY(0); opacity: 0; }
	12% { opacity: 1; }
	50% { transform: translateY(165%); opacity: 1; }
	62% { opacity: 0; }
}

/* corner brackets */
.pay-qr__corner {
	position: absolute;
	width: 20px;
	height: 20px;
	border: 3px solid var(--c-primary);
	z-index: 3;
	pointer-events: none;
}

.pay-qr__corner--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.pay-qr__corner--tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.pay-qr__corner--bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.pay-qr__corner--br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

.pay-qr__caption {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #c9cbe3;
	text-align: center;
}

.pay-qr__caption .i {
	color: #aeb3f5;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
	.pay-card {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.pay-card__text > p {
		margin-inline: auto;
	}

	/* Centring each row put every circle at a different x, because the rows
	   are different widths. The list centres as one block instead, so the
	   three numbers sit on a single line. */
	.pay-steps {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	.pay-steps li {
		justify-content: flex-start;
		text-align: start;
	}

	.pay-card__actions {
		justify-content: center;
	}

	.pay-qr {
		order: -1;
		margin-bottom: 0.4rem;
	}

	.pay-qr__frame {
		width: min(210px, 62vw);
	}
}

/* =============================================================
   v2.4 - LEGACY vs MENA COMPARISON (Why Us)
   ============================================================= */
.compare-band {
	background: #fff;
	/* The section below brings its own top padding, so the dashboard does
	   not add a second gap underneath itself. */
	padding-bottom: 0;
}

/* The WhatsApp glyph is a filled path, so it opts out of the stroke icon
   rules that every other icon on the site uses. */
.contact-card__icon--wa svg {
	fill: currentColor;
	stroke: none;
}

/* =============================================================
   WHY US DASHBOARD
   An app style panel: window bar, KPI tiles, then a data table with
   status pills and advantage bars. Site palette throughout.
   ============================================================= */
.dash {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 60px -40px rgba(23, 26, 51, 0.5);
}

/* ---------- window bar ---------- */
.dash__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem clamp(1rem, 2.4vw, 1.6rem);
	background: var(--c-dark);
	color: #fff;
}

.dash__dots {
	display: inline-flex;
	gap: 6px;
}

.dash__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}

.dash__dots i:first-child {
	background: rgba(255, 255, 255, 0.4);
}

.dash__title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0;
}

.dash__keys {
	margin-inline-start: auto;
	display: inline-flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.dash__key {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0;
	word-spacing: 0.12em;
	text-transform: uppercase;
	color: #9fa3c8;
}

.dash__key i {
	width: 16px;
	height: 5px;
	border-radius: 3px;
	background: #4b4f74;
}

.dash__key--new {
	color: #cfd2f7;
}

.dash__key--new i {
	background: var(--grad);
}

.dash__body {
	padding: clamp(1rem, 2.4vw, 1.6rem);
	background: var(--c-bg-soft);
	display: grid;
	gap: clamp(0.9rem, 2vw, 1.3rem);
}

/* ---------- KPI tiles ---------- */
.dash__kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.kpi {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0.15rem 0.8rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.kpi:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.kpi__icon {
	grid-row: span 2;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-primary-soft);
	color: var(--c-primary);
}

.kpi__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kpi__value {
	font-family: var(--font-head);
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--c-ink);
}

.kpi__label {
	font-size: 0.82rem;
	color: var(--c-muted);
}

.kpi__tag {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.8rem;
	font-family: var(--font-head);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border-radius: 999px;
	padding: 0.16rem 0.5rem;
}

/* ---------- panel ---------- */
.dash__panel {
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(1rem, 2.2vw, 1.4rem);
}

.dash__panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.9rem;
}

.dash__panel-head h3 {
	font-size: 1.02rem;
	margin: 0;
}

.dash__panel-note {
	font-size: 0.8rem;
	color: var(--c-muted);
}

/* ---------- data table ---------- */
.dtable__head,
.dtable__row {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1.25fr) 130px;
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	align-items: center;
}

.dtable__head {
	padding: 0 0.6rem 0.6rem;
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--c-muted);
	border-bottom: 1px solid var(--c-line);
}

.dtable__row {
	padding: 0.85rem 0.6rem;
	border-bottom: 1px solid var(--c-line);
	border-radius: 10px;
	transition: background 0.5s ease;
}

.dtable__row:last-child {
	border-bottom: 0;
}

.dtable__row:hover {
	background: var(--c-bg-soft);
}

.dtable__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--c-ink);
}

.dtable__ic {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-primary-soft);
	color: var(--c-primary);
}

.dtable__ic svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dtable__cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.dtable__cell em {
	font-style: normal;
	font-size: 0.84rem;
	line-height: 1.55;
	color: var(--c-muted);
}

.dtable__cell:nth-of-type(3) em {
	color: var(--c-ink-2);
}

.pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-head);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.04em;
	border-radius: 999px;
	padding: 0.2rem 0.6rem;
	white-space: nowrap;
}

.pill--old {
	background: #f1f2f6;
	color: #8a90a6;
}

.pill--new {
	background: var(--c-primary-soft);
	color: var(--c-primary);
}

/* ---------- advantage bars ---------- */
.dtable__meter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dtable__track {
	height: 7px;
	border-radius: 4px;
	background: #eceef5;
	overflow: hidden;
}

.dtable__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	width: var(--v, 0%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dtable__fill--old {
	background: #c3c7d6;
}

.dtable__fill--new {
	background: var(--grad);
	transition-delay: 0.18s;
}

.dtable__row.is-revealed .dtable__fill {
	transform: scaleX(1);
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
	.dash__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dtable__head {
		display: none;
	}

	.dtable__row {
		grid-template-columns: 1fr;
		gap: 0.7rem;
		padding: 1rem 0.6rem;
	}

	.dtable__cell::before,
	.dtable__meter::before {
		content: attr(data-col);
		font-family: var(--font-head);
		font-size: 0.64rem;
		font-weight: 700;
		letter-spacing: 0;
		word-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--c-muted);
	}
}

@media (max-width: 560px) {
	.dash__kpis {
		grid-template-columns: 1fr;
	}

	.dash__keys {
		width: 100%;
		margin-inline-start: 0;
	}

	.dash__bar {
		flex-wrap: wrap;
	}
}

/* =============================================================
   v2.6 - BREADCRUMBS, POST NAV, MOBILE CTA, FOCUS STATES
   ============================================================= */

/* ---------- Breadcrumbs ---------- */
.crumbs {
	margin-bottom: 1.4rem;
}

.crumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0;
	padding: 0;
	font-size: 0.82rem;
}

.crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.crumbs__item a {
	color: var(--c-muted);
	font-weight: 500;
	transition: color 0.2s ease;
}

.crumbs__item a:hover {
	color: var(--c-primary);
}

.crumbs__sep {
	width: 13px;
	height: 13px;
	flex: none;
	fill: none;
	stroke: var(--c-line);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.crumbs__current {
	color: var(--c-ink);
	font-weight: 600;
	max-width: 32ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Previous / next release ---------- */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2.6rem;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s var(--ease);
}

.post-nav__link:hover {
	transform: translateY(-3px);
	border-color: rgba(95, 104, 231, 0.4);
	box-shadow: var(--shadow-sm);
}

.post-nav__link--next {
	text-align: end;
	align-items: flex-end;
}

.post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-head);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-primary);
}

.post-nav__title {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--c-ink);
}

.post-nav__link:only-child {
	grid-column: span 2;
	max-width: 50%;
}

.post-nav__link--next:only-child {
	margin-inline-start: auto;
}

@media (max-width: 640px) {
	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__link--next {
		text-align: start;
		align-items: flex-start;
	}

	.post-nav__link:only-child {
		grid-column: auto;
		max-width: none;
	}
}

/* ---------- Sticky mobile call to action ---------- */
.mobile-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	gap: 0.6rem;
	align-items: center;
	padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--c-line);
	box-shadow: 0 -8px 26px rgba(23, 26, 51, 0.1);
}

.mobile-cta__main {
	flex: 1;
	justify-content: center;
}

.mobile-cta__wa {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid var(--c-line);
	color: var(--c-ink);
	transition: all 0.25s var(--ease);
}

.mobile-cta__wa .i {
	width: 22px;
	height: 22px;
}

.mobile-cta__wa:hover,
.mobile-cta__wa:active {
	background: linear-gradient(135deg, #25d366, #128c7e);
	border-color: transparent;
	color: #fff;
}

@media (max-width: 900px) {
	.mobile-cta {
		display: flex;
	}

	/* Keep the bar from covering the last of the page. */
	body {
		padding-bottom: 78px;
	}

	.back-to-top {
		bottom: calc(78px + 0.9rem);
	}
}

/* ---------- Visible keyboard focus ---------- */
:focus-visible {
	outline: 3px solid rgba(95, 104, 231, 0.55);
	outline-offset: 3px;
	border-radius: 6px;
}

.btn:focus-visible,
.faq-item__btn:focus-visible,
.nav-toggle:focus-visible,
.search-toggle:focus-visible,
.slider__btn:focus-visible {
	outline-offset: 4px;
}

.main-nav a:focus-visible,
.footer-menu a:focus-visible,
.crumbs__item a:focus-visible {
	outline-offset: 2px;
}

/* =============================================================
   v2.7 - CATEGORY MASTHEAD
   ============================================================= */
.cat-hero {
	position: relative;
	overflow: hidden;
	background: var(--c-dark);
	color: #fff;
	padding: clamp(2.4rem, 5vw, 3.8rem) 0 clamp(2rem, 4vw, 3rem);
}

.cat-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	overflow: hidden;
}

.cat-hero__dots {
	position: absolute;
	top: -60px;
	right: -60px;
	bottom: -60px;
	left: -60px;
	background-image: radial-gradient(circle, rgba(174, 179, 245, 0.22) 1.3px, transparent 1.6px);
	background-size: 26px 26px;
	mask-image: linear-gradient(105deg, #000 8%, transparent 68%);
	-webkit-mask-image: linear-gradient(105deg, #000 8%, transparent 68%);
	animation: cat-dots 26s linear infinite;
}

@keyframes cat-dots {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(26px, 26px, 0); }
}

.cat-hero__glow {
	position: absolute;
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	background: radial-gradient(620px 320px at 88% 10%, rgba(95, 104, 231, 0.55), transparent 68%),
		radial-gradient(520px 300px at 10% 100%, rgba(125, 108, 240, 0.35), transparent 68%);
	animation: glow-drift 11s ease-in-out infinite alternate;
}

.cat-hero__beam {
	position: absolute;
	top: -60%;
	left: -70%;
	width: 38%;
	height: 220%;
	background: linear-gradient(90deg, transparent, rgba(174, 179, 245, 0.14), transparent);
	transform: rotate(14deg);
	animation: grid-sweep 12s ease-in-out infinite;
}

.cat-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	gap: clamp(1.6rem, 4vw, 3.2rem);
	align-items: end;
}

/* Tag, date and author archives carry no sibling rail, so the text
   block takes the full width instead of sitting in a narrow column. */
.cat-hero__main:only-child {
	grid-column: 1 / -1;
}

.cat-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-head);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.24em;
	text-transform: uppercase;
	color: #aeb3f5;
	margin-bottom: 0.9rem;
}

.cat-hero__title {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 0.7rem;
}

.cat-hero__sub {
	color: #c9cbe3;
	font-size: 1rem;
	line-height: 1.8;
	max-width: 56ch;
	margin-bottom: 1.1rem;
}

.cat-hero__sub p {
	margin: 0;
}

.cat-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.7rem;
	font-size: 0.88rem;
	color: #9fa3c8;
}

.cat-hero__stat strong {
	font-family: var(--font-head);
	color: #fff;
	font-weight: 700;
}

.cat-hero__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
}

/* ---------- sibling sections ---------- */
.cat-hero__nav {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
}

.cat-hero__nav-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: 0.20em;
	text-transform: uppercase;
	color: #8489b3;
}

.cat-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	min-width: 0;
	max-width: 100%;
}

.cat-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.42rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #dcdef2;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.82rem;
	transition: all 0.26s var(--ease);
}

.cat-hero__chip-count {
	font-size: 0.7rem;
	font-weight: 700;
	color: #9fa3c8;
	background: rgba(0, 0, 0, 0.24);
	border-radius: 999px;
	padding: 0.04rem 0.4rem;
	transition: all 0.26s ease;
}

.cat-hero__chip:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(174, 179, 245, 0.5);
	color: #fff;
	transform: translateY(-2px);
}

.cat-hero__chip.is-current {
	background: var(--grad);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.cat-hero__chip.is-current .cat-hero__chip-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ---------- full width featured spread ----------
   The lead spread sits above the two column layout so it spans the
   whole page, with the sidebar starting underneath it. */
.cat-feature {
	padding-top: clamp(1.8rem, 4vw, 2.6rem);
}

.cat-feature .mag-spread {
	margin-bottom: 0;
}

.cat-feature + .newsroom__layout {
	padding-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

.mag-lead__title a {
	color: #fff;
}

.mag-lead__title a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.mag-mini__title a {
	color: var(--c-ink);
}

.mag-mini__title a:hover {
	color: var(--c-primary);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.cat-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.cat-hero__nav {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-top: 1.1rem;
		width: 100%;
	}
}

/* On phones the sections become a single swipeable row so the masthead
   stays short instead of stacking four rows of chips. */
@media (max-width: 700px) {
	.cat-hero__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.4rem;
		padding-bottom: 0.25rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
		scroll-snap-type: x proximity;
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
	}

	.cat-hero__chips::-webkit-scrollbar {
		display: none;
	}

	.cat-hero__chip {
		flex: none;
		scroll-snap-align: start;
		font-size: 0.78rem;
		padding: 0.38rem 0.75rem;
	}

	.cat-hero__chip:hover {
		transform: none;
	}
}

/* =============================================================
   v2.10 - CARD MOTION
   Calm by design, in the same register as the footer glow: nothing
   wipes or sweeps. The surface eases up, a soft light settles over it
   and a hairline fades in along the top edge, all over about three
   quarters of a second. Transform and opacity only.
   ============================================================= */
.addon-card,
.region-card,
.step,
.contact-card,
.notes-card,
.side-card,
.post-nav__link,
.news-card,
.mag-mini,
.quote-card,
.faq-item {
	position: relative;
	isolation: isolate;
	transition:
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 0.7s ease;
}

.addon-card,
.region-card,
.step,
.contact-card,
.notes-card,
.side-card,
.post-nav__link,
.news-card,
.mag-mini,
.quote-card {
	overflow: hidden;
}

/* The hairline fades in rather than drawing itself across. */
.addon-card::after,
.region-card::after,
.step::after,
.contact-card::after,
.side-card::after,
.post-nav__link::after,
.news-card::after,
.mag-mini::after,
.quote-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--grad);
	opacity: 0;
	transition: opacity 0.75s ease;
	pointer-events: none;
	z-index: 3;
}

.addon-card:hover::after,
.region-card:hover::after,
.step:hover::after,
.contact-card:hover::after,
.side-card:hover::after,
.post-nav__link:hover::after,
.news-card:hover::after,
.mag-mini:hover::after,
.quote-card:hover::after {
	opacity: 1;
}

/* A soft light settles over the card. No travel, only a slow fade. */
.addon-card::before,
.region-card::before,
.step::before,
.contact-card::before,
.notes-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: radial-gradient(420px 260px at 50% 0%, rgba(95, 104, 231, 0.12), transparent 72%);
	opacity: 0;
	transition: opacity 0.85s ease;
	pointer-events: none;
	z-index: 1;
}

.addon-card:hover::before,
.region-card:hover::before,
.step:hover::before,
.contact-card:hover::before,
.notes-card:hover::before {
	opacity: 1;
}

/* The lift is short and slow. */
.addon-card:hover,
.region-card:hover,
.step:hover,
.contact-card:hover,
.post-nav__link:hover,
.news-card:hover,
.mag-mini:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.3);
}

.notes-card:hover,
.side-card:hover,
.quote-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: rgba(95, 104, 231, 0.24);
}

/* Icons follow at the same unhurried pace. */
.addon-card__icon,
.step__icon,
.contact-card__icon {
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.addon-card:hover .addon-card__icon,
.step:hover .step__icon,
.contact-card:hover .contact-card__icon {
	transform: translateY(-2px) scale(1.04);
}

/* Content sits above the settling light. */
.step > *,
.addon-card > *,
.region-card > *,
.contact-card > *,
.notes-card > *,
.quote-card > * {
	position: relative;
	z-index: 2;
}

@media (hover: none) {
	.addon-card:hover,
	.region-card:hover,
	.step:hover,
	.contact-card:hover,
	.notes-card:hover,
	.side-card:hover,
	.quote-card:hover,
	.news-card:hover,
	.mag-mini:hover,
	.post-nav__link:hover {
		transform: none;
	}
}

/* =============================================================
   v2.10.1 - CLOSING BAND: spacing under tinted sections, and motion
   ============================================================= */

/* A tinted band's bottom padding reads as part of that band, so when one sits
   directly above the closing card the card has to bring its own space. */
.how-band + .cta-band,
.compare-band + .cta-band,
.partner-strip + .cta-band,
.addons + .cta-band {
	padding-top: clamp(3.2rem, 7vw, 5.5rem);
}

/* The dark bands answer at the same unhurried pace: a short lift and a
   soft light that settles in, with no sweep across the surface. */
.cta-card,
.pay-card,
.price-card {
	transition:
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cta-card:hover,
.pay-card:hover,
.price-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 28px 60px -34px rgba(23, 26, 51, 0.7);
}

/* ---------- motion inside the card ---------- */

/* A dot matrix drifting slowly across the surface. */
.cta-card__glow::before,
.pay-card__glow::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: radial-gradient(circle, rgba(174, 179, 245, 0.3) 1.3px, transparent 1.7px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(130% 110% at 25% 0%, #000 8%, transparent 72%);
	mask-image: radial-gradient(130% 110% at 25% 0%, #000 8%, transparent 72%);
	animation: card-dots 14s linear infinite;
	pointer-events: none;
}

@keyframes card-dots {
	from { background-position: 0 0; }
	to { background-position: 26px 26px; }
}

/* A soft orb of light crossing the card on a long path. */
.cta-card__glow::after,
.pay-card__glow::after {
	content: "";
	position: absolute;
	top: 14%;
	left: 6%;
	width: clamp(180px, 26vw, 320px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(140, 128, 255, 0.55), rgba(95, 104, 231, 0.18) 45%, transparent 70%);
	animation: card-orb 17s ease-in-out infinite alternate;
	pointer-events: none;
}

.pay-card__glow::after {
	animation-delay: -6s;
	top: 24%;
}

@keyframes card-orb {
	from { transform: translate3d(0, 0, 0) scale(0.9); }
	to { transform: translate3d(230%, 22%, 0) scale(1.3); }
}

/* A light runs along the top edge of every closing card, on the same slow
   cycle as the line in the footer. It runs on its own, so the card is alive
   in a screenshot and on a phone, not only under a cursor. */
.cta-card::after,
.pay-card::after,
.price-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-image: linear-gradient(90deg, transparent, rgba(174, 179, 245, 0.95), #ffffff, rgba(174, 179, 245, 0.95), transparent);
	background-repeat: no-repeat;
	background-size: 34% 100%;
	background-position: -34% 0;
	animation: band-line 7s ease-in-out infinite;
	pointer-events: none;
	z-index: 3;
}

.pay-card::after {
	animation-delay: -2.4s;
}

.price-card::after {
	animation-delay: -4.6s;
}

@keyframes band-line {
	0% { background-position: -34% 0; }
	100% { background-position: 134% 0; }
}

.cta-card__actions .btn,
.pay-card__actions .btn {
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-card:hover .cta-card__actions .btn,
.pay-card:hover .pay-card__actions .btn {
	transform: translateY(-2px);
}

@media (hover: none) {
	.cta-card:hover,
	.pay-card:hover,
	.price-card:hover {
		transform: none;
	}
}

/* =============================================================
   ACCESSIBILITY: reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.globe {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}

	.ticker__track {
		animation: none;
	}
}

/* =============================================================
   RTL / ARABIC
   The layout itself is written with logical properties, so this
   block only carries what CSS cannot mirror on its own: physical
   transforms, mirrored corner radii, quote glyphs and the few
   Latin-only treatments that do not survive the Arabic script.
   ============================================================= */

/* ---------- Arabic text rendering ---------- */
[dir="rtl"] body {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
}

/* Arabic has no case, and forced uppercase only mangles the Latin brand
   words mixed into labels. Weight and word-spacing carry the emphasis. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .ticker__label,
[dir="rtl"] .cat-badge,
[dir="rtl"] .partner-strip__label,
[dir="rtl"] .partner-card__go,
[dir="rtl"] .faq-rail__title,
[dir="rtl"] .wm-meter__label,
[dir="rtl"] .dash__key,
[dir="rtl"] .kpi__tag,
[dir="rtl"] .dtable__head,
[dir="rtl"] .pill,
[dir="rtl"] .post-nav__label,
[dir="rtl"] .cat-hero__eyebrow,
[dir="rtl"] .cat-hero__nav-label,
[dir="rtl"] .cat-section__more {
	text-transform: none;
}

/* Bare numerals, prices and phone numbers keep Western digits and read
   left-to-right whatever surrounds them. Two groups are deliberately left out:
   dates, which are spelled out in Arabic and read right-to-left like any other
   phrase; and the plain step / timeline / card numerals, which need no help
   (digits already form their own left-to-right run) and whose boxes are placed
   with logical insets - those resolve against the element's own direction, so
   forcing it to ltr would flip them back to the wrong edge. */
[dir="rtl"] .stat__num,
[dir="rtl"] .counter,
[dir="rtl"] .price-card__amount,
[dir="rtl"] .kpi__value,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="https://wa.me"],
[dir="rtl"] a[href^="https://api.whatsapp.com"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Those links are block boxes, and flipping one to ltr also flips where its
   "start" edge is - without this the number would jump to the left of a
   right-aligned card. */
[dir="rtl"] .contact-card a[href^="tel:"],
[dir="rtl"] .contact-card a[href^="mailto:"],
[dir="rtl"] .contact-card a[href^="https://wa.me"],
[dir="rtl"] .footer-contact a[href^="tel:"],
[dir="rtl"] .footer-contact a[href^="mailto:"],
[dir="rtl"] .footer-contact a[href^="https://wa.me"] {
	text-align: right;
}

/* Flipping an element to LTR also flips how "start" resolves, so blocks that
   are start-aligned in the layout need their edge naming back. */
[dir="rtl"] .kpi__value {
	text-align: right;
}

/* An Arabic word is one connected shape; a drop cap would sever it. */
[dir="rtl"] .single-post-page .entry-content > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
	font-family: inherit;
}

/* ---------- Mirrored transforms ---------- */
[dir="rtl"] .btn:hover .i,
[dir="rtl"] .cat-section__more:hover .i {
	transform: translateX(-3px);
}

[dir="rtl"] .timeline__card:hover {
	transform: translateX(-6px);
}

[dir="rtl"] .side-section:hover {
	transform: translateX(-4px);
}

[dir="rtl"] .side-section:hover .side-section__arrow {
	transform: translateX(-2px);
}

[dir="rtl"] .footer-contact li:hover {
	transform: translateX(-4px);
}

[dir="rtl"] .reach-card:hover {
	transform: translateX(-5px);
}

/* The advantage bars fill from the reading edge. */
[dir="rtl"] .dtable__fill {
	transform-origin: right center;
}

/* ---------- Mirrored corners ---------- */
[dir="rtl"] .entry-content blockquote {
	border-radius: var(--radius) 0 0 var(--radius);
}

[dir="rtl"] .show-card__num {
	border-radius: 14px 0 14px 0;
}

/* ---------- Typographic quote mark ---------- */
[dir="rtl"] .quote-card::before {
	content: "\201D";
}

/* ---------- Marquees ---------- */
/* A max-content flex track overflows towards the reading direction, so in
   Arabic it has to travel the other way or the strip empties from the right. */
@keyframes logo-scroll-rtl {
	to { transform: translateX(50%); }
}

[dir="rtl"] .logo-marquee__track {
	animation-name: logo-scroll-rtl;
}

@keyframes ticker-rtl {
	to { transform: translateX(50%); }
}

[dir="rtl"] .ticker__track {
	animation-name: ticker-rtl;
}

/* ---------- Mobile navigation drawer ---------- */
@media (max-width: 1080px) {
	[dir="rtl"] .main-nav {
		box-shadow: 18px 0 50px rgba(23, 26, 51, 0.18);
		transform: translateX(-100%);
	}

	[dir="rtl"] .main-nav.is-open {
		transform: translateX(0);
	}
}