* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--ki-primary: #0A5A94;
	--ki-dark: #111827;
	--ki-accent: #FFC107;
	--ki-light: #F3F9FF;
	--ki-text: #111827;
	--ki-muted: #6B7280;
	--ki-border: #E5E7EB;
	--ki-white: #fff
}

body {
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--ki-text);
	background: var(--ki-white);
	font-size: 15px
}

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

.ki-wrap {
	margin: 0 auto;
	max-width: 1300px;
}


/* HERO */
.ki-hero {
	background: var(--ki-dark);
	position: relative;
	overflow: hidden
}

.ki-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(10, 90, 148, 0.35) 0%, transparent 70%)
}

.ki-hero-inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr; /* dashboard column widened for bigger, more readable inner text */ /* dashboard column slightly wider so the boxes can grow */
	align-items: center;
	gap: 60px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 32px 0px;
	position: relative;
	z-index: 2
}

/* Keep the hero container the same width as the rest of the site (~1300px,
   centred) so it lines up with the header nav and every section below it.
   The earlier attempts to widen only the hero made it inconsistent with the
   rest of the page, which read as unbalanced. */

.ki-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #93C5FD;
	font-weight: 500;
	margin-bottom: 22px
}

.ki-hero-badge-dot {
	width: 6px;
	height: 6px;
	background: #22D3EE;
	border-radius: 50%;
	animation: pulse-dot 2s infinite
}

@keyframes pulse-dot {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0.4
	}
}

.ki-hero h1 {
	font-size: 50px;
	font-weight: 700;
	line-height: 1.12;
	color: #fff;
	margin-bottom: 20px;
	letter-spacing: -1px
}

.ki-hero h1 .highlight {
	color: var(--ki-accent)
}

.ki-hero-sub {
	margin-bottom: 32px !important;
	color: rgba(255, 255, 255, 0.65);
	font-size: 17px;
	line-height: 1.65;
	max-width: 470px;
}

.ki-hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 40px
}

.ki-btn-primary {
	background: var(--ki-primary);
	color: #fff;
	padding: 13px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid var(--ki-primary);
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-primary:hover {
	background: var(--ki-primary);
	color: #fff;
	padding: 13px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid var(--ki-primary);
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-outline {
	background: transparent;
	color: #fff;
	padding: 13px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-outline:hover {
	background: transparent;
	color: #fff;
	padding: 13px 28px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-hero-social-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5)
}

.ki-hero-social-proof strong {
	color: rgba(255, 255, 255, 0.85)
}

.ki-avatar-stack {
	display: flex
}

.ki-avatar-stack span {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--ki-dark);
	margin-right: -8px;
	background: var(--ki-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: #fff;
	font-weight: 600
}

.ki-avatar-stack span:nth-child(2) {
	background: #0e7490
}

.ki-avatar-stack span:nth-child(3) {
	background: #7c3aed
}

.ki-avatar-stack span:nth-child(4) {
	background: #059669
}

.ki-platform-preview {
	background: #0d1929;
	border: 1px solid #1f3a5c;
	border-radius: 16px;
	overflow: hidden
}

.ki-platform-topbar {
	background: #0f2035;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid #1a3050
}

.ki-platform-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%
}

.ki-platform-tabs {
	display: flex;
	gap: 2px;
	margin-left: 12px;
	flex: 1
}

.ki-platform-tab {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	padding: 4px 10px;
	border-radius: 4px
}

.ki-platform-tab.active {
	background: var(--ki-primary);
	color: #fff
}

.ki-platform-body {
	padding: 16px
}

.ki-stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 12px
}

.ki-stat-mini {
	background: #0f2035;
	border: 1px solid #1a3050;
	border-radius: 8px;
	padding: 10px 12px
}

.ki-stat-mini-label {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 4px
}

.ki-stat-mini-val {
	font-size: 17px;
	font-weight: 700;
	color: #fff
}

.ki-stat-mini-change {
	font-size: 10px;
	color: #34D399;
	margin-top: 2px
}

.ki-stat-mini:nth-child(2) .ki-stat-mini-val {
	color: #FCD34D
}

.ki-stat-mini:nth-child(3) .ki-stat-mini-val {
	color: #34D399
}

.ki-stat-mini:nth-child(4) .ki-stat-mini-val {
	color: #60A5FA
}

.ki-chart-row {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 8px;
	margin-bottom: 12px
}

.ki-chart-card {
	background: #0f2035;
	border: 1px solid #1a3050;
	border-radius: 8px;
	padding: 10px 12px
}

.ki-chart-card-title {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 8px
}

.ki-mini-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 40px
}

.ki-mini-bar {
	flex: 1;
	border-radius: 2px 2px 0 0;
	background: #1a3a6c
}

.ki-mini-bar.active-bar {
	background: var(--ki-primary)
}

.ki-ticket-stream {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.ki-ticket-item {
	background: #0f2035;
	border: 1px solid #1a3050;
	border-radius: 6px;
	padding: 7px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.ki-ticket-left {
	display: flex;
	align-items: center;
	gap: 8px
}

.ki-ticket-channel {
	font-size: 10px;
	background: rgba(10, 90, 148, 0.3);
	color: #93C5FD;
	padding: 2px 7px;
	border-radius: 3px
}

.ki-ticket-text {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6)
}

.ki-ticket-badge {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: 3px
}

.ki-badge-green {
	background: rgba(52, 211, 153, 0.15);
	color: #34D399
}

.ki-badge-yellow {
	background: rgba(252, 211, 77, 0.15);
	color: #FCD34D
}

.ki-badge-red {
	background: rgba(248, 113, 113, 0.15);
	color: #F87171
}

.ki-hero-bottom {
	background: rgba(0, 0, 0, 0.3);
	border-top: 1px solid #1f2937;
	padding: 18px 0 20px;
	margin-top: 60px
}

.ki-hero-bottom-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	gap: 40px
}

.ki-trusted-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.08em
}

.ki-logo-bar {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: 1
}

.ki-logo-pill {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.3);
	font-weight: 600;
	white-space: nowrap
}

/* STATS */
.ki-stats {
	background: var(--ki-primary);
	padding: 36px 0
}

.ki-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 auto;
	padding: 0 28px
}

.ki-stat {
	text-align: center;
	padding: 8px 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.2)
}

.ki-stat:last-child {
	border-right: none
}

.ki-stat-num {
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	line-height: 1
}

.ki-stat-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 6px
}

.ki-section-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ki-primary);
	font-weight: 600;
	margin-bottom: 12px
}

.ki-section-title {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ki-dark);
	margin-bottom: 14px
}

.ki-section-sub {
	font-size: 17px;
	color: var(--ki-muted);
	line-height: 1.65
}

/* PLATFORM STORY */
.ki-platform-story {
	padding: 80px 0;
	background: var(--ki-light)
}

.ki-story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 48px
}

.ki-story-card {
	background: #fff;
	border: 1px solid var(--ki-border);
	border-radius: 14px;
	padding: 28px;
	transition: box-shadow 0.2s
}

.ki-story-card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08)
}

.ki-story-card-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px
}

.ki-story-pain {
	font-size: 12px;
	color: var(--ki-muted);
	font-weight: 500
}

.ki-story-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ki-dark);
	margin-bottom: 10px
}

.ki-story-desc {
	font-size: 13.5px;
	color: var(--ki-muted);
	line-height: 1.65
}

.ki-story-outcome {
	margin-top: 16px;
	padding: 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px
}

/* ═══════════════════════════════════════
   CHANNELS SECTION — the big new addition
═══════════════════════════════════════ */
.ki-channels {
	padding: 90px 0;
	background: #fff;
	overflow: hidden
}

.ki-channels-header {
	text-align: center;
	margin-bottom: 56px
}

.ki-channels-count {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	padding: 5px 16px;
	font-size: 13px;
	color: var(--ki-primary);
	font-weight: 600;
	margin-bottom: 16px
}

.ki-channels-count-dot {
	width: 7px;
	height: 7px;
	background: var(--ki-primary);
	border-radius: 50%;
	animation: pulse-dot 2s infinite
}

/* browser frame */
.ki-browser {
	background: #fff;
	border: 1px solid var(--ki-border);
	border-radius: 18px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	position: relative;
	max-width: 1100px;
	margin: 0 auto
}

.ki-browser-bar {
	background: #F8F9FA;
	border-bottom: 1px solid var(--ki-border);
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 12px
}

.ki-browser-dots {
	display: flex;
	gap: 7px
}

.ki-browser-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%
}

.ki-browser-url {
    flex: 1;
    background: #fff;
    border: 1px solid var(--ki-border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--ki-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 670px;
    margin: 0 auto;
    justify-content: center;
}

.ki-browser-url-lock {
	color: var(--ki-primary);
	font-size: 11px
}

/* channel grid inside browser */
.ki-channel-grid-wrap {
	padding: 28px 28px 24px
}

.ki-channel-category {
	margin-bottom: 10px
}

.ki-channel-cat-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ki-muted);
	font-weight: 600;
	margin-bottom: 10px;
	padding-left: 2px
}

.ki-channel-row {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 10px;
	margin-bottom: 6px
}

.ki-channel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px 10px;
    /* border-radius: 14px; */
    /* border: 1px solid transparent; */
    transition: all 0.2s;
    cursor: pointer;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.07);
}

.ki-channel-item:hover {
	background: var(--ki-light);
	border-color: rgba(10, 90, 148, 0.15);
	transform: translateY(-2px)
}

.ki-channel-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}

.ki-channel-name {
	font-size: 10.5px;
	color: var(--ki-muted);
	font-weight: 500;
	text-align: center;
	line-height: 1.3
}

/* specific icon colors */

/* floating badge */
.ki-channels-badge-wrap {
	position: absolute;
	top: -14px;
	right: 32px;
	z-index: 10
}

.ki-channels-bolt {
	width: 50px;
	height: 50px;
	background: #111827;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-top: 18px;
}

/* channel category divider */
.ki-ch-divider {
	height: 1px;
	margin: 14px 0 16px
}

/* bottom caption */
.ki-channels-caption {
	text-align: center;
	margin-top: 28px;
	font-size: 14px;
	color: var(--ki-muted)
}

.ki-channels-caption strong {
	color: var(--ki-primary);
	font-weight: 600
}

/* MODULES */
.ki-modules {
	padding: 80px 0;
	background: var(--ki-light)
}

.ki-modules-header {
	text-align: center;
	margin-bottom: 56px
}

.ki-modules-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.ki-module-card {
	border: 1px solid var(--ki-border);
	border-radius: 14px;
	padding: 28px;
	transition: all 0.2s;
	background: #fff
}

.ki-module-card:hover {
	border-color: var(--ki-primary);
	background: var(--ki-light)
}

.ki-module-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.ki-module-tag {
	font-size: 11px;
	background: var(--ki-light);
	color: var(--ki-primary);
	border: 1px solid rgba(10, 90, 148, 0.2);
	padding: 3px 10px;
	border-radius: 12px;
	display: inline-block;
	margin-bottom: 12px;
	font-weight: 500
}

.ki-module-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ki-dark);
	margin-bottom: 8px
}

.ki-module-desc {
	font-size: 13.5px;
	color: var(--ki-muted);
	line-height: 1.6
}

.ki-module-features {
	list-style: none;
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 5px
}

.ki-module-features li {
	font-size: 12.5px;
	color: var(--ki-muted);
	display: flex;
	align-items: center;
	gap: 7px
}

