/* ==========================================================================
   XILXIL — DESIGN SYSTEM (xil-main.css)
   "AI Systems That Make Businesses Work Smarter."
   --------------------------------------------------------------------------
   CHAPTERS
     1.  Font (self-hosted InterVariable)
     2.  Design tokens
     3.  Section themes (light default · dark · deep)
     4.  Global reset & base
     5.  Layout (section, container, grids)
     6.  Typography utilities
     7.  Components (buttons, links, cards, tiles, chips, lists, forms)
     8.  Background systems (grid lines, glow fields)
     9.  Accessibility (focus, sr-only, skip link)
     10. Motion (reveal-on-scroll)
     11. Reduced-motion kill switch
   --------------------------------------------------------------------------
   RULES
     - Every custom class is prefixed `xil-`
     - Colors/spacings come from tokens — never hardcode values in sections
     - Motion: 150–700ms, one ambient animation per view, reduced-motion safe
   ========================================================================== */


/* ==========================================================================
   1. FONT — self-hosted InterVariable (single file, weights 100–900)
   Place the file at: assets/fonts/InterVariable.woff2
   Download: https://rsms.me/inter/font-files/InterVariable.woff2 (OFL licence)
   If the file is missing the system stack below takes over seamlessly.
   ========================================================================== */

@font-face {
	font-family: 'InterVariable';
	src: url('../fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {
	/* -- Raw palette (reference values; use semantic tokens in templates) -- */
	--xil-navy-950: #060B14;
	--xil-navy-900: #0A1220;
	--xil-navy-850: #0E182B;
	--xil-navy-800: #13223A;
	--xil-light-50: #F6F8FC;
	--xil-white: #FFFFFF;
	--xil-ink: #0B1626;
	--xil-blue-700: #1D4ED8;
	--xil-blue-500: #2563EB;
	--xil-blue-400: #5B8CFF;
	--xil-violet-600: #7C3AED;
	--xil-violet-400: #A78BFA;
	--xil-cyan-400: #22D3EE;
	--xil-cyan-600: #0891B2;
	--xil-green-500: #10B981;

	/* -- Brand (master-prompt token names) -- */
	--xil-primary: var(--xil-blue-500);   /* electric blue */
	--xil-secondary: var(--xil-violet-600); /* controlled violet */
	--xil-accent: var(--xil-cyan-600);    /* subtle cyan — signal use only */
	--xil-background: var(--xil-light-50);
	--xil-surface: var(--xil-white);
	--xil-text: var(--xil-ink);
	--xil-muted: #51607A;

	/* -- Extended semantic tokens -- */
	--xil-surface-2: #EDF1F8;
	--xil-border: rgba(11, 22, 38, 0.10);
	--xil-border-strong: rgba(11, 22, 38, 0.20);
	--xil-on-primary: #FFFFFF;
	--xil-link: var(--xil-blue-700);
	--xil-focus: var(--xil-blue-700);
	--xil-success: #0E9F6E;
	--xil-primary-tint: rgba(37, 99, 235, 0.08);
	--xil-primary-tint-2: rgba(37, 99, 235, 0.16);
	--xil-accent-tint: rgba(8, 145, 178, 0.10);
	--xil-success-tint: rgba(14, 159, 110, 0.12);
	--xil-grad-1: #2563EB;
	--xil-grad-2: #7C3AED;
	--xil-grad-3: #0891B2;
	--xil-grid-line: rgba(11, 22, 38, 0.05);
	--xil-glow: rgba(37, 99, 235, 0.10);
	--xil-shadow: 0 1px 2px rgba(11, 22, 38, 0.04), 0 10px 28px rgba(11, 22, 38, 0.07);
	--xil-shadow-lg: 0 2px 4px rgba(11, 22, 38, 0.05), 0 22px 52px rgba(11, 22, 38, 0.13);

	/* -- Typography -- */
	--xil-font-heading: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--xil-font-body: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--xil-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
		'Liberation Mono', monospace;

	/* Type scale — explicit mobile → desktop control via clamp() */
	--xil-fs-display: clamp(2.6rem, 1.2rem + 4.6vw, 4.5rem);  /* 41.6 → 72px  */
	--xil-fs-h1: clamp(2.15rem, 1.2rem + 3.1vw, 3.4rem);      /* 34.4 → 54.4px */
	--xil-fs-h2: clamp(1.65rem, 1.1rem + 1.9vw, 2.35rem);     /* 26.4 → 37.6px */
	--xil-fs-h3: clamp(1.15rem, 1.03rem + 0.55vw, 1.4rem);    /* 18.4 → 22.4px */
	--xil-fs-lead: clamp(1.02rem, 0.97rem + 0.3vw, 1.19rem);  /* 16.3 → 19px  */
	--xil-fs-body: 1rem;
	--xil-fs-small: 0.9rem;
	--xil-fs-caption: 0.8rem;
	--xil-lh-display: 1.06;
	--xil-lh-heading: 1.16;
	--xil-lh-body: 1.65;
	--xil-tracking-tight: -0.025em;
	--xil-tracking-label: 0.14em;

	/* -- Shape, space, container -- */
	--xil-container: 1240px;
	--xil-radius-sm: 8px;
	--xil-radius-md: 12px;
	--xil-radius-lg: 18px;
	--xil-radius-xl: 26px;
	--xil-radius-pill: 999px;
	--xil-space-xs: 0.5rem;
	--xil-space-sm: 1rem;
	--xil-space-md: 1.5rem;
	--xil-space-lg: 2.5rem;
	--xil-space-xl: 4rem;
	--xil-section-space: clamp(4.5rem, 9vw, 7.5rem);
	--xil-header-h: 76px;

	/* -- Motion -- */
	--xil-transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--xil-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* -- Layering -- */
	--xil-z-header: 1000;
	--xil-z-drawer: 1100;
	--xil-z-overlay: 1200;
}


/* ==========================================================================
   3. SECTION THEMES
   Sections declare a theme; every child component follows automatically.
   ========================================================================== */

.xil-section {
	--xil-background: var(--xil-light-50);
	--xil-surface: var(--xil-white);
	--xil-surface-2: #EDF1F8;
	--xil-text: var(--xil-ink);
	--xil-muted: #51607A;
	--xil-border: rgba(11, 22, 38, 0.10);
	--xil-border-strong: rgba(11, 22, 38, 0.20);
	--xil-accent: var(--xil-cyan-600);
	--xil-link: var(--xil-blue-700);
	--xil-focus: var(--xil-blue-700);
	--xil-success: #0E9F6E;
	--xil-primary-tint: rgba(37, 99, 235, 0.08);
	--xil-primary-tint-2: rgba(37, 99, 235, 0.16);
	--xil-accent-tint: rgba(8, 145, 178, 0.10);
	--xil-success-tint: rgba(14, 159, 110, 0.12);
	--xil-grad-1: #2563EB;
	--xil-grad-2: #7C3AED;
	--xil-grad-3: #0891B2;
	--xil-grid-line: rgba(11, 22, 38, 0.05);
	--xil-glow: rgba(37, 99, 235, 0.10);
	--xil-shadow: 0 1px 2px rgba(11, 22, 38, 0.04), 0 10px 28px rgba(11, 22, 38, 0.07);
	--xil-shadow-lg: 0 2px 4px rgba(11, 22, 38, 0.05), 0 22px 52px rgba(11, 22, 38, 0.13);
}

/* Dark technology sections (navy-900) and deep sections (navy-950). */
.xil-section--dark,
.xil-section--deep {
	--xil-background: var(--xil-navy-900);
	--xil-surface: var(--xil-navy-850);
	--xil-surface-2: var(--xil-navy-800);
	--xil-text: #F2F6FD;
	--xil-muted: #9AAAC6;
	--xil-border: rgba(154, 170, 198, 0.15);
	--xil-border-strong: rgba(154, 170, 198, 0.32);
	--xil-accent: var(--xil-cyan-400);
	--xil-link: var(--xil-blue-400);
	--xil-focus: var(--xil-cyan-400);
	--xil-success: #34D399;
	--xil-primary-tint: rgba(91, 140, 255, 0.10);
	--xil-primary-tint-2: rgba(91, 140, 255, 0.20);
	--xil-accent-tint: rgba(34, 211, 238, 0.12);
	--xil-success-tint: rgba(52, 211, 153, 0.14);
	--xil-grad-1: #5B8CFF;
	--xil-grad-2: #A78BFA;
	--xil-grad-3: #22D3EE;
	--xil-grid-line: rgba(154, 170, 198, 0.07);
	--xil-glow: rgba(59, 118, 246, 0.16);
	--xil-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.30);
	--xil-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.40), 0 26px 64px rgba(0, 0, 0, 0.46);
}

