/**
 * home.css — Datalkemi Homepage Styles
 *
 * @package Datalkemi
 * @since   2.0.0
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	--hp-bg:            #070b14;
	--hp-surface:       #0d1424;
	--hp-surface-2:     #121c30;
	--hp-border:        rgba(255, 255, 255, 0.07);
	--hp-border-med:    rgba(255, 255, 255, 0.12);
	--hp-primary:       #0284c7;
	--hp-primary-light: #38bdf8;
	--hp-text:          #e8edf5;
	--hp-text-muted:    #7a8a9e;
	--hp-text-faint:    #3d4f63;
	--hp-font:          'Inter', system-ui, sans-serif;
	--hp-max-w:         1200px;
	--hp-max-w-sm:      760px;

	--hp-s1: 0.5rem;
	--hp-s2: 1rem;
	--hp-s3: 1.5rem;
	--hp-s4: 2rem;
	--hp-s5: 2.5rem;
	--hp-s6: 3rem;
	--hp-s7: 3.5rem;
	--hp-s8: 4rem;
	--hp-s9: 5rem;
	--hp-s10: 6rem;
	--hp-s11: 8rem;
}

/* ==========================================================================
   2. BASE CONTAINER
   ========================================================================== */

.hp-container {
	max-width: var(--hp-max-w);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ==========================================================================
   3. BUTTON COMPONENTS
   ========================================================================== */

.hp-btn-primary,
.hp-btn-outline,
.hp-btn-text {
	font-family: var(--hp-font);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, gap 0.2s;
}

.hp-btn-primary {
	background-color: var(--hp-primary);
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	padding: 0.875rem 2rem;
	border-radius: 8px;
	border: 2px solid var(--hp-primary);
}

.hp-btn-primary:hover {
	background-color: #0272ae;
	border-color: #0272ae;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.hp-btn-primary:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

.hp-btn-outline {
	background-color: transparent;
	color: var(--hp-primary);
	padding: 0.875rem 2rem;
	border-radius: 8px;
	border: 2px solid var(--hp-primary);
}

.hp-btn-outline:hover {
	background-color: rgba(2, 132, 199, 0.08);
	color: var(--hp-primary);
}

.hp-btn-outline:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

.hp-btn-text {
	background: none;
	border: none;
	color: var(--hp-primary);
	padding: 0;
	font-weight: 500;
	text-decoration: none;
	gap: 0.375rem;
}

.hp-btn-text::after {
	content: '→';
	display: inline-block;
	transition: transform 0.2s;
}

.hp-btn-text:hover {
	color: var(--hp-primary-light);
	text-decoration: underline;
}

.hp-btn-text:hover::after {
	transform: translateX(3px);
}

.hp-btn-text:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   4. EYEBROW LABEL
   ========================================================================== */

.hp-eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hp-primary);
	margin-bottom: 1rem;
}

/* ==========================================================================
   5. SECTION HEADINGS
   ========================================================================== */

.hp-section-title {
	font-size: clamp(1.625rem, 3.5vw, 2.375rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--hp-text);
	margin-bottom: 1rem;
}

.hp-section-sub {
	font-size: 1.0625rem;
	color: var(--hp-text-muted);
	max-width: 600px;
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

.hp-hero {
	position: relative;
	min-height: calc(100vh - 72px);
	display: grid;
	place-items: center;
	padding: 6rem 0 5rem;
	background-color: var(--hp-bg);
	background-image: url('../../assets/img/hero-bg.jpg');
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hp-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 100% 80% at 50% 50%, rgba(3, 7, 18, 0.78) 0%, rgba(3, 7, 18, 0.97) 100%),
		linear-gradient(180deg, rgba(3, 7, 18, 0.60) 0%, rgba(3, 7, 18, 0.95) 100%);
	z-index: 1;
}

/* Dot grid texture */
.hp-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 30px 30px;
	z-index: 2;
	pointer-events: none;
}

/* Colour glow blobs */
.hp-hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}

.hp-hero-orb--1 {
	width: 560px;
	height: 560px;
	top: -140px;
	right: -80px;
	background: radial-gradient(circle, rgba(2, 132, 199, 0.22) 0%, transparent 70%);
	z-index: 3;
}