.ki-module-features li::before {
	content: '';
	width: 5px;
	height: 5px;
	background: var(--ki-primary);
	border-radius: 50%;
	flex-shrink: 0
}

/* AI+ SECTION */
.ki-ai {
	background: #0a0f1e;
	padding: 100px 0;
	position: relative;
	overflow: hidden
}

.ki-ai::before {
	content: '';
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 600px;
	background: radial-gradient(ellipse, rgba(99, 60, 180, 0.18) 0%, transparent 70%);
	pointer-events: none
}

.ki-ai-header {
	text-align: center;
	margin-bottom: 64px;
	position: relative;
	z-index: 2
}

.ki-ai-badge {
	align-items: center;
	gap: 10px;
	padding: 6px 20px;
	font-size: 13px;
	color: #C4B5FD;
	font-weight: 600;
	margin-bottom: 20px
}

.ki-ai-badge-icon {
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #7c3aed, #0A5A94);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px
}

.ki-ai-title {
	font-size: 42px;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 14px;
	letter-spacing: -1px
}

.ki-ai-title .ai-grad {
	background: linear-gradient(90deg, #818CF8, #C084FC, #38BDF8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text
}

.ki-ai-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.5);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.65
}

.ki-ai-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(139, 92, 246, 0.08);
	border: 1px solid rgba(139, 92, 246, 0.15);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 36px;
	position: relative;
	z-index: 2
}

.ki-ai-card {
	padding: 36px 30px;
	background: #0d1229;
	transition: background 0.3s;
	position: relative;
	overflow: hidden
}

.ki-ai-card:hover {
	background: #111840
}

.ki-ai-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	opacity: 0;
	transition: opacity 0.3s
}

.ki-ai-card:hover::before {
	opacity: 1
}

.ki-ai-card-1::before {
	background: linear-gradient(90deg, #818CF8, #C084FC)
}

.ki-ai-card-2::before {
	background: linear-gradient(90deg, #38BDF8, #818CF8)
}

.ki-ai-card-3::before {
	background: linear-gradient(90deg, #C084FC, #F472B6)
}

.ki-ai-card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px
}

.ki-ai-card-num {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0
}

.ki-ai-card-num-1 {
	background: rgba(129, 140, 248, 0.15);
	border: 1px solid rgba(129, 140, 248, 0.3)
}

.ki-ai-card-num-2 {
	background: rgba(56, 189, 248, 0.15);
	border: 1px solid rgba(56, 189, 248, 0.3)
}

.ki-ai-card-num-3 {
	background: rgba(192, 132, 252, 0.15);
	border: 1px solid rgba(192, 132, 252, 0.3)
}

.ki-ai-card-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.35);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 4px
}

.ki-ai-card-name {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1
}

.ki-ai-card-name-1 {
	color: #818CF8
}

.ki-ai-card-name-2 {
	color: #38BDF8
}

.ki-ai-card-name-3 {
	color: #C084FC
}

.ki-ai-card-name sup {
	font-size: 11px;
	font-weight: 600;
	font-style: italic;
	opacity: 0.8;
	vertical-align: super;
	margin-left: 2px
}

.ki-ai-card-tagline {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
	margin-bottom: 24px;
	font-style: italic
}

.ki-ai-card-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.06);
	margin-bottom: 22px
}

.ki-ai-features {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.ki-ai-feature {
	display: flex;
	align-items: flex-start;
	gap: 12px
}

.ki-ai-feature-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 5px
}

.ki-ai-feature-dot-1 {
	background: #818CF8
}

.ki-ai-feature-dot-2 {
	background: #38BDF8
}

.ki-ai-feature-dot-3 {
	background: #C084FC
}

.ki-ai-feature-text {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.55
}

.ki-ai-feature-text strong {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600
}

.ki-ai-stat-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 48px;
	border: 1px solid rgba(139, 92, 246, 0.15);
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	z-index: 2
}

.ki-ai-stat-item {
	text-align: center;
	padding: 20px 16px;
	background: #0d1229;
	border-right: 1px solid rgba(139, 92, 246, 0.1)
}

.ki-ai-stat-item:last-child {
	border-right: none
}

.ki-ai-stat-val {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 4px
}

.ki-ai-stat-val-1 {
	color: #818CF8
}

.ki-ai-stat-val-2 {
	color: #38BDF8
}

.ki-ai-stat-val-3 {
	color: #34D399
}

.ki-ai-stat-val-4 {
	color: #FCD34D
}

.ki-ai-stat-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4)
}

/* INDUSTRIES */
.ki-industries {
	padding: 80px 0;
	background: var(--ki-light)
}

.ki-industries-header {
	text-align: center;
	margin-bottom: 48px
}

.ki-industry-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px
}

.ki-industry-card {
	background: #fff;
	border: 1px solid var(--ki-border);
	border-radius: 12px;
	padding: 22px;
	text-align: center;
	transition: all 0.2s;
}

.ki-industry-card:hover {
	border-color: var(--ki-primary);
	transform: translateY(-2px)
}

.ki-industry-icon {
	font-size: 28px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center
}

.ki-industry-icon img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 10px;
	display: block
}

.ki-industry-name {
	font-size: 14.5px;
	font-weight: 600;
	color: #0A5A94;
	margin-bottom: 6px
}

.ki-industry-tagline {
	font-size: 12.5px;
	color: var(--ki-muted);
	line-height: 1.5
}

/* MARKETPLACE */
.ki-marketplace {
	padding: 90px 0;
	background: #fff;
	overflow: hidden
}

.ki-marketplace-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 80px
}

.ki-marketplace-pillars {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px
}

.ki-pillar {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--ki-border);
	border-radius: 12px;
	background: var(--ki-light);
	transition: border-color 0.2s
}

.ki-pillar:hover {
	border-color: var(--ki-primary)
}

.ki-pillar-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.ki-pillar-icon svg {
	width: 20px;
	height: 20px
}

.ki-pillar-icon-green {
	background: #DCFCE7;
	color: #16A34A
}

.ki-pillar-icon-red {
	background: #FEE2E2;
	color: #DC2626
}

.ki-pillar-icon-blue {
	background: #E0E7FF;
	color: #4F46E5
}

.ki-pillar-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ki-dark);
	margin-bottom: 4px
}

.ki-pillar-desc {
	font-size: 13px;
	color: var(--ki-muted);
	line-height: 1.5
}

.ki-hub-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px
}

.ki-marketplace-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.ki-mp-tag {
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 12px;
	background: var(--ki-light);
	color: var(--ki-primary);
	border: 1px solid rgba(10, 90, 148, 0.2);
	font-weight: 500
}

/* CTA */
.ki-cta {
	background: var(--ki-primary);
	padding: 72px 0;
	text-align: center;
	position: relative;
	overflow: hidden
}

.ki-cta::before {
	content: '';
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 300px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 50%
}

.ki-cta h2 {
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 14px;
	position: relative;
	z-index: 2
}

.ki-cta-sub {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 36px;
	position: relative;
	z-index: 2
}

.ki-cta-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	position: relative;
	z-index: 2
}

.ki-btn-white {
	background: #fff;
	color: var(--ki-primary);
	padding: 14px 32px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 15px;
	border: 2px solid #fff;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-ghost {
	background: transparent;
	color: #fff;
	padding: 14px 32px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-ghost:hover {
	background: transparent;
	color: #fff;
	padding: 14px 32px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

@media(max-width:900px) {

	.ki-hero-inner,
	.ki-marketplace-layout {
		grid-template-columns: 1fr
	}

	.ki-story-grid,
	.ki-modules-grid,
	.ki-ai-cards {
		grid-template-columns: 1fr
	}

	.ki-industry-grid,
	.ki-channel-row {
		grid-template-columns: repeat(5, 1fr)
	}

	.ki-stats-grid,
	.ki-ai-stat-bar {
		grid-template-columns: repeat(2, 1fr)
	}

	.ki-footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.ki-hero h1 {
		font-size: 38px
	}

	.ki-hero-visual {
		display: none
	}

	.ki-nav-links a:not(.ki-nav-cta) {
		display: none
	}
}

@media (max-width: 980px) {

	.ki-industry-grid,
	.ki-channel-row {
		grid-template-columns: repeat(2, 1fr);
	}
.ki-platform-story {
	padding: 10px 0!important;
	background: var(--ki-light)
}
	.ki-hero-inner {
		padding: 50px 20px;
	}

	.ki-wrap {
		margin: 0 auto;
		padding: 0 20px;
	}

	.ki-cta h2,
	.ki-section-title,
	.ki-ai-title {
		font-size: 28px;
	}

	.ki-btn-white,
	.ki-btn-ghost {
		padding: 8px;
		font-size: 14px;
	}

	.revamherobutton-btn-primary-angled,
	.revamherobutton-custom-btn {
		padding: 10px !important;

	}

	.ki-btn-primary {

		padding: 10px !important;
	}

	.revamherobutton-custom-btn {
		font-size: 12px !important;
	}

	.ki-btn-primary {
		font-size: 12px !important;
	}

	.ki-hero-ctas {
		display: flex;
		gap: 14px;
		margin-bottom: 40px;
		flex-wrap: nowrap;
	}

	.ki-channels-bolt {
		width: 50px;
		height: 50px;
		background: #111827;
		border-radius: 50%;
		border: 4px solid #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26px;
		margin-top: 18px;
		margin-right: -32px;
	}
}

.revamherobutton-custom-btn {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	position: relative;
	border-radius: 8px !important;
}

.revamherobutton-custom-btn::after {
	display: none !important;
}

.revamherobutton-custom-btn::before {
	display: none !important;
}

/* === FROM YOUR MAIN STYLESHEET === */

:root {
	--brand-gap: clamp(1rem, 2vw, 2rem);
	/* duration is now set per-row by JS based on pixels-per-second */
}

.paddingin_sectionsecond {
	padding: 20px 0px 50px 0px !important;
	background: #F3F9FF;
}

.trusted_brand {
	text-align: center;
	color: #000!important;
	font-size: 23.974px;
	font-style: normal;
	font-weight: 600;
	line-height: 57px;
	letter-spacing: -0.211px;
	font-family: 'Poppins';
}

.brand-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: auto;
	max-width: 100%;
	padding: 0;
}

/* === MARQUEE ROWS === */

.marquee-row {
	display: flex;
	overflow: hidden;
	user-select: none;
	width: 100%;
	margin-bottom: 10px;

}

.marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--brand-gap);
	width: max-content;
	animation: marquee-left-px 40s linear infinite;
	/* duration overridden by JS */
	will-change: transform;
	backface-visibility: hidden;
}

.marquee-row-reverse .marquee-track {
	animation: marquee-left-px 40s linear infinite;
	animation-direction: reverse;
}

/* === LOGO CARDS — matches your brand-marquee-group img style === */

.marquee-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	box-sizing: border-box;
}

.marquee-item img {
	width: auto;
	height: 66px;
	border-radius: 12px;
	background: #fff;

	display: block;
	object-fit: contain;
}

/* === KEYFRAMES — pixel-exact, no gap jump === */

@keyframes marquee-left-px {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-1 * var(--scroll-px)));
	}
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
	.marquee-item img {
		height: 46px;
	}
	.market-logo{
    position:relative;
    width:360px!important;
    height:360px!important;
    --kh-r: 128px;
}

	.trusted_brand {
		font-size: 18px;
		line-height: 40px;
		padding: 0 16px;
	}
}

