/* =========================================================================
 * الأول ويب — Design System v2
 * Inspired by "Precision Matrix" reference — RTL-first, mobile-first
 * ========================================================================= */

:root {
	/* Brand */
	--primary: #1B4DFF;
	--primary-dark: #1340D6;
	--primary-600: #1F57F5;
	--primary-soft: #E8EEFF;
	--primary-glow: rgba(27, 77, 255, .35);

	/* Surfaces */
	--navy: #0A1A3B;
	--navy-2: #0E2048;
	--navy-3: #132657;
	--lavender: #EEF1FF;
	--lavender-2: #F5F7FF;
	--surface: #F7F8FB;
	--surface-2: #F0F2F9;

	/* Ink */
	--ink: #0B1426;
	--ink-2: #1E2A44;
	--ink-3: #35425E;
	--muted: #6B7693;
	--muted-2: #9AA3BC;

	/* Borders */
	--border: #E4E7F1;
	--border-2: #D2D7E4;
	--border-dark: rgba(255,255,255,.09);

	/* Feedback */
	--success: #10B981;
	--danger: #EF4444;
	--warning: #F59E0B;
	--star: #F5B50A;

	/* Radii */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-2xl: 36px;
	--radius-pill: 999px;

	/* Layout */
	--max: 1240px;
	--max-prose: 720px;
	--max-narrow: 960px;
	--pad: clamp(16px, 4vw, 32px);

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(11,20,38,.04);
	--shadow-sm: 0 2px 6px rgba(11,20,38,.05), 0 1px 2px rgba(11,20,38,.04);
	--shadow: 0 6px 16px -4px rgba(11,20,38,.06), 0 2px 6px -2px rgba(11,20,38,.04);
	--shadow-md: 0 14px 30px -12px rgba(11,20,38,.10), 0 4px 10px -4px rgba(11,20,38,.05);
	--shadow-lg: 0 28px 50px -18px rgba(11,20,38,.18), 0 10px 20px -10px rgba(11,20,38,.10);
	--shadow-glow: 0 14px 34px -12px var(--primary-glow);
	--shadow-inner: inset 0 1px 0 rgba(255,255,255,.05);

	/* Motion */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--t-fast: .18s;
	--t: .28s;
	--t-slow: .5s;

	/* Fonts */
	--font-ar: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
	--font-en: "Inter", system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale */
	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-base: 1rem;
	--fs-md: clamp(1rem, .95rem + .25vw, 1.125rem);
	--fs-lg: clamp(1.125rem, 1rem + .5vw, 1.25rem);
	--fs-xl: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
	--fs-2xl: clamp(1.5rem, 1.15rem + 1.6vw, 2rem);
	--fs-3xl: clamp(1.875rem, 1.2rem + 3vw, 2.75rem);
	--fs-4xl: clamp(2.25rem, 1.4rem + 4vw, 3.5rem);
	--fs-5xl: clamp(2.75rem, 1.4rem + 6vw, 4.5rem);

	/* Spacing */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
	--sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-ar);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--primary); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid rgba(27,77,255,.45); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--primary); color: #fff; }

/* ===== Layout ===== */
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.container--prose { max-width: var(--max-prose); }
.container--narrow { max-width: var(--max-narrow); }
.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--soft { background: var(--lavender); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--navy); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .section__lead { color: rgba(255,255,255,.72); }

/* Decorative blueprint background (optional) */
.bg-blueprint {
	position: relative;
	background:
		radial-gradient(600px 380px at 85% -5%, rgba(27,77,255,.10), transparent 60%),
		radial-gradient(500px 320px at -5% 110%, rgba(27,77,255,.07), transparent 60%),
		var(--lavender-2);
}
.bg-blueprint::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(27,77,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27,77,255,.035) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
	        mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
	pointer-events: none;
}