.hp-hero-orb--2 {
	width: 420px;
	height: 420px;
	bottom: -60px;
	left: 5%;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.14) 0%, transparent 70%);
	z-index: 3;
}

.hp-hero .hp-container {
	position: relative;
	z-index: 4;
	width: 100%;
}

/* Two-column inner layout */
.hp-hero-inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 4rem;
	align-items: center;
}

.hp-hero-left {
	text-align: left;
}

.hp-hero-headline {
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--hp-text);
	margin-bottom: 1.5rem;
	margin-top: 1rem;
}

.hp-accent-text {
	color: var(--hp-primary-light);
}

.hp-hero-sub {
	font-size: 1.0625rem;
	color: var(--hp-text-muted);
	max-width: 520px;
	margin: 0 0 2.5rem;
	line-height: 1.7;
}

.hp-hero-actions {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

/* Right: differentiator card */
.hp-hero-right {
	position: relative;
	z-index: 4;
}

.hp-hero-card {
	background: rgba(10, 16, 30, 0.72);
	border: 1px solid rgba(2, 132, 199, 0.2);
	border-radius: 14px;
	padding: 2rem;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.hp-hero-card-title {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--hp-text-faint);
	margin: 0 0 1.5rem;
}

.hp-hero-card-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hp-hero-card-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.125rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hp-hero-card-item:first-child {
	padding-top: 0;
}

.hp-hero-card-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hp-hero-card-icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: rgba(2, 132, 199, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.1rem;
	color: var(--hp-primary);
}

.hp-hero-card-body strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hp-text);
	margin-bottom: 0.3rem;
}

.hp-hero-card-body span {
	display: block;
	font-size: 0.8125rem;
	color: var(--hp-text-muted);
	line-height: 1.55;
}

/* Dashboard mockup — hero right column */