.konnect-ai-home {
	font-family: 'Poppins', sans-serif;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.1;

	background: linear-gradient(90deg, #6C63FF 0%, #A855F7 50%, #EC4899 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;

	display: inline-block;
}

.ki-ai-card-name-1,
.ki-ai-card-name-2,
.ki-ai-card-name-3 {
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: Poppins;
	font-size: 41.614px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.624px;
}
@media (min-width: 768px) {
.market-logo{
    position:relative;
    width:500px;
    height:500px;
    --kh-r: 150px;
}}

/* ==========================================================================
   MARKETPLACE HUB — circular partner diagram (matches supplied reference design)
   .market-logo is the square stage; --kh-r controls the node ring radius and
   is overridden per breakpoint above so nodes never spill past the stage edge.
   ========================================================================== */

.kh-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px dashed rgba(10, 90, 148, 0.18);
	pointer-events: none
}

.kh-ring-outer {
	width: 300px;
	height: 300px
}

.kh-ring-inner {
	width: 200px;
	height: 200px;
	border-color: rgba(10, 90, 148, 0.25)
}

.kh-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--ki-primary);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 8px rgba(10, 90, 148, 0.12), 0 12px 28px rgba(10, 90, 148, 0.22)
}

.kh-center-icon {
	width: 26px;
	height: 26px
}

.kh-center-label {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3
}

.kh-node {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transform: translate(-50%, -50%) rotate(var(--a)) translate(0, calc(-1 * var(--kh-r))) rotate(calc(-1 * var(--a)))
}

.kh-node-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--ki-border);
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px
}

.kh-node-icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain
}

.kh-node-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--ki-muted);
	white-space: nowrap
}

@media (max-width: 768px) {
	.kh-node {
		width: 56px
	}

	.kh-node-icon {
		width: 48px;
		height: 48px;
		padding: 8px
	}

	.kh-node-label {
		font-size: 10px
	}

	.kh-center {
		width: 88px;
		height: 88px
	}

	.kh-center-icon {
		width: 22px;
		height: 22px
	}

	.kh-center-label {
		font-size: 7.5px
	}
}

/* ==========================================================================
   KONNECT INSIGHTS — HERO DASHBOARD
   Figma "Revamp files" → node 684:5725
   Drop-in replacement for .ki-platform-preview inside .ki-hero-visual.
   Everything is scoped under #ki-dash — no other section is affected.
   ========================================================================== */

/* Prevents a CSS Grid pitfall: grid items default to min-width:auto, which
   lets their content's intrinsic size grow the grid TRACK itself. Without
   this, letting the dashboard grow larger than its column would enlarge
   the column instead of safely overflowing past it — and since that
   changes #ki-dash's own measured size, it would feed back into the
   ResizeObserver in the JS and run away. This keeps the column's width
   fixed to the grid's own math, letting the dashboard overflow past it
   (into genuinely free page margin) without ever growing the column. */
.ki-hero-visual { min-width: 0 !important; }

#ki-dash {
	--kih-blue:      var(--ki-primary, #0A5A94);
	--kih-panel:     #0D1929;
	--kih-panel-alt: #0E1A29;
	--kih-ghost:     #0E1E35;
	--kih-hair:      rgba(255, 255, 255, 0.06);
	--kih-muted:     #64748B;
	--kih-slate:     #94A3B8;
	--kih-green:     #10B981;
	--kih-accent:    #0070F3;
	--kih-s:         0.90;           /* overwritten by JS from the real column width */
	display: block !important;
	width: 100% !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
}

#ki-dash *,
#ki-dash *::before,
#ki-dash *::after { box-sizing: border-box !important; }

#ki-dash p,
#ki-dash h2 { margin: 0 !important; padding: 0 !important; }

#ki-dash a       { text-decoration: none !important; }
#ki-dash .kih-i  { display: block !important; flex: 0 0 auto !important; }

/* JS-off fallback scale steps (JS replaces --kih-s with the exact fit) */
@media (max-width: 1299px) { #ki-dash { --kih-s: 0.79; } }
@media (max-width: 1100px) { #ki-dash { --kih-s: 0.75; } }
@media (max-width: 1024px) { #ki-dash { --kih-s: 0.70; } }
@media (max-width:  980px) { #ki-dash { --kih-s: 0.63; } }

/* ============================ PRODUCT MOCK ============================== */

#ki-dash .kih-mock-wrap {
	flex: 0 0 auto !important;
	/* Sized to the TRUE content bounds, not the full design frame.
	   Content spans x:[-68.17, 688.03] (756.2 wide), y:[50.94, 461.14] (410.2 tall) —
	   the app shell starts 50.94px down and Omnichannel overhangs 68.17px left, so the
	   old frame-based box left a big empty band at the top and slack on the sides. */
	width: calc(756.2px * var(--kih-s)) !important;
	height: calc(410.2px * var(--kih-s)) !important;
	overflow: visible !important;
}

#ki-dash .kih-mock {
	position: relative !important;
	width: 682px !important;
	height: 468.094px !important;
	/* Pull the scaled content flush to the wrap's top-left by offsetting the
	   transform origin to the content's true top-left corner (-68.17, 50.94). */
	transform: translate(calc(68.17px * var(--kih-s)), calc(-50.94px * var(--kih-s))) scale(var(--kih-s)) !important;
	transform-origin: 0 0 !important;
}

#ki-dash .kih-card {
	position: absolute !important;
	background: var(--kih-panel) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	filter: drop-shadow(0 1.3px 1.3px rgba(255, 255, 255, 0.18)) !important;
}

/* ------------------------------ app shell -------------------------------- */

#ki-dash .kih-app {
	position: absolute !important;
	left: 15.34px !important;
	top: 50.95px !important;
	width: 627.234px !important;
	height: 355.936px !important;
	z-index: 1 !important;
	background: var(--kih-panel) !important;
	border: 0.756px solid rgba(184, 184, 184, 0.48) !important;
	border-radius: 15.114px !important;
	overflow: hidden !important;
}

#ki-dash .kih-topbar {
	position: absolute !important;
	left: -0.756px !important;
	right: -0.756px !important;
	top: -0.756px !important;
	height: 32.185px !important;
	display: flex !important;
	align-items: center !important;
	gap: 9.068px !important;
	padding: 9.068px 15.114px 9.824px !important;
	background: var(--kih-blue) !important;
	border-bottom: 0.756px solid rgba(255, 255, 255, 0.08) !important;
}

#ki-dash .kih-topbar-l {
	display: flex !important;
	align-items: center !important;
	gap: 9.116px !important;
	color: #FFFFFF !important;
}
#ki-dash .kih-logo { display: block !important; width: 70.902px !important; height: 12.504px !important; }

#ki-dash .kih-topbar-r {
	margin-left: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 5.374px !important;
}

#ki-dash .kih-search {
	display: flex !important;
	align-items: center !important;
	gap: 5.038px !important;
	padding: 2.687px 4.03px !important;
	border-radius: 6.717px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 0.336px solid rgba(255, 255, 255, 0.08) !important;
	color: #D5D5D5 !important;
}
#ki-dash .kih-search-t {
	width: 66.166px !important;
	font-size: 4.03px !important;
	line-height: normal !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

#ki-dash .kih-bell { position: relative !important; display: block !important; color: #E7E7E7 !important; }
#ki-dash .kih-dot {
	position: absolute !important;
	top: -0.672px !important;
	right: -1.47px !important;
	width: 2.015px !important;
	height: 2.015px !important;
	border-radius: 1.008px !important;
	background: #EF4444 !important;
}

#ki-dash .kih-me {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 10.748px !important;
	height: 10.748px !important;
	border-radius: 5.374px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: 0.336px solid rgba(255, 255, 255, 0.2) !important;
	font-family: "Inter", "Poppins", sans-serif !important;
	font-size: 4.03px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	margin-left: 3.359px !important;
}
#ki-dash .kih-me-x { display: flex !important; flex-direction: column !important; margin-left: 3.359px !important; }
#ki-dash .kih-me-n {
	display: inline-flex !important;
	align-items: center !important;
	gap: 1.4px !important;
	font-size: 4.03px !important;
	font-weight: 600 !important;
	line-height: 4.837px !important;
	color: #FFFFFF !important;
	white-space: nowrap !important;
}
#ki-dash .kih-me-r {
	font-size: 3.359px !important;
	line-height: 4.03px !important;
	color: rgba(224, 237, 255, 0.65) !important;
}

/* body + sidebar */

#ki-dash .kih-body {
	position: absolute !important;
	left: -1.512px !important;
	top: 31.741px !important;
	width: 627.99px !important;
	height: 323.441px !important;
	display: flex !important;
	align-items: flex-start !important;
}

#ki-dash .kih-nav {
	position: relative !important;
	flex: 0 0 auto !important;
	width: 37.785px !important;
	height: 100% !important;
	background: var(--kih-panel-alt) !important;
	border-right: 0.756px solid var(--kih-hair) !important;
	overflow: hidden !important;
}
#ki-dash .kih-nav-group { position: absolute !important; left: 3.023px !important; right: 1.95px !important; }
#ki-dash .kih-nav-item {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	height: 20.505px !important;
	display: block !important;
	color: rgba(255, 255, 255, 0.55) !important;
}
#ki-dash .kih-nav-item .kih-i { position: absolute !important; left: 10.34px !important; top: 4.645px !important; }
#ki-dash .kih-nav-item.is-active {
	background: #0F3550 !important;
	border-left: 1.963px solid #0386E5 !important;
	color: #FFFFFF !important;
}
#ki-dash .kih-nav-item.is-active .kih-i { left: 8.38px !important; }

#ki-dash .kih-main { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; height: 100% !important; }

#ki-dash .kih-kpi {
	position: absolute !important;
	top: 6.114px !important;
	width: 138.105px !important;
	height: 70px !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 8.313px 9.824px !important;
	background: var(--kih-panel) !important;
	border: 0.756px solid var(--kih-hair) !important;
	border-radius: 6.046px !important;
	filter: drop-shadow(0 1.255px 1.255px rgba(255, 255, 255, 0.18)) !important;
}
#ki-dash .kih-kpi-top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 4px !important;
	width: 100% !important;
}
#ki-dash .kih-kpi-label {
	font-size: 7.557px !important;
	line-height: normal !important;
	color: rgba(255, 255, 255, 0.4) !important;
	padding: 0.756px 0 !important;
}
#ki-dash .kih-kpi-badge {
	flex: 0 0 auto !important;
	padding: 1px 4px !important;
	border-radius: 4px !important;
	background: rgba(0, 112, 243, 0.15) !important;
	border: 0.5px solid rgba(0, 112, 243, 0.35) !important;
	font-size: 5.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	line-height: normal !important;
	color: #7FA8DA !important;
}
#ki-dash .kih-kpi-value {
	font-size: 12.847px !important;
	font-weight: 700 !important;
	line-height: normal !important;
	padding-top: 0.756px !important;
}
#ki-dash .kih-v-white { color: #FFFFFF !important; }
#ki-dash .kih-v-amber { color: #FCD34D !important; }
#ki-dash .kih-v-green { color: #34D399 !important; }
#ki-dash .kih-v-blue  { color: #60A5FA !important; }
#ki-dash .kih-v-red   { color: #F87171 !important; }
#ki-dash .kih-kpi-delta {
	font-size: 7.557px !important;
	line-height: normal !important;
	color: #34D399 !important;
	padding: 0.756px 0 !important;
}
#ki-dash .kih-kpi-warn {
	display: flex !important;
	align-items: center !important;
	gap: 3px !important;
	color: #F59E0B !important;
}
#ki-dash .kih-warn-i { color: #F59E0B !important; }