.xil-section--deep {
	--xil-background: var(--xil-navy-950);
	--xil-surface: #0B1526;
	--xil-surface-2: var(--xil-navy-850);
}


/* ==========================================================================
   4. GLOBAL RESET & BASE
   The child theme owns every template, so a compact global reset is safe.
   Load order (child CSS after Astra) wins ties against parent defaults.
   ========================================================================== */

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

html {
	scroll-padding-top: calc(var(--xil-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--xil-background);
	color: var(--xil-text);
	font-family: var(--xil-font-body);
	font-size: var(--xil-fs-body);
	line-height: var(--xil-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--xil-font-heading);
	color: var(--xil-text);
	font-weight: 700;
	line-height: var(--xil-lh-heading);
	letter-spacing: var(--xil-tracking-tight);
	text-wrap: balance;
}

h1 { font-size: var(--xil-fs-h1); }
h2 { font-size: var(--xil-fs-h2); }
h3 { font-size: var(--xil-fs-h3); line-height: 1.3; letter-spacing: -0.01em; }
h4, h5, h6 { font-size: var(--xil-fs-body); line-height: 1.4; }

ul, ol {
	padding: 0;
	list-style: none;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input, select, textarea {
	font: inherit;
	color: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
}

::selection {
	background: var(--xil-primary);
	color: var(--xil-on-primary);
}

/* Article body links (Knowledge Hub, agent pages). */
.xil-content a:not(.xil-btn):not(.xil-link):not(.xil-arrowlink) {
	color: var(--xil-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.xil-content a:not(.xil-btn):not(.xil-link):not(.xil-arrowlink):hover {
	color: var(--xil-text);
}


/* ==========================================================================
   5. LAYOUT
   ========================================================================== */

.xil-section {
	position: relative;
	background: var(--xil-background);
	color: var(--xil-text);
	padding-block: var(--xil-section-space);
	font-family: var(--xil-font-body);
	isolation: isolate;
}

.xil-section--flush { padding-block: 0; }
.xil-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.xil-container {
	width: min(100% - 48px, var(--xil-container));
	margin-inline: auto;
}

.xil-container--narrow {
	width: min(100% - 48px, 860px);
}

.xil-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--xil-space-md);
	max-width: 760px;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.xil-section-head--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.xil-section-head--split {
	max-width: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--xil-space-lg);
	align-items: end;
}

@media (min-width: 900px) {
	.xil-section-head--split {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	}
}

.xil-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.4rem);
	grid-template-columns: 1fr;
}