.hp-dash {
	background: rgba(10, 16, 30, 0.82);
	border: 1px solid rgba(2, 132, 199, 0.25);
	border-radius: 14px;
	overflow: hidden;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Window chrome */
.hp-dash-chrome {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hp-dash-dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.hp-dash-dot--red    { background: #ff5f57; }
.hp-dash-dot--yellow { background: #febc2e; }
.hp-dash-dot--green  { background: #28c840; }

.hp-dash-chrome-title {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--hp-text-faint);
	margin-left: 0.5rem;
	letter-spacing: 0.02em;
}

/* KPI row */
.hp-dash-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hp-dash-kpi {
	padding: 1rem 1.25rem;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.hp-dash-kpi:last-child {
	border-right: none;
}

.hp-dash-kpi-label {
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hp-text-faint);
}

.hp-dash-kpi-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hp-text);
	line-height: 1;
}

.hp-dash-kpi-delta {
	font-size: 0.6875rem;
	font-weight: 600;
}

.hp-dash-delta--up   { color: #4ade80; }
.hp-dash-delta--down { color: #f87171; }

/* Bar chart */
.hp-dash-chart {
	padding: 1.25rem 1.25rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hp-dash-chart-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	height: 90px;
}

.hp-dash-bar-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0.375rem;
	height: 100%;
}

.hp-dash-bar {
	width: 100%;
	background: rgba(2, 132, 199, 0.3);
	border-radius: 3px 3px 0 0;
	min-height: 6px;
}

.hp-dash-bar--accent {
	background: var(--hp-primary);
}

.hp-dash-bar-label {
	font-size: 0.625rem;
	color: var(--hp-text-faint);
	font-weight: 500;
}

/* Data table */
.hp-dash-table {
	padding: 0.75rem 1.25rem 1.25rem;
}

.hp-dash-row {
	display: grid;
	grid-template-columns: 1fr 0.7fr 0.55fr;
	align-items: center;
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	gap: 0.5rem;
}

.hp-dash-row:last-child {
	border-bottom: none;
}

.hp-dash-row--head span {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--hp-text-faint);
}

.hp-dash-row:not(.hp-dash-row--head) span {
	font-size: 0.75rem;
	color: var(--hp-text-muted);
}

.hp-dash-pill {
	display: inline-block;
	font-size: 0.625rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 100px;
	padding: 0.2rem 0.5rem;
}

.hp-dash-pill--ok   { background: rgba(74, 222, 128, 0.12); color: #4ade80 !important; }
.hp-dash-pill--warn { background: rgba(251, 191, 36, 0.12);  color: #fbbf24 !important; }

/* ==========================================================================
   7. LOGO STRIP
   ========================================================================== */

.hp-logos {
	padding: 2.5rem 0;
	border-top: 1px solid var(--hp-border);
	border-bottom: 1px solid var(--hp-border);
	background: var(--hp-surface);
}

.hp-logos-label {
	font-size: 0.8125rem;
	text-align: center;
	color: var(--hp-text-faint);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.hp-logos-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem;
	flex-wrap: wrap;
}

.hp-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	filter: brightness(0) invert(1) opacity(0.5);
	transition: filter 0.25s;
}

.hp-logo-item:hover {
	filter: brightness(0) invert(1) opacity(0.9);
}

.hp-logo-item img {
	max-height: 40px;
	width: auto;
	max-width: 160px;
}

/* ==========================================================================
   8. PROBLEM SECTION
   ========================================================================== */

.hp-problem {
	padding: 5rem 0;
	background: var(--hp-bg);
}

.hp-problem-intro {
	margin-bottom: 3rem;
}

.hp-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.hp-problem-card {
	padding: 2rem;
	border: 1px solid var(--hp-border);
	border-radius: 10px;
	background: var(--hp-surface);
	transition: border-color 0.2s;
}

.hp-problem-card:hover {
	border-color: var(--hp-border-med);
}

.hp-problem-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 1.5rem;
	color: var(--hp-primary);
	display: block;
}

.hp-problem-card h3 {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hp-text);
	margin-bottom: 0.875rem;
	margin-top: 0;
}

.hp-problem-card p {
	font-size: 0.9375rem;
	color: var(--hp-text-muted);
	line-height: 1.7;
	margin: 0;
}

/* ==========================================================================
   9. WHAT WE BUILD
   ========================================================================== */

.hp-build {
	padding: 5rem 0;
	background: var(--hp-surface);
}

.hp-build-intro {
	margin-bottom: 3rem;
}

.hp-build-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--hp-border);
	border-radius: 12px;
	overflow: hidden;
}

.hp-build-col {
	padding: 2.25rem;
	border-right: 1px solid var(--hp-border);
}

.hp-build-col:last-child {
	border-right: none;
}

.hp-build-col-label {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hp-primary);
	font-weight: 600;
	margin-bottom: 1rem;
}

.hp-build-col h3 {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--hp-text);
	margin-bottom: 1rem;
	margin-top: 0;
}

.hp-build-col p {
	font-size: 0.9375rem;
	color: var(--hp-text-muted);
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

.hp-build-link {
	font-size: 0.875rem;
	color: var(--hp-primary-light);
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: gap 0.2s;
}

.hp-build-link:hover {
	gap: 0.625rem;
}

.hp-build-link:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

/* Industries strip */
.hp-industries {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hp-border);
}

.hp-industries-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--hp-text-faint);
	margin: 0;
	white-space: nowrap;
}

.hp-industries-list {
	display: flex;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hp-industry-pill {
	font-size: 0.8125rem;
	color: var(--hp-text-muted);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--hp-border);
	border-radius: 100px;
	padding: 0.3125rem 0.875rem;
	line-height: 1.4;
}

/* ==========================================================================
   10. WHY DATALKEMI
   ========================================================================== */

.hp-why {
	padding: 5rem 0;
	background: var(--hp-bg);
}

.hp-why-layout {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 4rem;
	align-items: start;
}

.hp-why-intro {
	font-size: 1.0625rem;
	color: var(--hp-text-muted);
	line-height: 1.7;
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.hp-why-points {
	display: flex;
	flex-direction: column;
}

.hp-why-point {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--hp-border);
	margin-bottom: 1.5rem;
}

.hp-why-point:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.hp-why-point-num {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hp-primary);
	background: rgba(2, 132, 199, 0.1);
	border: 1px solid rgba(2, 132, 199, 0.2);
	border-radius: 4px;
	padding: 0.2rem 0.5rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
	line-height: 1.4;
	white-space: nowrap;
}

