/* =============================================================
   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: "Sora", "Segoe UI", -apple-system, sans-serif;
	--font-body: "Inter", "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: 16px;
	line-height: 1.65;
	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.22;
	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;
	left: 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);
}

/* 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;
	left: 0.62rem;
	right: 100%;
	bottom: 0.22rem;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transition: right 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 {
	right: 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);
	left: 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: 0.35rem 0.4rem 0.35rem 1rem;
	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;
	right: -120px;
	background: radial-gradient(circle, rgba(95, 104, 231, 0.5), transparent 65%);
}

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

.blob--3 {
	width: 260px;
	height: 260px;
	top: 30%;
	left: 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.02em;
	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%; right: 0; animation-delay: -1s; }
.float-chip--2 { bottom: 12%; left: -4%; animation-delay: -2.5s; }
.float-chip--3 { bottom: -4%; right: 8%; animation-delay: -4s; }
.float-chip--4 { top: 2%; left: -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.08em;
	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;
	right: 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.14em;
	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: left;
	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.015em;
	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;
	right: 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-left: 0;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 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: 0 0 2rem 5.2rem;
}

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

.timeline__num {
	position: absolute;
	left: 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;
	left: 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.07em;
	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.02em;
	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;
	left: 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-left 0.25s var(--ease);
}

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

.side-cats a:hover {
	color: var(--c-primary);
	padding-left: 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: 1rem 1.1rem 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.015em;
	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-left: 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-left: 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: left;
}

.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-left: 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-left: 1.2rem;
	position: relative;
}

.fine-print li::before {
	content: "";
	position: absolute;
	left: 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-left: 2rem;
}

.comment-author img {
	border-radius: 50%;
	margin-right: 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: left;
		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;
	left: 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-left 0.25s var(--ease);
}

.footer-menu a:hover {
	color: #fff;
	padding-left: 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;
	right: 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-left: 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;
		right: 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 0 0 1rem;
		min-width: 0;
	}

	.masthead__cta {
		display: none;
	}

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

@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: 0.85rem 0.9rem 0.85rem 0.1rem;
	}

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

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

	.timeline::before {
		left: 22px;
	}

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

	.timeline__item {
		padding-left: 3.8rem;
	}

	.float-chip--2 {
		left: 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%;
		left: 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-right: 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;
	right: 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;
	left: 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.06em;
	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;
	left: 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: left;
}

.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: left;
	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-left: 0.85rem;
	position: relative;
}

.entry-content h2::before {
	content: "";
	position: absolute;
	left: 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-left: 1.5rem;
	margin: 0 0 1.35em;
}

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

.entry-content ul li::before {
	content: "";
	position: absolute;
	left: -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-left: 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;
}

.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-right: 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.14em;
	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;
	text-align: center;
	gap: 0.5rem;
	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.4rem;
}

.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);
}

.partner-card__name {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-ink);
}

.partner-card__blurb {
	font-size: 0.85rem;
	color: var(--c-muted);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-bottom: auto;
}

.partner-card__go {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.4rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	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;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
	transition: right 0.35s var(--ease);
}

.cat-section__more:hover::after {
	right: 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__blurb {
		display: none;
	}

	.partner-card {
		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-left: 0;
}

.footer-menu a::before {
	content: "";
	position: absolute;
	left: 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-left: 18px;
}

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

.footer-news li::before {
	content: "";
	position: absolute;
	left: 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-left: 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;
	left: 0;
	right: 100%;
	bottom: -3px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--grad);
	transition: right 0.32s var(--ease);
}

.footer-bottom__nav a:hover::after {
	right: 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: left;
}

/* 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: left;
		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.04em;
}

/* ---------- 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.16em;
	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;
	left: 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: left;
	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: left;
		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.01em;
	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.16em;
	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;
	}

	.pay-steps li {
		justify-content: center;
		text-align: left;
	}

	.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.01em;
}

.dash__keys {
	margin-left: 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.1em;
	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;
	right: 0.8rem;
	font-family: var(--font-head);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	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.12em;
	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.03em;
	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.12em;
		text-transform: uppercase;
		color: var(--c-muted);
	}
}

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

	.dash__keys {
		width: 100%;
		margin-left: 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: right;
	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.1em;
	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-left: auto;
}

@media (max-width: 640px) {
	.post-nav {
		grid-template-columns: 1fr;
	}

	.post-nav__link--next {
		text-align: left;
		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.2em;
	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.025em;
	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.16em;
	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;
	}
}