#ki-dash .kih-ghost {
	position: absolute !important;
	display: block !important;
	background: var(--kih-ghost) !important;
	opacity: 0.3 !important;
	border-radius: 13.071px !important;
}

/* --------------------- floating: omnichannel ----------------------------- */

#ki-dash .kih-omni {
	left: calc(50% - 220.55px) !important;
	top: 178.55px !important;
	transform: translateX(-50%);
	z-index: 5 !important;
	gap: 3.478px !important;
	padding: 15.652px 11.304px 18.261px !important;
	border: 0.87px solid var(--kih-hair) !important;
	border-radius: 13.913px !important;
}
#ki-dash .kih-omni-head { width: 100% !important; padding-bottom: 5.652px !important; }
#ki-dash .kih-omni-top {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px !important;
}
#ki-dash .kih-card-t {
	font-size: 9.043px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	color: #FFFFFF !important;
	white-space: nowrap !important;
}
#ki-dash .kih-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3.478px !important;
	font-size: 9.565px !important;
	line-height: normal !important;
	color: var(--kih-slate) !important;
	white-space: nowrap !important;
}
#ki-dash .kih-arrow { height: 1px !important; width: 11.304px !important; }
#ki-dash .kih-card-s {
	font-size: 6.783px !important;
	line-height: normal !important;
	color: var(--kih-muted) !important;
	white-space: nowrap !important;
}

#ki-dash .kih-omni-body {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10.435px !important;
	padding-top: 10.435px !important;
}
#ki-dash .kih-channels {
	display: flex !important;
	flex-direction: column !important;
	gap: 6.956px !important;
	padding-right: 5.652px !important;
	border-right: 1.13px solid #062E4A !important;
}
#ki-dash .kih-ch {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 6.956px !important;
	padding: 6.956px 8.696px !important;
	border-radius: 6.956px !important;
	border: 0.87px solid transparent !important;
}
#ki-dash .kih-ch.is-active {
	background: rgba(0, 112, 243, 0.2) !important;
	border-color: rgba(0, 112, 243, 0.3) !important;
}
#ki-dash .kih-ch-l { display: flex !important; align-items: center !important; gap: 6.956px !important; color: #C1C1C1 !important; }
#ki-dash .kih-ch.is-active .kih-ch-l { color: #FFFFFF !important; }

/* per-channel brand icon colours (override the inherited grey on the SVG only) */
#ki-dash .kih-ch-l .ch-x  { color: #FFFFFF !important; }  /* X (white on dark) */
#ki-dash .kih-ch-l .ch-wa { color: #25D366 !important; }  /* WhatsApp green   */
#ki-dash .kih-ch-l .ch-em { color: #EA4335 !important; }  /* Email red        */
#ki-dash .kih-ch-l .ch-lc { color: #3B82F6 !important; }  /* Live Chat blue   */
/* Instagram: SVG can't take a CSS gradient via `color`, so paint the glyph
   with a gradient background clipped to the icon's filled path via a mask. */
#ki-dash .kih-ch-l .ch-ig {
	color: transparent !important;
	background: linear-gradient(45deg, #F58529 0%, #DD2A7B 45%, #8134AF 70%, #515BD4 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
}
#ki-dash .kih-ch-l .ch-ig path { fill: url(#kih-ig-grad) !important; }
#ki-dash .kih-ch-t { font-size: 7.913px !important; line-height: normal !important; white-space: nowrap !important; }
#ki-dash .kih-ch-n {
	flex: 0 0 auto !important;
	padding: 1.739px 5.217px !important;
	border-radius: 8.696px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	font-size: 5.652px !important;
	line-height: normal !important;
	color: var(--kih-slate) !important;
}
#ki-dash .kih-ch-n.is-active { background: rgba(255, 255, 255, 0.15) !important; color: #FFFFFF !important; }

#ki-dash .kih-chats { display: flex !important; flex-direction: column !important; }
#ki-dash .kih-chat {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8.696px !important;
	padding: 8.696px !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border-bottom: 0.87px solid #062E4A !important;
}
#ki-dash .kih-chat-av {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 27.826px !important;
	height: 27.826px !important;
	border-radius: 13.913px !important;
	font-size: 9.565px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
}
#ki-dash .kih-av-indigo { background: #6366F1 !important; }
#ki-dash .kih-av-sky    { background: #0284C7 !important; }
#ki-dash .kih-av-pink   { background: #EC4899 !important; }

#ki-dash .kih-chat-b { display: flex !important; flex-direction: column !important; gap: 1.739px !important; }
#ki-dash .kih-chat-h { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
#ki-dash .kih-chat-n { font-size: 7.913px !important; font-weight: 600 !important; line-height: normal !important; color: #FFFFFF !important; white-space: nowrap !important; }
#ki-dash .kih-chat-t { font-size: 5.652px !important; line-height: normal !important; color: var(--kih-muted) !important; white-space: nowrap !important; }
#ki-dash .kih-chat-r { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 2.261px !important; }
#ki-dash .kih-chat-m {
	font-size: 5.652px !important;
	line-height: 11.304px !important;
	color: var(--kih-slate) !important;
	white-space: nowrap !important;
}
#ki-dash .kih-tag {
	flex: 0 0 auto !important;
	padding: 1.739px 6.956px !important;
	border-radius: 3.478px !important;
	border: 0.87px solid transparent !important;
	font-size: 4.522px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	white-space: nowrap !important;
}
#ki-dash .kih-tag.is-pending  { background: rgba(217, 119, 6, 0.2); border-color: rgba(217, 119, 6, 0.3) !important; color: #F59E0B !important; }
#ki-dash .kih-tag.is-resolved { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3) !important; color: #10B981 !important; }
#ki-dash .kih-tag.is-open     { background: rgba(0, 112, 243, 0.2);  border-color: rgba(0, 112, 243, 0.3)  !important; color: #7FA8DA !important; }

/* --------------------- floating: agent empower --------------------------- */

#ki-dash .kih-ae {
	left: 315.43px !important;
	right: 211.99px !important;
	top: 177.37px !important;
	height: 217.001px !important;
	z-index: 4 !important;
	justify-content: space-between !important;
	padding: 9.251px !important;
	border: 0.547px solid var(--kih-hair) !important;
	border-radius: 8.758px !important;
}
#ki-dash .kih-ae-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 6px !important;
}
#ki-dash .kih-ae-brand {
	display: inline-flex !important;
	align-items: center !important;
}
#ki-dash .kih-ae-logo {
	display: block !important;
	height: 13px !important;   /* matches the old wordmark cap-height in design px */
	width: auto !important;
}
#ki-dash .kih-ae-brand b { font-weight: 700 !important; }
#ki-dash .kih-ae-brand i { font-style: normal !important; font-weight: 500 !important; font-size: 8.5px !important; }
#ki-dash .kih-ae-badge {
	flex: 0 0 auto !important;
	padding: 1.642px 4.379px !important;
	border-radius: 6.569px !important;
	background: rgba(139, 92, 246, 0.2) !important;
	border: 0.547px solid rgba(139, 92, 246, 0.3) !important;
	font-size: 3.558px !important;
	line-height: normal !important;
	color: #A78BFA !important;
	white-space: nowrap !important;
}

#ki-dash .kih-ae-msg {
	display: flex !important;
	align-items: flex-start !important;
	gap: 5.474px !important;
	width: 100% !important;
	padding: 4.981px 4.27px !important;
	border-radius: 5.474px !important;
	background: rgba(255, 255, 255, 0.03) !important;
}
#ki-dash .kih-ae-av {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 17.516px !important;
	height: 17.516px !important;
	border-radius: 50% !important;
	background: #6366F1 !important;
	font-size: 6px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
}
#ki-dash .kih-ae-msg-b { flex: 1 1 0 !important; min-width: 0 !important; }
#ki-dash .kih-ae-msg-h { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; }
#ki-dash .kih-ae-n { font-size: 4.981px !important; font-weight: 600 !important; line-height: normal !important; color: #FFFFFF !important; }
#ki-dash .kih-ae-t { font-size: 3.558px !important; line-height: normal !important; color: var(--kih-muted) !important; white-space: nowrap !important; }
#ki-dash .kih-ae-p { font-size: 3.558px !important; line-height: 7.116px !important; color: var(--kih-slate) !important; }

#ki-dash .kih-ins { display: flex !important; flex-direction: column !important; gap: 6.569px !important; width: 100% !important; }
#ki-dash .kih-ins-row { display: flex !important; align-items: center !important; width: 100% !important; }
#ki-dash .kih-ins-row-top { align-items: flex-start !important; }
#ki-dash .kih-ins-l {
	flex: 0 0 49.265px !important;
	display: flex !important;
	align-items: center !important;
	gap: 4.379px !important;
	font-size: 4.981px !important;
	line-height: normal !important;
	color: var(--kih-slate) !important;
}
#ki-dash .kih-ins-row-top .kih-ins-l { padding-top: 1.095px !important; }
#ki-dash .kih-ins-p { flex: 1 1 0 !important; min-width: 0 !important; font-size: 3.558px !important; line-height: 7.116px !important; color: var(--kih-slate) !important; }
#ki-dash .kih-pill {
	padding: 0.7px 3.4px !important;
	border-radius: 4px !important;
	font-size: 3.558px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	white-space: nowrap !important;
}
#ki-dash .kih-pill-green { background: rgba(16, 185, 129, 0.2) !important; color: #10B981 !important; }
#ki-dash .kih-pill-blue  { background: rgba(0, 112, 243, 0.2)  !important; color: #7FA8DA !important; }

#ki-dash .kih-sug {
	display: flex !important;
	flex-direction: column !important;
	gap: 3.284px !important;
	width: 100% !important;
	padding: 7.663px 6.569px 6.569px !important;
	border-radius: 5.474px !important;
	background: rgba(0, 112, 243, 0.05) !important;
	border: 0.547px dashed rgba(0, 112, 243, 0.3) !important;
}
#ki-dash .kih-sug-h { display: flex !important; align-items: center !important; justify-content: space-between !important; }
#ki-dash .kih-sug-t {
	display: flex !important;
	align-items: center !important;
	gap: 3.558px !important;
	font-size: 5.474px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	color: #3B82F6 !important;
}
#ki-dash .kih-copy-i { color: var(--kih-slate) !important; }
#ki-dash .kih-sug-p { font-size: 3.558px !important; line-height: 7.116px !important; color: var(--kih-slate) !important; }

#ki-dash .kih-use {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3.29px !important;
	width: 100% !important;
	padding: 5.474px !important;
	border-radius: 4.379px !important;
	background: var(--kih-blue) !important;
	font-size: 6.021px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	color: #FFFFFF !important;
	filter: drop-shadow(0 2.19px 3.284px rgba(0, 112, 243, 0.3)) !important;
}

/* --------------------- floating: ticket trends --------------------------- */