.hp-why-point-body h3 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hp-text);
	margin-bottom: 0.625rem;
	margin-top: 0;
}

.hp-why-point-body p {
	font-size: 0.875rem;
	color: var(--hp-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
   11. HOW WE WORK
   ========================================================================== */

.hp-process {
	padding: 5rem 0;
	background: var(--hp-surface);
}

.hp-process-intro {
	margin-bottom: 0;
}

.hp-process-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	margin-top: 3rem;
}

/*
 * Horizontal connector line — centred on the circular step badges.
 * Badge height: 2.5rem. Step padding-top: 2rem.
 * Line centre = 2rem + 1.25rem = 3.25rem from top of .hp-process-steps.
 */
.hp-process-steps::before {
	content: '';
	position: absolute;
	top: 3.25rem;
	left: 1.25rem;
	right: 1.25rem;
	height: 1px;
	background: linear-gradient(
		90deg,
		var(--hp-primary) 0%,
		rgba(2, 132, 199, 0.1) 100%
	);
}

.hp-process-step {
	padding: 2rem 1.5rem 2rem 0;
	position: relative;
}

/* Circular numbered badge that sits on the line */
.hp-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--hp-surface);
	border: 2px solid var(--hp-primary);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hp-primary);
	line-height: 1;
	margin-bottom: 1.25rem;
	position: relative;
	z-index: 2;
	font-variant-numeric: tabular-nums;
}

.hp-step-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hp-text);
	margin-bottom: 0.625rem;
	margin-top: 0;
}

.hp-step-desc {
	font-size: 0.875rem;
	color: var(--hp-text-muted);
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
   12. CTA BAND
   ========================================================================== */

.hp-cta-band {
	padding: 4.5rem 0;
	background: rgba(2, 132, 199, 0.05);
	border-top: 1px solid rgba(2, 132, 199, 0.15);
	border-bottom: 1px solid rgba(2, 132, 199, 0.15);
	text-align: center;
}

.hp-cta-band-line {
	font-size: clamp(1.25rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--hp-text);
	max-width: 640px;
	margin: 0 auto 2.5rem;
	line-height: 1.35;
}

/* ==========================================================================
   13. INSIGHTS
   ========================================================================== */

.hp-insights {
	padding: 5rem 0;
	background: var(--hp-bg);
}

.hp-insights-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 2.5rem;
}

.hp-insights-header h2 {
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--hp-text);
	margin: 0;
}

.hp-insights-header a {
	font-size: 0.875rem;
	color: var(--hp-primary-light);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.hp-insights-header a:hover {
	text-decoration: underline;
}

.hp-insights-header a:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

.hp-insights-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.hp-insight-card {
	border-top: 2px solid var(--hp-border-med);
	padding-top: 1.25rem;
	transition: border-top-color 0.2s;
}

.hp-insight-card:hover {
	border-top-color: var(--hp-primary);
}

.hp-insight-meta {
	font-size: 0.75rem;
	color: var(--hp-text-faint);
	margin-bottom: 0.625rem;
}

.hp-insight-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hp-text);
	line-height: 1.4;
	margin-bottom: 0.625rem;
	text-decoration: none;
	display: block;
	transition: color 0.2s;
}

.hp-insight-title:hover {
	color: var(--hp-primary-light);
}

.hp-insight-title:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

.hp-insight-excerpt {
	font-size: 0.875rem;
	color: var(--hp-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   14. ABOUT SNIPPET — two-column: text left, credentials right
   ========================================================================== */

.hp-about {
	padding: 5rem 0;
	background: var(--hp-surface);
}

.hp-about-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5rem;
	align-items: start;
}

.hp-about h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--hp-text);
	margin-bottom: 1.5rem;
	margin-top: 0;
}

.hp-about p {
	font-size: 1.0625rem;
	color: var(--hp-text-muted);
	line-height: 1.75;
	margin-bottom: 1.25rem;
}

.hp-about p:last-of-type {
	margin-bottom: 2rem;
}