.xil-grid--compact { gap: var(--xil-space-sm); }

@media (min-width: 640px) {
	.xil-grid--2,
	.xil-grid--3,
	.xil-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.xil-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.xil-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.xil-stack {
	display: flex;
	flex-direction: column;
	gap: var(--xil-space-sm);
}

.xil-stack--lg { gap: var(--xil-space-md); }

.xil-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.xil-row--between { justify-content: space-between; }

.xil-divider {
	height: 1px;
	width: 100%;
	background: var(--xil-border);
	border: 0;
}


/* ==========================================================================
   6. TYPOGRAPHY UTILITIES
   ========================================================================== */

.xil-display {
	font-family: var(--xil-font-heading);
	font-size: var(--xil-fs-display);
	line-height: var(--xil-lh-display);
	letter-spacing: var(--xil-tracking-tight);
	font-weight: 700;
	text-wrap: balance;
}

.xil-h1 {
	font-size: var(--xil-fs-h1);
	line-height: var(--xil-lh-heading);
	letter-spacing: var(--xil-tracking-tight);
	font-weight: 700;
}

.xil-h2 {
	font-size: var(--xil-fs-h2);
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.xil-h3 {
	font-size: var(--xil-fs-h3);
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 600;
}

.xil-lead {
	font-size: var(--xil-fs-lead);
	line-height: 1.6;
	color: var(--xil-muted);
}

.xil-small { font-size: var(--xil-fs-small); line-height: 1.55; }

.xil-caption {
	font-size: var(--xil-fs-caption);
	line-height: 1.5;
	color: var(--xil-muted);
}

.xil-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: var(--xil-tracking-label);
	text-transform: uppercase;
	color: var(--xil-muted);
}

.xil-mono { font-family: var(--xil-font-mono); }

.xil-maxw-sm { max-width: 560px; }
.xil-maxw-md { max-width: 680px; }
.xil-maxw-lg { max-width: 820px; }

.xil-text-center { text-align: center; }

.xil-text-gradient {
	color: var(--xil-primary);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.xil-text-gradient {
		background: linear-gradient(
			94deg,
			var(--xil-grad-1) 0%,
			var(--xil-grad-2) 52%,
			var(--xil-grad-3) 105%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.xil-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 14px;
	border: 1px solid var(--xil-border-strong);
	border-radius: var(--xil-radius-pill);
	background: var(--xil-surface);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: var(--xil-tracking-label);
	text-transform: uppercase;
	color: var(--xil-muted);
	line-height: 1.1;
	width: fit-content;
}

.xil-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--xil-primary);
	box-shadow: 0 0 0 3px var(--xil-primary-tint-2);
	flex: none;
}

.xil-eyebrow--accent::before {
	background: var(--xil-accent);
	box-shadow: 0 0 0 3px var(--xil-accent-tint);
}


/* ==========================================================================
   7. COMPONENTS
   ========================================================================== */

/* --- Buttons ---------------------------------------------------------- */

.xil-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 26px;
	border-radius: var(--xil-radius-md);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	max-width: 100%;
	transition:
		transform var(--xil-transition),
		box-shadow var(--xil-transition),
		background-color var(--xil-transition),
		border-color var(--xil-transition),
		color var(--xil-transition);
}