#ki-dash .kih-tt {
	left: 484.38px !important;
	right: 29.85px !important;
	top: 167.08px !important;
	height: 131.027px !important;
	z-index: 3 !important;
	gap: 18.228px !important;
	padding: 11.763px !important;
	border: 0.654px solid var(--kih-hair) !important;
	border-radius: 10.456px !important;
}
#ki-dash .kih-tt-head { display: flex !important; gap: 8px; align-items: center !important; justify-content: space-between !important; width: 100% !important;}
#ki-dash .kih-tt-t { font-size: 9.803px !important; }
#ki-dash .kih-select {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4.248px !important;
	padding: 2.549px 6.796px !important;
	border-radius: 3.921px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 0.654px solid rgba(255, 255, 255, 0.1) !important;
	font-size: 4.248px !important;
	line-height: normal !important;
	color: #C1C1C1 !important;
	white-space: nowrap !important;
}
#ki-dash .kih-tt-meta { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; width: 100% !important; }
#ki-dash .kih-tt-m-l, #ki-dash .kih-tt-m-r { display: flex !important;
    flex-direction: row;
    gap: 5px;}
#ki-dash .kih-tt-m-r { align-items: flex-end !important; }
#ki-dash .kih-tt-num { font-size: 5.947px !important; font-weight: 600 !important; line-height: normal !important; color: #FFFFFF !important; }
#ki-dash .kih-tt-cap { font-size: 5.228px !important; line-height: normal !important; color: var(--kih-muted) !important; white-space: nowrap !important; }
#ki-dash .kih-tt-up {
	display: inline-flex !important;
	align-items: center !important;
	gap: 2.5px !important;
	font-size: 7.189px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	color: var(--kih-green) !important;
}

#ki-dash .kih-chart {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	width: 100% !important;
	border-bottom: 0.654px solid rgba(255, 255, 255, 0.05) !important;
}
#ki-dash .kih-bar-col { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2.549px !important; }
#ki-dash .kih-bar {
	display: block !important;
	width: 10.456px !important;
	background: var(--kih-accent) !important;
	opacity: 0.8 !important;
	border-radius: 1.307px 1.307px 0 0 !important;
}
#ki-dash .kih-bar.is-peak {
	background: #0070F3 !important;
	opacity: 1 !important;
}
#ki-dash .kih-bar-l { font-size: 5.228px !important; line-height: normal !important; color: var(--kih-muted) !important; }

/* --------------------- floating: customer 360 ---------------------------- */

#ki-dash .kih-c3 {
	left: 484.38px !important;
	right: -6.04px !important;
	top: 316.78px !important;
	z-index: 2 !important;
	gap: 7.933px !important;
	padding: 14.28px !important;
	border: 0.793px solid var(--kih-hair) !important;
	border-radius: 12.693px !important;
}
#ki-dash .kih-c3-head { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; }
#ki-dash .kih-c3-t { font-size: 8.25px !important; }
#ki-dash .kih-c3-link { font-size: 6.188px !important; gap: 3.173px !important; }

#ki-dash .kih-c3-id { display: flex !important; align-items: center !important; gap: 9.52px !important; width: 100% !important; }
#ki-dash .kih-c3-av {
	flex: 0 0 auto !important;
	display: block !important;
	width: 31.732px !important;
	height: 31.732px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}
#ki-dash .kih-c3-info { display: flex !important; flex-direction: column !important; gap: 1.587px !important; }
#ki-dash .kih-c3-n { display: flex !important; align-items: center !important; gap: 4.76px !important; font-size: 9.52px !important; font-weight: 600 !important; line-height: normal !important; color: #FFFFFF !important; white-space: nowrap !important; }
#ki-dash .kih-vip {
	padding: 0.793px 4.76px !important;
	border-radius: 6.346px !important;
	background: rgba(16, 185, 129, 0.2) !important;
	font-size: 6.346px !important;
	font-weight: 700 !important;
	color: var(--kih-green) !important;
}
#ki-dash .kih-c3-row { display: flex !important; align-items: center !important; gap: 3.173px !important; font-size: 6.188px !important; line-height: normal !important; color: var(--kih-muted) !important; white-space: nowrap !important; }

#ki-dash .kih-c3-stats {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 6.346px !important;
	width: 100% !important;
	padding: 7.933px 6.346px 6.346px !important;
	border-radius: 6.346px !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border: 0.793px solid rgba(255, 255, 255, 0.03) !important;
}
#ki-dash .kih-c3-s { display: flex !important; flex-direction: column !important; }
#ki-dash .kih-c3-sv { font-size: 9.52px !important; font-weight: 700 !important; line-height: normal !important; color: #FFFFFF !important; white-space: nowrap !important; }
#ki-dash .kih-c3-sl { font-size: 6.188px !important; line-height: normal !important; color: var(--kih-muted) !important; white-space: nowrap !important; }
#ki-dash .kih-c3-div { flex: 0 0 auto !important; display: block !important; width: 1px !important; height: 21.142px !important; background: rgba(255, 255, 255, 0.1) !important; }


/* ==========================================================================
   ANIMATION LAYER — additive only, pure CSS, no JS dependency.

   Cards (.kih-app, .kih-card, .kih-omni) never animate as a whole — they are
   visible, in place, from the very first paint. Only what's inside them
   animates.

   Every rule below applies unconditionally — no class from JavaScript is
   required for anything to become visible. `animation-fill-mode: both`
   does the hiding for us: the browser applies the animation's `from` state
   from the moment the element exists, holds it for `animation-delay`, then
   plays. This means the browser's own paint/style pipeline drives the
   reveal — not a script that has to download, parse, and run first. If a
   script queued ahead of it on the page holds up execution, the dashboard
   still appears correctly and on time, because nothing here is waiting on it.

   The only thing JavaScript still does (see the accompanying .js file) is
   fit the dashboard's scale to the actual column width — a fluid-layout
   detail, not part of the reveal. CSS breakpoint fallbacks already cover a
   reasonable scale until that script runs, so even that has no visible gap.
   ========================================================================== */

/* --- structural: line spans introduced for the stagger (renders identically) */
#ki-dash .kih-sug-l     { display: block !important; }
#ki-dash .kih-chat      { position: relative !important; overflow: hidden !important; }

/* ------------------------------- keyframes ------------------------------- */

@keyframes kih-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes kih-fade-up   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kih-fade-up-s { from { opacity: 0; transform: translateY(6px);  } to { opacity: 1; transform: none; } }
@keyframes kih-slide-r   { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes kih-pop       { 0% { opacity: 0; transform: scale(.55); } 65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kih-bar-grow  { from { height: 0; } to { height: var(--h); } }
@keyframes kih-type      { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@keyframes kih-dot      { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .65); } 70%, 100% { box-shadow: 0 0 0 2.4px rgba(239, 68, 68, 0); } }
@keyframes kih-nav-glow { 0%, 100% { border-left-color: #0386E5; } 50% { border-left-color: #5BB8FF; } }
@keyframes kih-use-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 112, 243, .45); } 50% { box-shadow: 0 0 0 2.6px rgba(0, 112, 243, 0); } }
@keyframes kih-spark    { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.3); opacity: 1; } }
@keyframes kih-sweep    { 0% { transform: translateX(-100%); } 24%, 100% { transform: translateX(100%); } }
@keyframes kih-kpi-live { 0%, 90%, 100% { border-color: rgba(255, 255, 255, .06); } 95% { border-color: rgba(0, 112, 243, .38); } }

/* ------------------------------ app shell -------------------------------- */
/* .kih-app itself carries no animation — it's simply there. */

#ki-dash .kih-topbar   { animation: kih-fade .35s ease-out var(--d) both; }
#ki-dash .kih-nav-item { animation: kih-slide-r .35s cubic-bezier(.16, 1, .3, 1) var(--d) both; }

#ki-dash .kih-nav-item.is-active {
	animation: kih-slide-r .35s cubic-bezier(.16, 1, .3, 1) var(--d) both,
	           kih-nav-glow 2.6s ease-in-out calc(var(--d) + .4s) infinite;
}
#ki-dash .kih-kpi {
	animation: kih-fade-up .5s cubic-bezier(.16, 1, .3, 1) var(--d) both,
	           kih-kpi-live 11s linear calc(var(--d) + 1.5s) infinite;
}
#ki-dash .kih-dot { animation: kih-dot 2.2s ease-out .8s infinite; }

/* ------------------------ omnichannel internals -------------------------- */
/* .kih-omni itself carries no animation. */

#ki-dash :is(.kih-omni-top, .kih-card-s) {
	animation: kih-fade-up-s .4s cubic-bezier(.16, 1, .3, 1) var(--d) both;
}
#ki-dash .kih-ch   { animation: kih-slide-r .4s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
#ki-dash .kih-chat { animation: kih-fade-up-s .4s cubic-bezier(.16, 1, .3, 1) var(--d) both; }

#ki-dash .kih-chat:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 22%, rgba(0, 112, 243, .13) 50%, transparent 78%);
	transform: translateX(-100%);
	animation: kih-sweep 6s ease-in-out 2s infinite;
}

/* -------------------------- ticket trends -------------------------------- */
/* .kih-tt itself carries no animation. */

#ki-dash :is(.kih-tt-head, .kih-tt-meta) {
	animation: kih-fade-up-s .4s cubic-bezier(.16, 1, .3, 1) var(--d) both;
}
#ki-dash .kih-bar   { animation: kih-bar-grow .5s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
#ki-dash .kih-bar-l { animation: kih-fade .35s ease-out var(--d) both; }

/* -------------------------- agent empower -------------------------------- */
/* .kih-ae itself carries no animation. */

#ki-dash :is(.kih-ae-head, .kih-ae-msg, .kih-ins-row, .kih-sug) {
	animation: kih-fade-up-s .4s cubic-bezier(.16, 1, .3, 1) var(--d) both;
}
#ki-dash .kih-pill  { animation: kih-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d) both; }
#ki-dash .kih-sug-l { animation: kih-type var(--dur) steps(28, end) var(--d) both; }
#ki-dash .kih-spark { animation: kih-spark 1.4s ease-in-out 1.2s infinite; }
#ki-dash .kih-use {
	animation: kih-pop .4s cubic-bezier(.34, 1.56, .64, 1) var(--d) both,
	           kih-use-glow 2.8s ease-out calc(var(--d) + .4s) infinite;
}

/* -------------------------- customer 360 --------------------------------- */
/* .kih-c3 itself carries no animation. */

#ki-dash :is(.kih-c3-head, .kih-c3-id, .kih-c3-stats) {
	animation: kih-fade-up-s .4s cubic-bezier(.16, 1, .3, 1) var(--d) both;
}
#ki-dash .kih-c3-row { animation: kih-slide-r .35s cubic-bezier(.16, 1, .3, 1) var(--d) both; }

/* --------------------------- reduced motion ------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#ki-dash *,
	#ki-dash *::before,
	#ki-dash *::after { animation: none !important; }

	#ki-dash .kih-chat:first-child::after { content: none !important; }
	#ki-dash .kih-bar  { height: var(--h) !important; }
	#ki-dash .kih-omni { transform: translateX(-50%) !important; }
}
/* KRC badge — KI-AI gradient border + tint + gradient text (NEW badge untouched) */
#ki-dash .kih-kpi-badge--krc {
	position: relative !important;
	border: 0 !important;                 /* real border replaced by ::before */
	border-radius: 2px !important;
	background: linear-gradient(96deg,
		rgba(58, 134, 255, 0.10) -11.44%,
		rgba(181, 101, 255, 0.10) 41.88%,
		rgba(255, 143, 171, 0.10) 78.67%) !important;
	padding: 1.5px 4.5px !important;      /* +0.5px to make up for the removed border */
}