/* ===== Kicker / eyebrow ===== */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	background: var(--primary-soft);
	color: var(--primary);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: 18px;
	border: 1px solid rgba(27,77,255,.14);
}
.kicker::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--primary);
	box-shadow: 0 0 0 4px rgba(27,77,255,.18);
}
.kicker--dark { background: rgba(27,77,255,.16); color: #9AB4FF; border-color: rgba(154,180,255,.2); }
.kicker--light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
.kicker--light::before { background: #9AB4FF; box-shadow: 0 0 0 4px rgba(154,180,255,.18); }

/* Section header */
.section__header { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__header--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--fs-3xl); margin-bottom: 14px; line-height: 1.15; }
.section__lead { font-size: var(--fs-md); color: var(--muted); margin: 0; }
.grad {
	background: linear-gradient(120deg, var(--primary) 0%, #5A85FF 60%, #86A8FF 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	display: inline-block;
}

/* A11y */
.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; }
.skip-link:focus { inset-inline-start: 8px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 999; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ===== Buttons ===== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px;
	border-radius: 12px;
	font-weight: 700;
	font-size: .95rem;
	font-family: inherit;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
		background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;
}
.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-glow); }
.btn--primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 18px 40px -12px var(--primary-glow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: rgba(11,20,38,.03); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: #fff; color: var(--primary); border-color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.3); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--outline-light:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.5); }
.btn--sm { padding: 10px 18px; font-size: .875rem; border-radius: 10px; }
.btn--lg { padding: 16px 30px; font-size: 1rem; border-radius: 14px; }
.btn--block { width: 100%; }
.btn svg { transition: transform var(--t-fast) var(--ease); flex-shrink: 0; }
[dir="rtl"] .btn:hover svg { transform: translateX(-3px); }

/* ===== Site Header ===== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--border); background: rgba(255,255,255,.95); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

/* Wordmark logo */
.site-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; }
.site-logo:hover { color: var(--ink); }
.site-logo__mark { display: inline-flex; }
.site-logo__text { font-family: var(--font-en); letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; font-weight: 800; }
.site-logo__text--ar { font-family: var(--font-ar); letter-spacing: -.01em; text-transform: none; font-size: 1.05rem; }

.site-branding { display: inline-flex; align-items: center; flex-shrink: 0; order: 0; }
.site-branding .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.site-branding .custom-logo { height: 44px; width: auto; max-height: 44px; max-width: 180px; object-fit: contain; display: block; }
@media (min-width: 960px) {
	.site-branding .custom-logo { height: 52px; max-height: 52px; max-width: 220px; }
}

.site-nav { display: none; order: 1; flex: 1; justify-content: center; }
@media (min-width: 960px) {
	.site-nav { display: flex; }
	.site-nav__menu {
		display: flex; align-items: center; gap: 6px;
		list-style: none; padding: 0; margin: 0;
	}
	.site-nav__menu > li > a {
		display: inline-block; padding: 10px 16px; border-radius: 10px;
		font-weight: 500; font-size: .95rem; color: var(--ink-2);
		position: relative;
		transition: color var(--t-fast) var(--ease);
	}
	.site-nav__menu > li > a::after {
		content: "";
		position: absolute;
		inset-inline: 16px;
		bottom: 4px;
		height: 2px;
		background: var(--primary);
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--t) var(--ease);
	}
	.site-nav__menu > li > a:hover,
	.site-nav__menu > li.current-menu-item > a,
	.site-nav__menu > li.current-menu-parent > a { color: var(--ink); }
	.site-nav__menu > li > a:hover::after,
	.site-nav__menu > li.current-menu-item > a::after,
	.site-nav__menu > li.current-menu-parent > a::after { transform: scaleX(1); }
}

.site-header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; order: 2; }

.nav-toggle {
	display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0 10px;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
@media (min-width: 960px) { .nav-toggle { display: none; } }
.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); }

.mobile-nav {
	padding: 24px var(--pad) 32px;
	border-top: 1px solid var(--border);
	background: #fff;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__menu { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav__menu > li > a {
	display: block; padding: 14px 12px; border-radius: 10px;
	font-size: 1rem; font-weight: 500; color: var(--ink);
}
.mobile-nav__menu > li > a:hover,
.mobile-nav__menu > li.current-menu-item > a { background: var(--surface); color: var(--primary); }

/* ===== Hero (Homepage) ===== */
.hero {
	position: relative;
	padding-block: clamp(40px, 7vw, 88px) clamp(48px, 8vw, 96px);
	background: var(--lavender-2);
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(600px 380px at 90% -8%, rgba(27,77,255,.10), transparent 60%),
		radial-gradient(500px 320px at -6% 110%, rgba(27,77,255,.06), transparent 60%);
	pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1fr 1fr; } }

.hero__content { max-width: 580px; }
.hero__title {
	font-size: var(--fs-5xl);
	line-height: 1.08;
	margin-bottom: 20px;
	letter-spacing: -.02em;
	font-weight: 800;
}
.hero__title .grad { display: block; }
.hero__sub { font-size: var(--fs-md); color: var(--muted); max-width: 520px; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; }