.xil-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.xil-btn--primary {
	background: linear-gradient(180deg, #3B76F6, #2563EB);
	color: var(--xil-on-primary);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 8px 20px rgba(37, 99, 235, 0.32);
}

.xil-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.20),
		0 12px 28px rgba(37, 99, 235, 0.42);
}

.xil-btn--primary:active {
	transform: translateY(0);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 4px 12px rgba(37, 99, 235, 0.35);
}

.xil-btn--secondary {
	background: var(--xil-surface);
	color: var(--xil-text);
	border: 1px solid var(--xil-border-strong);
}

.xil-btn--secondary:hover {
	transform: translateY(-1px);
	border-color: var(--xil-primary);
	background: var(--xil-primary-tint);
	color: var(--xil-text);
}

.xil-btn--ghost {
	background: transparent;
	color: var(--xil-muted);
	border: 1px solid transparent;
	padding-inline: 18px;
}

.xil-btn--ghost:hover {
	color: var(--xil-text);
	background: var(--xil-primary-tint);
}

/* Theme-adaptive inverse button (navy on light, light on dark). */
.xil-btn--invert {
	background: var(--xil-text);
	color: var(--xil-background);
	border: 1px solid transparent;
}

.xil-btn--invert:hover {
	transform: translateY(-1px);
	opacity: 0.92;
	box-shadow: var(--xil-shadow-lg);
}