/* 0.5px gradient border via mask */
#ki-dash .kih-kpi-badge--krc::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	padding: 0.5px !important;
	border-radius: inherit !important;
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%)) !important;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) !important;
	pointer-events: none !important;
}

/* gradient text */
#ki-dash .kih-kpi-badge--krc .kih-kpi-badge-txt {
	display: inline-block !important;
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%)) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}
#ki-krc {
	--kx-bg:     #0c1220;
	--kx-black:  #030407;
	--kx-card:   #0f1929;
	--kx-line:   #1c2533;
	--kx-blue:   #0A5A94;
	--kx-blue-2: #0b6aae;
	--kx-dim:    #4b5b6e;
	--kx-mute:   #6f8298;
	--kx-text:   #b9c4cf;
	--kx-ai:     linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%);
	--kx-sticky-top: 100px; /* clears the site header */
 
	display: block;
	position: relative;
	background: var(--kx-bg);
	color: #fff;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	padding: 90px 0 100px;
}
 
/* local reset */
#ki-krc, #ki-krc *, #ki-krc *::before, #ki-krc *::after { box-sizing: border-box; }
#ki-krc :where(h2, p, span, div, b, strong, a, button, svg) { margin: 0; padding: 0; }
#ki-krc :where(h2, p) { font-family: inherit; text-transform: none; }
#ki-krc a { color: inherit; text-decoration: none; box-shadow: none; }
#ki-krc button {
	-webkit-appearance: none; appearance: none;
	font: inherit; color: inherit; background: none;
	border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
	text-transform: none; letter-spacing: inherit; line-height: inherit;
	text-align: inherit; width: auto; height: auto; min-height: 0;
	cursor: pointer;
}
#ki-krc svg { display: inline-block; vertical-align: middle; }
#ki-krc :focus { outline: none; }
#ki-krc :focus-visible { outline: 2px solid #3A86FF; outline-offset: 2px; }
#ki-krc [hidden] { display: none !important; }
 
/* wrap — matches .ki-wrap */
#ki-krc .kx-wrap { max-width: 1300px; margin: 0 auto; padding: 0; }
@media (max-width: 1340px) { #ki-krc .kx-wrap { padding: 0 20px; } }
 
/* ── header ─────────────────────────────── */
#ki-krc .kx-eyebrow {
	font-size: 12px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #7B8CFF;
	margin-bottom: 14px;
}
#ki-krc .kx-headline {
    margin-bottom: 14px;
    color: #FFF;
    font-family: Poppins;
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 49.28px;
    letter-spacing: -1.32px;
}
#ki-krc .kx-sub {

	max-width: 760px;
	    color: #5A7A96;
    font-family: Poppins;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
 
/* ── layout ─────────────────────────────── */
#ki-krc .kx-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 22px;
}
 
/* ── sidebar ────────────────────────────── */
#ki-krc .kx-sidebar {
	background: var(--kx-black);
	border: 1px solid var(--kx-line);
	border-radius: 16px;
	overflow: hidden;
	position: sticky;
	top: var(--kx-sticky-top);
}
#ki-krc .kx-side-head { padding: 22px 20px 20px; }
#ki-krc .kx-side-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #c9d3de;
	margin-bottom: 14px;
}
#ki-krc .kx-search {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: #0b111b;
	border: 1px solid #1f2a3a;
	border-radius: 8px;
	font-size: 13px; color: #9aa8b8;
}
#ki-krc .kx-search svg { flex-shrink: 0; opacity: .7; }
 
#ki-krc .kx-tabs { display: flex; background: #0e141d; }
#ki-krc .kx-tab {
	flex: 1 1 0; display: block;
	padding: 12px 4px;
	font-size: 11.5px; font-weight: 500;
	color: #4f5f72; text-align: center;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
#ki-krc .kx-tab:hover { color: #8fb0cc; }
#ki-krc .kx-tab.is-active { color: #3A86FF; border-bottom-color: var(--kx-blue); }
 
#ki-krc .kx-qlist { padding: 0 0 8px; }
#ki-krc .kx-qitem {
	display: flex; align-items: flex-start; gap: 14px;
	width: 100%;
	padding: 14px 20px;
	border-left: 2px solid transparent;
	transition: background .15s;
}
#ki-krc .kx-qitem:hover { background: rgba(10, 90, 148, .08); }
#ki-krc .kx-qitem.is-active {
	background: #0a2536;
	border-left-color: #1f7fd0;
}
#ki-krc .kx-qnum {
	flex-shrink: 0; min-width: 16px; margin-top: 3px;
	font-size: 10px; font-weight: 500; color: #4f5f72;
}
#ki-krc .kx-qitem.is-active .kx-qnum { color: #5e9fd6; }
#ki-krc .kx-qtext {
	font-size: 13px; font-weight: 500; line-height: 1.5;
	color: #6f8298;
	text-wrap-mode: wrap;
}
#ki-krc .kx-qitem.is-active .kx-qtext { color: #d6e3ee; }
 
/* ── chat panel ─────────────────────────── */
#ki-krc .kx-panel {
	display: flex; flex-direction: column;
	min-height: 560px;
	background: var(--kx-black);
	border: 1px solid #262c35;
	border-radius: 18px;
	overflow: hidden;
}
#ki-krc .kx-topbar {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 20px;
	background: #141619;
	border-bottom: 1px solid #22262c;
}
 
/* KRC logo tile — KI-AI gradient border, tint and text */
#ki-krc .kx-logo {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 6px 12px;
	border-radius: 6px;
	background: linear-gradient(96deg, rgba(58,134,255,.16), rgba(181,101,255,.16), rgba(255,143,171,.16));
}
#ki-krc .kx-logo::before {
	content: "";
	position: absolute; inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--kx-ai);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
#ki-krc .kx-logo span {
	font-size: 22px; font-weight: 700; line-height: 1.2;
	background: var(--kx-ai);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
 
#ki-krc .kx-status {
	display: flex; align-items: center; gap: 7px;
	margin-left: auto;
	font-size: 12px; font-weight: 500; color: #22c55e;
}
#ki-krc .kx-status-dot {
	display: block; width: 6px; height: 6px;
	border-radius: 50%; background: #22c55e;
	animation: kx-blink 2s ease infinite;
}
@keyframes kx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#ki-krc .kx-time {
	font-size: 12px; color: #9aa4b0;
	font-variant-numeric: tabular-nums;
}
 
#ki-krc .kx-chat {
	flex: 1;
	display: flex; flex-direction: column; gap: 14px;
	padding: 22px 20px 36px;
}
 
/* user turn */
#ki-krc .kx-user {
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
#ki-krc .kx-user-head {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: #e6ebf0;
}
#ki-krc .kx-user-head svg { color: #e6ebf0; }
#ki-krc .kx-bubble {
	max-width: min(560px, 90%);
	padding: 9px 18px;
	border-radius: 20px;
	background: #2a2c30;
	font-size: 13.5px; line-height: 1.45;
	color: #e6ebf0;
}
 
/* assistant turn */
#ki-krc .kx-bot-head {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: #e6ebf0;
}
#ki-krc .kx-ai-icon {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(181,101,255,.1);
}
#ki-krc .kx-ai-icon::before {
	content: "";
	position: absolute; inset: 0;
	padding: 1.5px;
	border-radius: 50%;
	background: var(--kx-ai);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#ki-krc .kx-ai-icon span {
	font-size: 10px; font-weight: 700; line-height: 1;
	background: var(--kx-ai);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
 
#ki-krc .kx-reply { padding: 22px 8px 0 28px; }
 
#ki-krc .kx-answer-label {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #8a96a3;
	margin-bottom: 16px;
}
#ki-krc .kx-answer-label::before {
	content: ""; display: block;
	width: 22px; height: 1px; background: #5a6572;
}
#ki-krc .kx-answer {
	font-size: 16px; line-height: 1.75;
	color: var(--kx-text);
	max-width: 900px;
	margin-bottom: 18px;
}
#ki-krc .kx-answer strong { color: #fff; font-weight: 600; }
 
#ki-krc .kx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#ki-krc .kx-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
#ki-krc .kx-pill-red   { background: #3a1417; color: #ff6b6b; border-color: #4d1c20; }
#ki-krc .kx-pill-amber { background: #3a2a0a; color: #fbbf24; border-color: #4d380d; }
#ki-krc .kx-pill-green { background: #0c2e1a; color: #4ade80; border-color: #124127; }
#ki-krc .kx-pill-blue  { background: #0c2140; color: #60a5fa; border-color: #13305a; }
 
#ki-krc .kx-actions {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin-top: 18px; padding-top: 22px;
	border-top: 1px solid #2c3139;
}
#ki-krc .kx-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 14px; font-weight: 600; line-height: 1.4;
	transition: background .17s, color .17s, border-color .17s;
}
#ki-krc .kx-btn-icon { display: block; flex-shrink: 0; width: 15px; height: 15px; }
#ki-krc .kx-btn-answer { background: var(--kx-blue); border-color: var(--kx-blue); color: #fff; }
#ki-krc .kx-btn-answer:hover { background: var(--kx-blue-2); border-color: var(--kx-blue-2); color: #fff; }
#ki-krc .kx-btn-dash { background: transparent; border-color: #1d3a55; color: #7fb2dc; }
#ki-krc .kx-btn-dash:hover { background: transparent; border-color: var(--kx-blue-2); color: #b4d4ee; }
 
/* typing indicator */
#ki-krc .kx-typing {
	display: inline-flex; gap: 5px;
	margin: 18px 0 0 28px;
	padding: 10px 14px;
	border-radius: 14px;
	background: #16181c;
}
#ki-krc .kx-typing span {
	display: block; width: 6px; height: 6px;
	border-radius: 50%; background: #8a96a3;
	animation: kx-dot 1s ease-in-out infinite;
}
#ki-krc .kx-typing span:nth-child(2) { animation-delay: .15s; }
#ki-krc .kx-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes kx-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
 
@keyframes kx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#ki-krc .kx-enter { animation: kx-in .3s cubic-bezier(.16, 1, .3, 1) both; }
 
/* drawers */
#ki-krc .kx-drawer {
	margin-top: 20px;
	padding: 20px 22px;
	background: #0a0d12;
	border: 1px solid #1f242c;
	border-radius: 10px;
}
#ki-krc .kx-drawer-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #6f7c8a;
	margin-bottom: 14px;
}
#ki-krc .kx-full-text { font-size: 14px; line-height: 1.75; color: #9aa7b4; }
 
#ki-krc .kx-dash-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
#ki-krc .kx-dm {
	padding: 14px 16px;
	background: #10141a;
	border: 1px solid #1f242c;
	border-radius: 8px;
}
#ki-krc .kx-dm-label { font-size: 11px; font-weight: 500; color: #6f7c8a; margin-bottom: 6px; }
#ki-krc .kx-dm-val { font-size: 22px; font-weight: 700; line-height: 1; color: #fff; }
#ki-krc .kx-val-red   { color: #f87171; }
#ki-krc .kx-val-amber { color: #fbbf24; }
#ki-krc .kx-val-green { color: #4ade80; }
#ki-krc .kx-dm-chg { margin-top: 6px; font-size: 11px; font-weight: 600; color: #6f7c8a; }
#ki-krc .kx-chg-bad  { color: #f87171; }
#ki-krc .kx-chg-good { color: #4ade80; }
 
