/* ═══════════════════════════════════════════════════════════════
   INTELLEGY HUB — Global / Base
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
	font-family: var(--font-body);
	background: var(--color-bg);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Grid pattern overlay */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		linear-gradient(rgba(74, 144, 226, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(74, 144, 226, 0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	z-index: 0;
	pointer-events: none;
}

/* LANGUAGE FALLBACK (when Polylang inactive, the .lang spans still work) */
html[lang="uk"] .lang-en,
html[lang="uk-UA"] .lang-en { display: none !important; }
html[lang="en"] .lang-uk,
html[lang="en-US"] .lang-uk { display: none !important; }

/* CONTAINER */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-8);
	position: relative;
	z-index: 1;
}
.ihl-section { padding: var(--space-24) 0; position: relative; }
.section--dark { background: var(--color-bg-secondary); }

/* TYPOGRAPHY */
h1 {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--color-text);
}
/* Hero heading — exact design spec: Manrope Bold, 64px / 64px line-height,
   -3.8% letter-spacing (-3.8% of 64px ≈ -2.43px). Scales down on smaller
   screens; the 64px value is the desktop/base size from the design. */
.hero-title {
	font-family: var(--font-heading);
	font-size: 64px;
	line-height: 64px;
	font-weight: 700;
	letter-spacing: -2.43px;
	color: var(--color-text);
}
@media (max-width: 1200px) {
	.hero-title { font-size: clamp(2.5rem, 6vw, 64px); line-height: 1.05; letter-spacing: -0.04em; }
}
h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-bottom: var(--space-6);
	letter-spacing: -0.3px;
	font-weight: 700;
	color: var(--color-text);
}
h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.1rem, 2vw, 1.375rem);
	margin-bottom: var(--space-3);
	font-weight: 600;
	color: var(--color-text);
}
p {
	color: var(--color-text-body);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.85;
	font-weight: 300;
}

/* LABEL */
.label {
	font-family: var(--font-heading);
	font-size: 13px;
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 4px;
	font-weight: 600;
	display: inline-block;
	margin-bottom: var(--space-4);
}
.label--badge {
	font-size: 12px;
	color: var(--color-bg);
	background: var(--color-primary);
	padding: 6px 16px;
	border-radius: var(--radius-full);
	letter-spacing: 2px;
	font-weight: 700;
}
.label--glow { text-shadow: 0 0 10px var(--color-accent-glow); }

/* ACCENT LINE */
.accent-line {
	width: 60px;
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	margin-bottom: var(--space-6);
	box-shadow: 0 0 12px var(--color-accent-glow);
}

/* BUTTONS */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 14px 30px;
	background: var(--color-primary);
	color: var(--color-bg);
	font-family: var(--font-heading);
	font-weight: 700;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition-base);
	border: 1px solid rgba(74, 144, 226, 0.3);
	letter-spacing: 0.4px;
	cursor: pointer;
	font-size: inherit;
}
.btn:hover { box-shadow: 0 8px 24px var(--color-accent-glow); transform: translateY(-2px); }
.btn--lg { padding: 16px 40px; font-size: 16px; }

.btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	background: transparent;
	color: var(--color-text-body);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	text-decoration: none;
	font-weight: 500;
	transition: all var(--transition-base);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: inherit;
}
.btn-ghost:hover {
	border-color: var(--color-border-accent);
	color: var(--color-text);
	background: rgba(74, 144, 226, 0.04);
}
.btn-ghost--lg { padding: 16px 32px; }

/* SECTION HELPERS */
.section-lead {
	max-width: 900px;
	color: var(--color-text-body);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.85;
}
.section-title-large {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.2;
	margin-bottom: var(--space-6);
}

/* GRID */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--space-8);
	margin-top: var(--space-12);
}

/* CARDS */
.card {
	background: var(--color-bg-card);
	padding: var(--space-8);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border-accent);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}
.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
	box-shadow: 0 0 20px var(--color-accent-glow);
	opacity: 0;
	transition: opacity var(--transition-base);
}
.card:hover { transform: var(--hover-lift); box-shadow: var(--shadow-glow); }
.card:hover::before { opacity: 1; }
.card p { font-size: clamp(0.875rem, 1.3vw, 1rem); line-height: 1.75; }

/* FEATURE ICON */
.feature-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-6);
	background: rgba(74, 144, 226, 0.08);
	border: 1px solid rgba(74, 144, 226, 0.15);
	box-shadow: 0 0 20px rgba(74, 144, 226, 0.08);
}
.feature-icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--color-primary);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* METRICS — snapped to a 12-column grid (4 items × span 3), 30px gutter to match the design grid */
.metrics {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 30px;
	row-gap: var(--space-8);
	margin-top: var(--space-16);
}
.metric { grid-column: span 3; }
.metric h4 {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 2.625rem);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
	letter-spacing: -0.5px;
}
.metric span { font-size: 14px; color: var(--color-text-muted); font-weight: 300; }

@media (max-width: 900px) { .metric { grid-column: span 6; } }
@media (max-width: 480px) { .metric { grid-column: span 12; } }

/* BADGES */
.hero-badges { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.badge {
	font-family: var(--font-heading);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border-accent);
	color: var(--color-primary);
	background: rgba(74, 144, 226, 0.06);
}

/* SCROLL PROGRESS */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--color-primary), #6bb5f5);
	z-index: 2000;
	box-shadow: 0 0 12px var(--color-accent-glow);
}

/* UTILITY */
.is-hidden { display: none !important; }
img { max-width: 100%; height: auto; }

/* RESPONSIVE */
@media (max-width: 768px) {
	.container { padding: 0 var(--space-4); }
	.ihl-section { padding: var(--space-16) 0; }
}