.xil-btn--lg {
	min-height: 56px;
	padding: 16px 32px;
	font-size: 1rem;
	border-radius: 14px;
}

.xil-btn--sm {
	min-height: 44px;
	padding: 10px 18px;
	font-size: 0.875rem;
}

.xil-btn--block { width: 100%; }

.xil-btn[disabled],
.xil-btn[aria-disabled='true'] {
	opacity: 0.55;
	pointer-events: none;
}

/* --- Links ------------------------------------------------------------ */

.xil-link {
	color: var(--xil-link);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--xil-transition);
}

.xil-link:hover { color: var(--xil-text); }

.xil-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--xil-link);
	font-weight: 600;
	font-size: 0.95rem;
	transition: color var(--xil-transition);
}

.xil-arrowlink svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--xil-transition);
}

.xil-arrowlink:hover { color: var(--xil-text); }
.xil-arrowlink:hover svg { transform: translateX(3px); }

/* --- Cards ------------------------------------------------------------ */

.xil-card {
	position: relative;
	background: var(--xil-surface);
	border: 1px solid var(--xil-border);
	border-radius: var(--xil-radius-lg);
	box-shadow: var(--xil-shadow);
}

.xil-card--pad { padding: clamp(1.35rem, 2.6vw, 1.9rem); }
.xil-card--flat { box-shadow: none; }

.xil-card--interactive {
	transition:
		transform var(--xil-transition),
		box-shadow var(--xil-transition),
		border-color var(--xil-transition);
}

.xil-card--interactive:hover {
	transform: translateY(-3px);
	box-shadow: var(--xil-shadow-lg);
	border-color: var(--xil-border-strong);
}

/* --- Icon tiles -------------------------------------------------------- */

.xil-icon-tile {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: var(--xil-radius-md);
	background: var(--xil-primary-tint);
	color: var(--xil-primary);
	border: 1px solid var(--xil-primary-tint-2);
}

.xil-icon-tile--accent {
	background: var(--xil-accent-tint);
	color: var(--xil-accent);
	border-color: var(--xil-accent-tint);
}

.xil-icon-tile--success {
	background: var(--xil-success-tint);
	color: var(--xil-success);
	border-color: var(--xil-success-tint);
}

.xil-icon {
	width: 22px;
	height: 22px;
	flex: none;
}

.xil-icon--sm { width: 18px; height: 18px; }
.xil-icon--lg { width: 26px; height: 26px; }

/* --- Chips ------------------------------------------------------------ */

.xil-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: var(--xil-radius-pill);
	background: var(--xil-surface-2);
	border: 1px solid var(--xil-border);
	color: var(--xil-muted);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color var(--xil-transition), color var(--xil-transition);
}

.xil-chip svg { width: 14px; height: 14px; flex: none; }

.xil-chip--primary {
	background: var(--xil-primary-tint);
	border-color: var(--xil-primary-tint-2);
	color: var(--xil-link);
}

.xil-chip--accent {
	background: var(--xil-accent-tint);
	border-color: var(--xil-accent-tint);
	color: var(--xil-accent);
}

/* --- Check list --------------------------------------------------------- */

.xil-checklist {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.xil-checklist li {
	position: relative;
	padding-left: 32px;
	font-size: 0.95rem;
	line-height: 1.55;
}

.xil-checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--xil-primary-tint);
	border: 1px solid var(--xil-primary-tint-2);
}

.xil-checklist li::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 7px;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--xil-primary);
	border-bottom: 2px solid var(--xil-primary);
	transform: rotate(-45deg);
}

/* --- Forms -------------------------------------------------------------- */

.xil-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.xil-field-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--xil-text);
}

.xil-input,
.xil-select,
.xil-textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	background: var(--xil-surface);
	border: 1px solid var(--xil-border-strong);
	border-radius: var(--xil-radius-md);
	color: var(--xil-text);
	transition: border-color var(--xil-transition), box-shadow var(--xil-transition);
}