/* Credentials panel */
.hp-about-creds {
	padding-top: 0.5rem;
}

.hp-cred-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.hp-cred-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--hp-border);
}

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

.hp-cred-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.hp-cred-icon {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: rgba(2, 132, 199, 0.1);
	border: 1px solid rgba(2, 132, 199, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hp-primary);
	margin-top: 0.1rem;
}

.hp-cred-item strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hp-text);
	margin-bottom: 0.25rem;
}

.hp-cred-item span {
	display: block;
	font-size: 0.8125rem;
	color: var(--hp-text-muted);
	line-height: 1.5;
}

/* ==========================================================================
   15. FINAL CTA
   ========================================================================== */

.hp-final-cta {
	padding: 6rem 0;
	background: var(--hp-bg);
	text-align: center;
}

.hp-final-cta-heading {
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--hp-text);
	margin-bottom: 2.5rem;
	margin-top: 0;
}

.hp-final-note {
	font-size: 0.875rem;
	color: var(--hp-text-faint);
	margin-top: 1.25rem;
	margin-bottom: 0;
}

/* ==========================================================================
   16. FOCUS-VISIBLE
   ========================================================================== */

.hp-hero a:focus-visible,
.hp-logos a:focus-visible,
.hp-problem a:focus-visible,
.hp-build a:focus-visible,
.hp-why a:focus-visible,
.hp-process a:focus-visible,
.hp-cta-band a:focus-visible,
.hp-insights a:focus-visible,
.hp-about a:focus-visible,
.hp-final-cta a:focus-visible {
	outline: 2px solid var(--hp-primary);
	outline-offset: 3px;
}

/* ==========================================================================
   17. RESPONSIVE — TABLET ≤ 960px
   ========================================================================== */

@media (max-width: 960px) {
	/* Hero: hide right card, return to single column */
	.hp-hero-inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hp-hero-right {
		display: none;
	}

	.hp-hero-left {
		text-align: center;
	}

	.hp-hero-sub {
		margin: 0 auto 2.5rem;
	}

	.hp-hero-actions {
		justify-content: center;
	}
}

/* ==========================================================================
   18. RESPONSIVE — TABLET ≤ 768px
   ========================================================================== */

@media (max-width: 768px) {
	/* Logo strip */
	.hp-logos-grid {
		gap: 2.5rem;
	}

	/* Problem */
	.hp-problem-grid {
		grid-template-columns: 1fr;
	}

	/* Build */
	.hp-build-grid {
		grid-template-columns: 1fr;
		border-radius: 10px;
	}

	.hp-build-col {
		border-right: none;
		border-bottom: 1px solid var(--hp-border);
	}

	.hp-build-col:last-child {
		border-bottom: none;
	}

	/* Industries */
	.hp-industries {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.875rem;
	}

	.hp-industries-list {
		flex-direction: column;
		gap: 0.375rem;
	}

	.hp-industry-pill {
		align-self: flex-start;
	}

	/* Why */
	.hp-why-layout {
		grid-template-columns: 1fr;
	}

	/* Process */
	.hp-process-steps {
		grid-template-columns: 1fr;
	}

	.hp-process-steps::before {
		display: none;
	}

	.hp-process-step {
		padding: 1.5rem 0 1.5rem 3.5rem;
		border-left: 2px solid var(--hp-border);
	}

	.hp-process-step:last-child {
		border-left: 2px solid transparent;
	}

	/* Insights */
	.hp-insights-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-insights-header {
		flex-direction: column;
		gap: 1rem;
	}

	/* About */
	.hp-about-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

/* ==========================================================================
   19. RESPONSIVE — MOBILE ≤ 480px
   ========================================================================== */

@media (max-width: 480px) {
	.hp-logos-grid {
		gap: 2rem;
	}

	.hp-insights-grid {
		grid-template-columns: 1fr;
	}

	.hp-hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.hp-hero {
		padding: 3rem 0 2.5rem;
	}

	.hp-problem,
	.hp-build,
	.hp-why,
	.hp-process,
	.hp-insights,
	.hp-about {
		padding: 3.5rem 0;
	}

	.hp-final-cta {
		padding: 4rem 0;
	}
}