/* Hero Visual — image with floating stat */
.hero__visual {
	position: relative;
	aspect-ratio: 5 / 4.6;
	border-radius: var(--radius-xl);
	overflow: visible;
}
.hero__visual--right { order: -1; }
@media (min-width: 960px) { .hero__visual--right { order: 0; } }

.hero__frame {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
	box-shadow: 0 40px 80px -30px rgba(10,26,59,.55), 0 10px 30px -14px rgba(10,26,59,.35);
	isolation: isolate;
}
.hero__frame::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(300px 200px at 30% 20%, rgba(27,77,255,.35), transparent 70%),
		radial-gradient(280px 220px at 80% 80%, rgba(96,165,250,.25), transparent 70%);
	z-index: 0;
}
.hero__frame-img {
	position: relative; z-index: 1;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--t-slow) var(--ease);
}
.hero__frame:hover .hero__frame-img { transform: scale(1.02); }

.hero__frame-placeholder {
	position: absolute; inset: 0; z-index: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px;
	color: rgba(255,255,255,.7);
	padding: 24px;
	text-align: center;
	font-size: .9rem;
	font-weight: 600;
}

/* Floating stat badge on hero image */
.hero__stat {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-start: -18px;
	background: #fff;
	border-radius: var(--radius);
	padding: 14px 18px;
	box-shadow: var(--shadow-lg);
	display: inline-flex; align-items: center; gap: 12px;
	z-index: 2;
}
@media (min-width: 640px) {
	.hero__stat { inset-block-start: 32px; inset-inline-start: -28px; padding: 16px 22px; }
}
.hero__stat-icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--primary-soft);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--primary);
	flex-shrink: 0;
}
.hero__stat-num { font-family: var(--font-en); font-weight: 800; font-size: 1.375rem; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.hero__stat-label { font-size: .8125rem; color: var(--muted); margin-top: 4px; }

/* ===== Page Hero ===== */
.page-hero {
	padding-block: clamp(60px, 9vw, 120px) clamp(32px, 5vw, 64px);
	background: var(--lavender-2);
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(520px 340px at 90% -10%, rgba(27,77,255,.10), transparent 60%),
		radial-gradient(420px 280px at -5% 105%, rgba(27,77,255,.06), transparent 60%);
	pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__inner { max-width: 820px; margin-inline: auto; text-align: center; }
.page-hero__inner--start { margin-inline: 0; text-align: start; }
.page-hero__title { font-size: var(--fs-4xl); margin-bottom: 16px; line-height: 1.1; }
.page-hero__sub { font-size: var(--fs-md); color: var(--muted); margin: 0 auto; max-width: 640px; }
.page-hero__inner--start .page-hero__sub { margin-inline: 0; }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 16px; font-size: .85rem; color: var(--muted); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs li + li::before { content: "/"; color: var(--muted-2); }
.breadcrumbs a:hover { color: var(--primary); }

/* ===== Grid ===== */
.grid { display: grid; gap: clamp(18px, 3vw, 28px); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Card base ===== */
.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(22px, 3vw, 30px);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
	position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #D8DDEC; }

/* Service / Expertise card with numbered badge */
.service-card { display: flex; flex-direction: column; gap: 14px; height: 100%; color: inherit; }
.service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.service-card__icon {
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--primary-soft);
	color: var(--primary);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.service-card:hover .service-card__icon { background: var(--primary); color: #fff; transform: scale(1.05); }
.service-card__num {
	font-family: var(--font-en);
	font-weight: 800;
	font-size: .8125rem;
	color: var(--muted-2);
	letter-spacing: .04em;
	background: var(--surface);
	padding: 5px 10px;
	border-radius: var(--radius-pill);
}
.service-card__title { font-size: 1.05rem; margin: 0; font-weight: 700; line-height: 1.3; }
.service-card__desc { color: var(--muted); margin: 0; font-size: .9rem; line-height: 1.6; }
.service-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.service-card__tag {
	font-size: .7rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--lavender);
	color: var(--primary);
	letter-spacing: .01em;
}
.service-card__more {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--primary); font-weight: 600; font-size: .875rem;
	margin-top: 4px;
}

/* Service card variant: highlighted */
.service-card--featured { background: var(--navy); color: #fff; border-color: transparent; }
.service-card--featured .service-card__title { color: #fff; }
.service-card--featured .service-card__desc { color: rgba(255,255,255,.7); }
.service-card--featured .service-card__icon { background: rgba(255,255,255,.1); color: #fff; }
.service-card--featured .service-card__num { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
.service-card--featured .service-card__tag { background: rgba(27,77,255,.25); color: #BFD0FF; }
.service-card--featured .service-card__badge {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 18px;
	background: var(--primary);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	letter-spacing: .03em;
}

/* ===== Pillars (dark numbered section) ===== */
.pillars {
	display: grid;
	gap: 32px;
	direction: ltr;
}
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { color: #fff; text-align: start; direction: rtl; }
.pillar__num {
	font-family: var(--font-en);
	font-weight: 900;
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	line-height: 1;
	letter-spacing: -.03em;
	background: linear-gradient(180deg, #5A85FF 0%, rgba(90,133,255,.15) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
	margin-bottom: 16px;
	display: block;
}
.pillar__title { font-size: var(--fs-xl); color: #fff; margin-bottom: 10px; font-weight: 700; }
.pillar__title small { display: inline-block; margin-inline-start: 6px; color: rgba(255,255,255,.45); font-weight: 500; font-size: .8em; }
.pillar__desc { color: rgba(255,255,255,.65); margin: 0; font-size: .95rem; max-width: 340px; line-height: 1.7; }

/* ===== Work card (portfolio) ===== */
.work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
	color: inherit;
	height: 100%;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.work-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy), var(--primary-dark));
}
.work-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.work-card:hover .work-card__img { transform: scale(1.04); }
.work-card__play {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--t) var(--ease);
}
.work-card__play-btn {
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(255,255,255,.92);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink);
	box-shadow: var(--shadow-lg);
}
.work-card:hover .work-card__play { opacity: 1; }
.work-card__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.6); font-weight: 700; font-size: 2rem;
}
.work-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.work-card__type {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px;
	background: var(--primary-soft);
	color: var(--primary);
	border-radius: var(--radius-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	align-self: flex-start;
}
.work-card__type svg { width: 14px; height: 14px; }
.work-card__title { font-size: var(--fs-lg); margin: 0; color: var(--ink); font-weight: 700; line-height: 1.35; }
.work-card__desc { color: var(--muted); margin: 0; font-size: .9rem; line-height: 1.6; }
.work-card__stats {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 16px;
	background: var(--surface);
	border-radius: var(--radius);
}
.work-card__stat { text-align: center; }
.work-card__stat-num { font-family: var(--font-en); font-weight: 800; font-size: 1.1rem; color: var(--ink); letter-spacing: -.01em; }
.work-card__stat-label { font-size: .7rem; color: var(--muted); margin-top: 4px; }
.work-card__more {
	margin-top: auto;
	color: var(--primary);
	font-weight: 600; font-size: .875rem;
	display: inline-flex; align-items: center; gap: 6px;
	padding-top: 4px;
}

/* Featured / portrait work card */
.work-card--tall .work-card__media { aspect-ratio: 3 / 4.2; }
.work-card--dark { background: var(--navy); border-color: transparent; }
.work-card--dark .work-card__title { color: #fff; }
.work-card--dark .work-card__desc { color: rgba(255,255,255,.65); }
.work-card--dark .work-card__type { background: rgba(255,255,255,.08); color: #BFD0FF; }
.work-card--dark .work-card__stats { background: rgba(255,255,255,.04); }
.work-card--dark .work-card__stat-num { color: #fff; }
.work-card--dark .work-card__stat-label { color: rgba(255,255,255,.55); }
.work-card--dark .work-card__more { color: #9AB4FF; }

/* Asymmetric works grid (row 1: 1 tall + 1 wide, row 2: 2 equal) */
.works-asymm { display: grid; gap: clamp(18px, 3vw, 24px); }
@media (min-width: 900px) {
	.works-asymm { grid-template-columns: 0.85fr 1.15fr; grid-auto-rows: auto; }
	.works-asymm__tall { grid-row: span 1; }
	.works-asymm__wide { grid-row: span 1; }
}

/* ===== Process (horizontal numbered timeline) ===== */
.process { position: relative; }
.process__track {
	display: grid;
	gap: 20px;
	align-items: start;
}
@media (min-width: 768px) { .process__track { grid-template-columns: repeat(4, 1fr); position: relative; } }
.process__track::before {
	content: "";
	display: none;
	position: absolute;
	top: 28px;
	inset-inline: 5%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
@media (min-width: 768px) { .process__track::before { display: block; } }

.process__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	position: relative;
}
.process__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 16px;
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.6);
	font-family: var(--font-en);
	font-weight: 800;
	font-size: 1.25rem;
	border: 1px solid rgba(255,255,255,.1);
	position: relative;
	z-index: 1;
	backdrop-filter: blur(12px);
}
.process__step--active .process__num { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 5px rgba(27,77,255,.15); }
.process__title { font-size: 1rem; color: #fff; margin: 0; font-weight: 700; }
.process__desc { color: rgba(255,255,255,.6); margin: 0; font-size: .875rem; line-height: 1.6; }

/* ===== Stats (centered number cards) ===== */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 24px 16px; }
.stat__num { font-family: var(--font-en); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--primary); line-height: 1; margin-bottom: 8px; letter-spacing: -.02em; }
.section--dark .stat__num { color: #9AB4FF; }
.stat__label { color: var(--muted); font-size: .9rem; margin: 0; }
.section--dark .stat__label { color: rgba(255,255,255,.6); }

/* ===== Testimonials ===== */
.testimonials { display: grid; gap: 24px; }
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
.testimonial {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 30px;
	display: flex; flex-direction: column; gap: 18px;
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial__rating { display: inline-flex; gap: 3px; color: var(--star); }
.testimonial__rating svg { width: 18px; height: 18px; }
.testimonial__quote { font-size: 1rem; color: var(--ink-2); margin: 0; line-height: 1.75; flex: 1; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
	width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
	background: var(--primary-soft);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; color: var(--primary);
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name { font-weight: 700; font-size: .95rem; color: var(--ink); }
.testimonial__role { color: var(--muted); font-size: .8125rem; margin-top: 2px; }

/* ===== Pricing card ===== */
.pricing-grid { display: grid; gap: clamp(20px, 3vw, 28px); }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.pricing-card {
	position: relative;
	background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 100%);
	color: #fff;
	border-radius: var(--radius-xl);
	padding: clamp(28px, 4vw, 44px);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.pricing-card::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(300px 200px at 20% -10%, rgba(27,77,255,.3), transparent 60%),
		radial-gradient(260px 180px at 110% 110%, rgba(96,165,250,.2), transparent 60%);
	pointer-events: none;
}
.pricing-card > * { position: relative; z-index: 1; }
.pricing-card__label { font-size: .875rem; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.pricing-card__title { font-size: var(--fs-2xl); color: #fff; margin-bottom: 20px; font-weight: 800; line-height: 1.25; }
.pricing-card__price {
	display: flex; align-items: baseline; gap: 10px;
	margin-bottom: 24px;
}
.pricing-card__amount { font-family: var(--font-en); font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.5rem); color: #fff; letter-spacing: -.02em; line-height: 1; }
.pricing-card__currency { font-size: 1.125rem; color: rgba(255,255,255,.75); font-weight: 600; }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.pricing-card__feature { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.82); font-size: .95rem; }
.pricing-card__feature svg { color: #9AB4FF; flex-shrink: 0; margin-top: 3px; }

.pricing-info { display: flex; flex-direction: column; gap: 16px; }
.pricing-info__title { font-size: var(--fs-2xl); margin-bottom: 12px; line-height: 1.25; }
.pricing-info__lead { color: var(--muted); font-size: var(--fs-md); margin-bottom: 8px; }
.pricing-info__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pricing-info__bullet {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.pricing-info__bullet-icon { width: 24px; height: 24px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pricing-info__bullet-title { font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 2px; }
.pricing-info__bullet-desc { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* ===== E-commerce platforms (dark tiles) ===== */
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .platforms { grid-template-columns: repeat(4, 1fr); } }
.platform-tile {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
	gap: 18px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--radius-lg);
	padding: 22px;
	min-height: 160px;
	color: #fff;
	transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.platform-tile:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); transform: translateY(-3px); color: #fff; }
.platform-tile__icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: rgba(255,255,255,.07);
	display: inline-flex; align-items: center; justify-content: center;
	color: #9AB4FF;
}
.platform-tile__icon img, .platform-tile__icon svg { width: 24px; height: 24px; object-fit: contain; }
.platform-tile__name { font-size: 1rem; font-weight: 700; margin: 0; color: #fff; }
.platform-tile__desc { font-size: .8rem; color: rgba(255,255,255,.55); margin: 0; line-height: 1.5; }

.platforms__heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.platforms__filter { display: inline-flex; align-items: center; gap: 8px; }
.platforms__pill {
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1);
	color: rgba(255,255,255,.75);
	font-size: .85rem;
	font-weight: 600;
}
.platforms__pill.is-active { background: rgba(27,77,255,.2); border-color: rgba(27,77,255,.35); color: #fff; }

/* ===== Logos trust strip ===== */
.logos-strip {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: clamp(24px, 4vw, 48px);
	opacity: .85;
}
.logos-strip__item {
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px;
	color: var(--muted);
	opacity: .7;
	transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.logos-strip__item:hover { opacity: 1; color: var(--ink); }
.logos-strip__item svg, .logos-strip__item img { height: 100%; width: auto; object-fit: contain; }

/* ===== CTA block ===== */
.cta-block {
	border-radius: var(--radius-xl);
	padding: clamp(32px, 5vw, 64px);
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
	color: #fff;
	position: relative;
	overflow: hidden;
}
.cta-block::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(400px 260px at 90% -20%, rgba(27,77,255,.32), transparent 60%),
		radial-gradient(320px 220px at -10% 110%, rgba(96,165,250,.22), transparent 60%);
	pointer-events: none;
}
.cta-block__inner { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 768px) { .cta-block__inner { grid-template-columns: 1.2fr 1fr; } }
.cta-block h2 { color: #fff; font-size: var(--fs-3xl); margin-bottom: 12px; font-weight: 800; }
.cta-block p { color: rgba(255,255,255,.72); margin: 0; font-size: var(--fs-md); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 767px) { .cta-block__actions { justify-content: flex-start; } }

/* CTA banner (soft lavender variant) */
.cta-soft {
	border-radius: var(--radius-xl);
	padding: clamp(40px, 5vw, 72px);
	background: var(--lavender);
	text-align: center;
	border: 1px solid #DDE3F5;
}
.cta-soft__title { font-size: var(--fs-3xl); margin-bottom: 12px; line-height: 1.2; }
.cta-soft__lead { color: var(--muted); font-size: var(--fs-md); margin-bottom: 28px; max-width: 580px; margin-inline: auto; }
.cta-soft__actions { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ===== Forms ===== */
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-weight: 600; font-size: .875rem; color: var(--ink-2); }
.form__label .req { color: var(--danger); }
.form__input, .form__textarea, .form__select {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
	color: var(--ink);
	font-size: 1rem;
	font-family: inherit;
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--muted-2); }
.form__input:hover, .form__textarea:hover, .form__select:hover { border-color: var(--border-2); background: #fff; }
.form__input:focus, .form__textarea:focus, .form__select:focus {
	outline: none;
	border-color: var(--primary);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(27,77,255,.12);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__honey { position: absolute; inset-inline-start: -9999px; }
.form__error { color: var(--danger); font-size: .8125rem; margin: 0; }
.form__feedback { padding: 14px 18px; border-radius: 12px; font-size: .9rem; }
.form__feedback--success { background: rgba(16,185,129,.1); color: #047857; border: 1px solid rgba(16,185,129,.3); }
.form__feedback--error { background: rgba(239,68,68,.1); color: #B91C1C; border: 1px solid rgba(239,68,68,.3); }
.form__field.has-error .form__input,
.form__field.has-error .form__textarea,
.form__field.has-error .form__select { border-color: var(--danger); }

/* ===== Contact layout ===== */
.contact-layout { display: grid; gap: clamp(24px, 4vw, 40px); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.3fr .9fr; } }

.contact-form-wrap {
	background: var(--lavender-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: clamp(28px, 4vw, 44px);
}

.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info__block {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 22px;
}
.contact-info__title { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-bottom: 10px; font-weight: 700; }
.contact-info__title svg { color: var(--primary); }
.contact-info__text { font-size: .95rem; color: var(--muted); margin-bottom: 14px; }
.contact-info__map {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--border);
}
.contact-info__map iframe, .contact-info__map img, .contact-info__map svg { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

.contact-info__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-info__card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	display: flex; flex-direction: column; gap: 6px;
}
.contact-info__card-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.contact-info__card-label { font-size: .75rem; color: var(--muted); }
.contact-info__card-value { font-weight: 700; color: var(--ink); font-size: .9rem; word-break: break-all; }

.contact-info__social {
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 22px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.contact-info__social-title { font-weight: 700; color: #fff; font-size: 1rem; margin: 0; }
.contact-info__social-links { display: inline-flex; gap: 8px; }
.contact-info__social-link {
	width: 38px; height: 38px; border-radius: 10px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.1);
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
	transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.contact-info__social-link:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

/* ===== Filter chips ===== */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; padding: 0; list-style: none; }
.filter-chip {
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	background: #fff;
	border: 1px solid var(--border);
	color: var(--ink-2);
	font-size: .9rem; font-weight: 600;
	cursor: pointer;
	transition: all var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===== Footer ===== */
.site-footer {
	background: #fff;
	border-top: 1px solid var(--border);
	padding-block: clamp(36px, 5vw, 56px) clamp(20px, 3vw, 28px);
	color: var(--muted);
	font-size: .9rem;
}
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 0; }
.site-footer__links a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	color: var(--ink-2);
	font-weight: 500;
	font-size: .9rem;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.site-footer__links a:hover { background: var(--surface); color: var(--primary); }
.site-footer__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-en); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
.site-footer__copy { margin: 0; font-size: .85rem; }
.site-footer__meta { display: inline-flex; align-items: center; gap: 14px; }
.site-footer__meta a { color: var(--muted); }
.site-footer__meta a:hover { color: var(--primary); }

/* WhatsApp floating button */
.wa-float {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: 90;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 14px 32px -10px rgba(37,211,102,.45);
	transition: transform var(--t) var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); color: #fff; }

/* ===== Filter animation helpers ===== */
.work-card.is-hidden { display: none !important; }
.wa-float[data-hidden="true"] { transform: translateY(100px); opacity: 0; pointer-events: none; }
.wa-float { transition: transform var(--t) var(--ease), opacity var(--t) var(--ease), background var(--t) var(--ease); }

/* Word-stagger reveal for hero title */
.hero__title .word { display: inline-block; }

/* ===== Reveal animations ===== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="blur"] { opacity: 0; transform: scale(.98); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
[data-reveal="blur"].is-visible { opacity: 1; transform: scale(1); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-reveal="blur"] { opacity: 1; transform: none; filter: none; }
}

/* ===== Single post (article) ===== */
.article { padding-block: clamp(40px, 6vw, 80px); }
.article__header { margin-bottom: 32px; text-align: start; }
.article__title { font-size: var(--fs-3xl); margin-bottom: 12px; }
.article__meta { color: var(--muted); font-size: .875rem; }
.article__content { font-size: var(--fs-md); line-height: 1.8; color: var(--ink-2); max-width: var(--max-prose); margin-inline: auto; }
.article__content h2, .article__content h3 { margin-block: 1.6em .5em; }
.article__content img { border-radius: var(--radius); margin-block: 1em; }
.article__content blockquote { border-inline-start: 4px solid var(--primary); padding-inline-start: 18px; color: var(--ink-2); font-style: italic; margin-block: 1.5em; }
.article__thumb { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; max-width: var(--max-prose); margin-inline: auto; }

/* ===== Pagination ===== */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.pagination a, .pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--ink-2);
	font-weight: 600;
	font-size: .9rem;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ===== Utility ===== */
.u-text-center { text-align: center; }
.u-text-start { text-align: start; }
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mb-0 { margin-bottom: 0; }
.u-visually-hidden { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.u-no-wrap { white-space: nowrap; }
.u-divider { height: 1px; background: var(--border); margin-block: 32px; }

/* ===== 404 ===== */
.error-404 { text-align: center; padding-block: 80px 120px; }
.error-404__code { font-family: var(--font-en); font-weight: 800; font-size: clamp(5rem, 12vw, 9rem); color: var(--primary); line-height: 1; margin: 0 0 16px; letter-spacing: -.04em; }
.error-404__title { font-size: var(--fs-2xl); margin-bottom: 12px; }
.error-404__text { color: var(--muted); margin-bottom: 28px; }

/* ===== Search form ===== */
.search-form { display: flex; gap: 8px; }
.search-form__input { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.search-form__submit { padding: 12px 20px; border-radius: 10px; background: var(--primary); color: #fff; border: none; font-weight: 700; }