.xil-input::placeholder,
.xil-textarea::placeholder {
	color: var(--xil-muted);
	opacity: 0.72;
}

.xil-input:hover,
.xil-select:hover,
.xil-textarea:hover {
	border-color: var(--xil-primary);
}

.xil-input:focus,
.xil-select:focus,
.xil-textarea:focus {
	outline: none;
	border-color: var(--xil-primary);
	box-shadow: 0 0 0 3px var(--xil-primary-tint-2);
}

.xil-textarea {
	min-height: 120px;
	resize: vertical;
}

.xil-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2351607A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.xil-section--dark .xil-select,
.xil-section--deep .xil-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AAAC6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.xil-field-hint {
	font-size: 0.8rem;
	color: var(--xil-muted);
}

/* --- Scrollable areas ---------------------------------------------------- */

.xil-scroll {
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--xil-border-strong) transparent;
}

.xil-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.xil-scroll::-webkit-scrollbar-thumb {
	background: var(--xil-border-strong);
	border-radius: 8px;
}
.xil-scroll::-webkit-scrollbar-track { background: transparent; }


/* ==========================================================================
   8. BACKGROUND SYSTEMS
   Both use inset-bounded pseudo-elements — they can never cause
   horizontal overflow, on any viewport.
   ========================================================================== */

.xil-bg-grid::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--xil-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--xil-grid-line) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 92% 72% at 50% 0%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 92% 72% at 50% 0%, #000 30%, transparent 78%);
}

.xil-bg-glow::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(640px 420px at 85% -8%, var(--xil-glow), transparent 70%);
}

.xil-bg-glow--bottom::after {
	background: radial-gradient(640px 420px at 12% 108%, var(--xil-glow), transparent 70%);
}


/* ==========================================================================
   9. ACCESSIBILITY
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--xil-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.xil-input:focus-visible,
.xil-select:focus-visible,
.xil-textarea:focus-visible {
	outline: none; /* visible focus provided by the box-shadow ring */
	border-radius: var(--xil-radius-md);
}

.xil-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.xil-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--xil-z-overlay);
	background: var(--xil-primary);
	color: var(--xil-on-primary);
	padding: 12px 20px;
	border-radius: 0 0 var(--xil-radius-md) 0;
	font-weight: 600;
	font-size: 0.9rem;
}

.xil-skip-link:focus {
	left: 0;
}

.xil-skip-link:focus-visible {
	outline-offset: -4px;
}

[hidden] {
	display: none !important;
}


/* ==========================================================================
   10. MOTION — reveal on scroll
   Elements are hidden ONLY when html has the `xil-js` class (added inline
   in <head>). Without JavaScript everything is visible immediately.
   Usage: class="xil-reveal" + optional data-xil-delay="1..8" (60ms steps).
   ========================================================================== */

html.xil-js .xil-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 640ms var(--xil-ease),
		transform 640ms var(--xil-ease);
	will-change: opacity, transform;
}

html.xil-js .xil-reveal[data-xil-delay='1'] { transition-delay: 60ms; }
html.xil-js .xil-reveal[data-xil-delay='2'] { transition-delay: 120ms; }
html.xil-js .xil-reveal[data-xil-delay='3'] { transition-delay: 180ms; }
html.xil-js .xil-reveal[data-xil-delay='4'] { transition-delay: 240ms; }
html.xil-js .xil-reveal[data-xil-delay='5'] { transition-delay: 300ms; }
html.xil-js .xil-reveal[data-xil-delay='6'] { transition-delay: 360ms; }
html.xil-js .xil-reveal[data-xil-delay='7'] { transition-delay: 420ms; }
html.xil-js .xil-reveal[data-xil-delay='8'] { transition-delay: 480ms; }

html.xil-js .xil-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ==========================================================================
   11. REDUCED MOTION — kill switch
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html.xil-js .xil-reveal,
	html.xil-js .xil-reveal[data-xil-delay] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.xil-section *,
	.xil-section *::before,
	.xil-section *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto !important;
	}
}