#ki-krc .kx-chart-title {
	font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: #6f7c8a;
	margin-bottom: 12px;
}
#ki-krc .kx-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
#ki-krc .kx-bar-lbl { min-width: 130px; font-size: 12px; color: #9aa7b4; }
#ki-krc .kx-bar-track { flex: 1; height: 6px; border-radius: 100px; background: #161b22; overflow: hidden; }
#ki-krc .kx-bar-fill {
	display: block; width: 0; height: 100%;
	border-radius: 100px;
	transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
#ki-krc .kx-fill-red   { background: #f87171; }
#ki-krc .kx-fill-amber { background: #fbbf24; }
#ki-krc .kx-fill-blue  { background: #60a5fa; }
#ki-krc .kx-fill-green { background: #4ade80; }
#ki-krc .kx-bar-pct { min-width: 36px; text-align: right; font-size: 12px; color: #9aa7b4; font-variant-numeric: tabular-nums; }
 
/* ── bottom CTA ─────────────────────────── */
#ki-krc .kx-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	margin-top: 36px;
	padding: 26px 28px;
	background: var(--kx-card);
	border: 1px solid #1a2a3f;
	border-radius: 14px;
}
#ki-krc .kx-bottom-text { font-size: 15px; line-height: 1.6; color: #5f7690; max-width: 780px; }
#ki-krc .kx-bottom-text b { color: #cfe0ee; font-weight: 600; }
#ki-krc .kx-cta {
	display: inline-flex; align-items: center; gap: 10px;
	flex-shrink: 0; white-space: nowrap;
	padding: 14px 24px;
	border-radius: 8px;
	background: var(--kx-blue);
	font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff;
	transition: background .17s;
}
#ki-krc .kx-cta:hover, #ki-krc .kx-cta:focus-visible { background: var(--kx-blue-2); color: #fff; }
 
/* ── responsive ─────────────────────────── */
@media (max-width: 1024px) {
	#ki-krc .kx-layout { grid-template-columns: 260px minmax(0, 1fr); }
	#ki-krc .kx-headline { font-size: 38px; }
	#ki-krc .kx-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	#ki-krc { padding: 60px 0 70px; }
	#ki-krc .kx-layout { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-sidebar { position: static; }
	#ki-krc .kx-panel { min-height: 0; }
	#ki-krc .kx-headline { font-size: 32px; }
	#ki-krc .kx-sub { margin-bottom: 36px; }
}
@media (max-width: 560px) {
	#ki-krc .kx-headline { font-size: 26px; }
	#ki-krc .kx-headline br { display: none; }
	#ki-krc .kx-chat { padding: 18px 14px 24px; }
	#ki-krc .kx-reply { padding: 18px 0 0; }
	#ki-krc .kx-typing { margin-left: 0; }
	#ki-krc .kx-answer { font-size: 15px; }
	#ki-krc .kx-dash-grid { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-bar-lbl { min-width: 96px; }
	#ki-krc .kx-actions { flex-direction: column; }
	#ki-krc .kx-btn { justify-content: center; }
	#ki-krc .kx-bottom { flex-direction: column; align-items: flex-start; padding: 20px; }
	#ki-krc .kx-cta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	#ki-krc *, #ki-krc *::before, #ki-krc *::after {
		transition: none !important;
		animation: none !important;
	}
}
/* ==========================================================================
   RESPONSIVE LAYER — paste at the VERY END of assets/css/homecss.css
   (it must come after every other rule so it wins on source order)

   Breakpoints
     ≤1340  side gutters (the 1300px container no longer touches the edge)
     ≤1199  tablet landscape / iPad Pro — hero + marketplace stack
     ≤1024  KRC section stacks
     ≤900   tablet portrait
     ≤767   large phones
     ≤599   hero dashboard hidden (its text would be unreadably small)
     ≤480   small phones
   ========================================================================== */

/* ── ≤1340: side gutters ─────────────────────────────────────────────── */
@media (max-width: 1340px) {
	.ki-wrap,
	.ki-hero-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
	#ki-krc .kx-wrap { padding: 0 24px; }
}


/* ── ≤1199: tablet landscape (iPad Pro 1024) ─────────────────────────── */
@media (max-width: 1199px) {

	/* HERO — stack, centre the copy, dashboard centred full-width below */
	.ki-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		padding-top: 64px;
		padding-bottom: 72px;
		text-align: center;
	}
	.ki-hero-inner > div:first-child {
		max-width: 720px;
		margin: 0 auto;
	}
	.ki-hero-badge { justify-content: center; }
	.ki-hero-sub {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
	.ki-hero-ctas {
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 28px;
	}
	.ki-hero-social-proof { justify-content: center; }

	.ki-hero-visual {
		display: block;
		width: 100%;
	}
	/* Dashboard size is set here (not by the fit script) so it always fills
	   the tablet width. !important beats the inline value the script sets. */
	#ki-dash { --kih-s: 1.25 !important; }          /* 945px wide */
	#ki-dash .kih-mock-wrap { margin: 0 auto !important; }

	/* CHANNELS — 5 per row instead of 10 */
	.ki-channel-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	/* MODULES — 2 per row */
	.ki-modules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* MARKETPLACE — stack; the 500px hub no longer overflows its column */
	.ki-marketplace-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
	.ki-hub-visual { overflow: hidden; }
}


/* ── stacked-hero dashboard sizes (each fits inside 100vw − 48px) ───── */
@media (max-width: 999px) { #ki-dash { --kih-s: 1.05 !important; } }  /* 794px */
@media (max-width: 859px) { #ki-dash { --kih-s: 0.95 !important; } }  /* 718px */
@media (max-width: 767px) { #ki-dash { --kih-s: 0.72 !important; } }  /* 544px */


/* ── ≤1024: KRC section stacks ───────────────────────────────────────── */
@media (max-width: 1024px) {
	#ki-krc { padding: 72px 0 80px; }
	#ki-krc .kx-layout { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-sidebar { position: static; }
	#ki-krc .kx-panel { min-height: 0; }
	#ki-krc .kx-headline {
		font-size: 36px;
		line-height: 1.2;
		letter-spacing: -.02em;
	}
	#ki-krc .kx-sub { max-width: 640px; }

	/* questions sit side by side on tablets instead of a long single list */
	#ki-krc .kx-qlist {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		padding-bottom: 0;
	}
}


/* ── ≤900: tablet portrait ───────────────────────────────────────────── */
@media (max-width: 900px) {

	.ki-story-grid,
	.ki-ai-cards { grid-template-columns: minmax(0, 1fr); }

	.ki-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* stats — 2 × 2 with clean dividers */
	.ki-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.ki-stat:nth-child(2n) { border-right: none; }

	.ki-ai-stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ki-ai-stat-item:nth-child(2n) { border-right: none; }
	.ki-ai-stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(139, 92, 246, 0.1); }

	.ki-hero h1 { font-size: 40px; }
}


/* ── ≤767: large phones ──────────────────────────────────────────────── */
@media (max-width: 767px) {

	.ki-platform-story,
	.ki-channels,
	.ki-modules,
	.ki-ai,
	.ki-industries,
	.ki-marketplace { padding-top: 56px !important; padding-bottom: 56px !important; }

	.ki-hero h1 { font-size: 34px; letter-spacing: -.5px; }
	.ki-hero-sub { font-size: 15.5px; }

	.ki-section-title,
	.ki-ai-title { font-size: 26px; }
	.ki-section-sub,
	.ki-ai-sub { font-size: 15.5px; }

	.konnect-ai-home { font-size: 30px; }
	.ki-ai-card-name-1,
	.ki-ai-card-name-2,
	.ki-ai-card-name-3 { font-size: 32px; }
	.ki-ai-card { padding: 28px 22px; }

	.ki-modules-grid { grid-template-columns: minmax(0, 1fr); }
	.ki-channel-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ki-channel-grid-wrap { padding: 20px 16px; }
	.ki-browser-url { font-size: 11px; }

	.ki-stat-num { font-size: 32px; }

	/* KRC */
	#ki-krc { padding: 56px 0 64px; }
	#ki-krc .kx-headline { font-size: 28px; }
	#ki-krc .kx-headline br { display: none; }
	#ki-krc .kx-sub { font-size: 15.5px; line-height: 1.6; }
	#ki-krc .kx-qlist { display: block; padding-bottom: 8px; }
	#ki-krc .kx-bubble { max-width: 100%; }
}


/* ── ≤599: hide the hero dashboard ───────────────────────────────────── */
@media (max-width: 599px) {
	.ki-hero-visual { display: none; }
	.ki-hero-inner {
		padding-top: 40px;
		padding-bottom: 48px;
		text-align: left;
	}
	.ki-hero-badge,
	.ki-hero-ctas,
	.ki-hero-social-proof { justify-content: flex-start; }
	.ki-hero-sub { margin-left: 0; margin-right: 0; }
}


/* ── ≤480: small phones ──────────────────────────────────────────────── */
@media (max-width: 480px) {

	.ki-wrap,
	.ki-hero-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	#ki-krc .kx-wrap { padding: 0 16px; }

	.ki-hero h1 { font-size: 30px; }
	.ki-hero-ctas { gap: 10px; }

	.ki-stats-grid { padding: 0 12px; }
	.ki-stat { padding: 8px 10px; }
	.ki-stat-num { font-size: 28px; }

	.ki-channel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.ki-industry-grid { gap: 10px; }
	.ki-industry-card { padding: 16px 12px; }

	.ki-story-card,
	.ki-module-card { padding: 20px; }

	.ki-ai-stat-val { font-size: 24px; }

	/* KRC */
	#ki-krc .kx-headline { font-size: 24px; }
	#ki-krc .kx-side-head { padding: 18px 16px 16px; }
	#ki-krc .kx-qitem { padding: 12px 16px; }
	#ki-krc .kx-topbar { padding: 12px 14px; }
	#ki-krc .kx-logo span { font-size: 18px; }
}

/* the 360px integrations hub is wider than very small screens — scale it */
@media (max-width: 400px) {
	.ki-hub-visual { min-height: 320px; }
	.market-logo { transform: scale(.88); }
}
@media (max-width: 340px) {
	.market-logo { transform: scale(.78); }
}
/* ==========================================================================
   INTEGRATIONS HUB — three glass rings + orbiting tiles
   All sizes are ratios of --s (outer disc diameter), measured from the design.
   ========================================================================== */

.ki-hub-visual {
	container-type: inline-size;
	min-height: 0 !important;
	overflow: visible !important;
}

.ki-int {
	--s: 600px;                          /* fallback without cqw support */
	--s: min(600px, 88cqw);
	--r: calc(var(--s) * 0.405);         /* orbit radius */
	--tile: calc(var(--s) * 0.144);      /* tile size    */
	--glow: 58, 134, 255;

	position: relative;
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) * 0.03) auto calc(var(--s) * 0.08);
}

/* ---- rings ---- */
.ki-int-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ki-int-ring--outer {
    width: 100%;
    height: 100%;
    z-index: 0;
    /* background: radial-gradient(circle closest-side,
		rgba(255, 255, 255, 0.95) 0 90%,
		rgba(244, 248, 255, 0.9) 100%); */
    /* box-shadow: 0 0 calc(var(--s) * 0.07) rgba(var(--glow), 0.16),
		inset 0 0 calc(var(--s) * 0.035) rgba(var(--glow), 0.08); */
    border-radius: 509.804px;
    background: #FFF;
    box-shadow: 0 0 43.569px 7.86px rgba(0, 128, 255, 0.10);
}

.ki-int-ring--middle {
    width: 71.4%;
    height: 71.4%;
    z-index: 1;
    /* background: rgba(255, 255, 255, 0.9); */
    /* box-shadow: 0 0 calc(var(--s) * 0.04) rgba(var(--glow), 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 calc(var(--s) * 0.02) rgba(var(--glow), 0.05); */
    border-radius: 397.512px;
    background: #FFF;
    box-shadow: 0 0 32.452px 11.229px rgba(0, 102, 255, 0.10);
}

.ki-int-ring--inner {
    width: 38.7%;
    height: 38.7%;
    z-index: 2;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.95) 100%);
    box-shadow: 0 0 calc(var(--s) * 0.045) rgba(var(--glow), 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 0 calc(var(--s) * 0.018) rgba(var(--glow), 0.08);
    fill: #FFF;
    filter: drop-shadow(0 0 17.601px rgba(0, 102, 255, 0.13));
}

/* ---- core logo ---- */
.ki-int-core {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 18.4%;
	height: 18.4%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #1670B3 0%, #0A5A94 70%);
	box-shadow:
		inset 0 0 0 calc(var(--s) * 0.004) rgba(255, 255, 255, 0.28),
		0 0 0 calc(var(--s) * 0.006) rgba(var(--glow), 0.10),
		0 8px 22px rgba(10, 90, 148, 0.30);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ki-int-core img {
	display: block;
	width: 78%;
	height: auto;
	object-fit: contain;
}

/* ---- orbit nodes (tile centre sits on the orbit) ---- */
.ki-int-node {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	width: var(--tile);
	height: var(--tile);
	transform:
		translate(-50%, -50%)
		rotate(var(--a))
		translateY(calc(-1 * var(--r)))
		rotate(calc(-1 * var(--a)));
}

.ki-int-tile {
    width: 100%;
    height: 100%;
    /* border-radius: calc(var(--tile) * 0.13); */
    /* background: #F7F7F8; */
    /* box-shadow: 0 calc(var(--tile) * 0.06) calc(var(--tile) * 0.14) rgba(15, 23, 42, 0.14),
		0 1px 2px rgba(15, 23, 42, 0.06); */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--tile) * 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12.352px;
    background: #F9F9F9;
    box-shadow: 0 4.492px 5.278px 0 rgba(0, 0, 0, 0.15);
}

.ki-int-tile img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ki-int-node:hover .ki-int-tile {
	transform: translateY(-3px);
	box-shadow:
		0 calc(var(--tile) * 0.1) calc(var(--tile) * 0.2) rgba(10, 90, 148, 0.18),
		0 1px 2px rgba(15, 23, 42, 0.06);
}

.ki-int-label {
	position: absolute;
	top: calc(100% + var(--s) * 0.018);
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: clamp(11px, calc(var(--s) * 0.023), 17px);
	font-weight: 400;
	line-height: 1.3;
	color: #5F6673;
	white-space: nowrap;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ki-int-tile { transition: none; }
	.ki-int-node:hover .ki-int-tile { transform: none; }
}
/* ==========================================================================
   HOW WE GROW WITH YOU — stage journey section (scoped to #ki-grow)
   ========================================================================== */

#ki-grow {
	--gw-bg:    #0A0E17;
	--gw-line:  rgba(255, 255, 255, 0.08);
	--gw-text:  #FFFFFF;
	--gw-muted: rgba(255, 255, 255, 0.72);
	--gw-dim:   rgba(255, 255, 255, 0.55);
	--gw-ai:    linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%);

	display: block;
	position: relative;
	background: var(--gw-bg);
	color: var(--gw-text);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	padding: 96px 0 100px;
}

/* local reset — keeps theme h2/h3/p/ul styles out */
#ki-grow, #ki-grow *, #ki-grow *::before, #ki-grow *::after { box-sizing: border-box; }
#ki-grow :where(h2, h3, p, ul, li, span, strong) { margin: 0; padding: 0; }
#ki-grow :where(h2, h3, p) { font-family: inherit; text-transform: none; color: inherit; }
#ki-grow :where(ul) { list-style: none; }
#ki-grow :where(li)::before { content: none; }

#ki-grow .gw-wrap { max-width: 1300px; margin: 0 auto; }

/* ── header ─────────────────────────────── */
#ki-grow .gw-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: end;
	gap: 40px;
	padding-bottom: 34px;
	margin-bottom: 40px;
border-bottom: 1px solid rgba(199, 221, 255, 0.25);}
#ki-grow .gw-eyebrow {
color: #FFF;
    font-family: Poppins;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
#ki-grow .gw-title {
    color: #FFF;
    font-family: Poppins;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 43.2px;
}
#ki-grow .gw-intro {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25.6px;
}

/* ── stage cards ────────────────────────── */
#ki-grow .gw-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

#ki-grow .gw-card {
	--c-bg:     #181C26;
	--c-border: rgba(255, 255, 255, 0.10);
	--c-accent: #FFFFFF;
	--c-body:   rgba(255, 255, 255, 0.85);
	--c-foot:   rgba(255, 255, 255, 0.72);
	--c-badge-bg:     transparent;
	--c-badge-border: rgba(255, 255, 255, 0.35);
	--c-badge-text:   rgba(255, 255, 255, 0.9);

	display: flex;
	flex-direction: column;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border-radius: 24px;
border: 0.5px solid rgba(229, 229, 229, 0.25);
}
#ki-grow .gw-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

#ki-grow .gw-card--scale {
	--c-bg:     #0B1F33;
	--c-border: #1D4568;
	--c-accent: #FFFFFF;
	--c-body:   #3F8FD2;
	--c-foot:   #3A7FB8;
	--c-badge-border: #2C6A9E;
	--c-badge-text:   #9CC6EA;
}

#ki-grow .gw-card--best {
	--c-bg:     #3A3213;
	--c-border: #7C6522;
	--c-accent: #FFC21A;
	--c-body:   #F5B800;
	--c-foot:   #F5B800;
	--c-badge-bg:     rgba(255, 194, 26, 0.18);
	--c-badge-border: #A8841E;
	--c-badge-text:   #FFC21A;
}

#ki-grow .gw-card-body {
	flex: 1 1 auto;
	padding: 30px 28px 26px;
}

#ki-grow .gw-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
}
#ki-grow .gw-card-label {
    color: #FFF;
    font-family: Poppins;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.88px;
    text-transform: uppercase;
}
#ki-grow .gw-card--scale .gw-card-label { color: #FFFFFF; }

#ki-grow .gw-badge {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--c-badge-bg);
	border: 1px solid var(--c-badge-border);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-badge-text);
	white-space: nowrap;
}

#ki-grow .gw-card-title {
    margin-bottom: 24px;
    color: #FFF;
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.44px;
}

#ki-grow .gw-card-desc {
color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

#ki-grow .gw-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
#ki-grow .gw-list li {
display: flex;
    align-items: center;
    gap: 6px;
    /* font-size: 15px; */
    /* line-height: 1.45; */
    /* color: var(--c-body); */
    /* color: #FFF; */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.6px;
}
#ki-grow .gw-card--foundation .gw-list li { color: #FFFFFF; }

#ki-grow .gw-check {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.9;
}

#ki-grow .gw-card-foot {
    padding: 16px 28px 18px;
    border-top: 1px solid var(--c-border);
    /* font-size: 13.5px; */
    /* line-height: 1.5; */
    /* color: var(--c-foot); */
    color: #FFF;
    font-family: Poppins;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#ki-grow .gw-card-foot strong {
	font-weight: 600;
	color: var(--c-accent);
}

/* ── progress row ───────────────────────── */
#ki-grow .gw-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	margin: 60px 0 80px;
	padding: 0 30px;
}
#ki-grow .gw-progress p {
    /* font-size: 15px; */
    /* line-height: 1.5; */
    /* color: rgba(255, 255, 255, 0.85); */
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
#ki-grow .gw-progress strong { font-weight: 600; color: #FFFFFF; }
#ki-grow .gw-progress-r { text-align: right; }

#ki-grow .gw-arrow {
	position: relative;
	display: block;
	height: 1.5px;
	background: linear-gradient(90deg, #1E6CB0 0%, #6E8A7A 55%, #FFC21A 100%);
}
#ki-grow .gw-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid #FFC21A;
	border-right: 1.5px solid #FFC21A;
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}

/* ── modules ────────────────────────────── */
#ki-grow .gw-modules-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 16px;
}
#ki-grow .gw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#ki-grow .gw-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 6px;
	background: #1A1D24;
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
}

/* AI chips — KI-AI gradient border, tint and text */
#ki-grow .gw-chip--ai {
	position: relative;
	border-color: transparent;
	background: linear-gradient(96deg,
		rgba(58, 134, 255, 0.22) -11%,
		rgba(181, 101, 255, 0.22) 42%,
		rgba(255, 143, 171, 0.22) 79%);
}
#ki-grow .gw-chip--ai::before {
	content: "";
	position: absolute;
	inset: -1px;
	padding: 1px;
	border-radius: inherit;
	background: var(--gw-ai);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
#ki-grow .gw-chip--ai span {
	font-weight: 600;
	background: var(--gw-ai);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── responsive ─────────────────────────── */
@media (max-width: 1340px) {
	#ki-grow .gw-wrap { padding: 0 24px; }
}

@media (max-width: 1024px) {
	#ki-grow { padding: 72px 0 80px; }
	#ki-grow .gw-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 18px;
	}
	#ki-grow .gw-title { font-size: 34px; }
	#ki-grow .gw-intro { max-width: 640px; }
	#ki-grow .gw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	#ki-grow .gw-card--best { grid-column: 1 / -1; }
	#ki-grow .gw-progress {
		grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
		gap: 20px;
		padding: 0;
		margin: 48px 0 60px;
	}
}

@media (max-width: 767px) {
	#ki-grow { padding: 56px 0 64px; }
	#ki-grow .gw-title { font-size: 28px; letter-spacing: -0.5px; }
	#ki-grow .gw-intro { font-size: 15px; }
	#ki-grow .gw-cards { grid-template-columns: minmax(0, 1fr); }
	#ki-grow .gw-card:hover { transform: none; box-shadow: none; }
	#ki-grow .gw-card-body { padding: 24px 22px 22px; }
	#ki-grow .gw-card-foot { padding: 14px 22px 16px; }
	#ki-grow .gw-card-title { font-size: 22px; margin-bottom: 16px; }
	#ki-grow .gw-card-desc { max-width: none; }

	/* progress row stacks with a vertical arrow */
	#ki-grow .gw-progress {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 14px;
		margin: 40px 0 48px;
	}
	#ki-grow .gw-progress-r { text-align: left; }
	#ki-grow .gw-arrow {
		width: 1.5px;
		height: 40px;
		margin-left: 8px;
		background: linear-gradient(180deg, #1E6CB0 0%, #6E8A7A 55%, #FFC21A 100%);
	}
	#ki-grow .gw-arrow::after {
		top: auto;
		bottom: 0;
		right: 50%;
		transform: translateX(50%) rotate(135deg);
	}
}

@media (max-width: 480px) {
	#ki-grow .gw-wrap { padding: 0 16px; }
	#ki-grow .gw-title { font-size: 24px; }
	#ki-grow .gw-title br { display: none; }
	#ki-grow .gw-card-top { margin-bottom: 18px; }
	#ki-grow .gw-chip { font-size: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	#ki-grow .gw-card { transition: none; }
	#ki-grow .gw-card:hover { transform: none; }
}