/* Light variants of the indigo palette, on top of blue-preview.css. Two parts:
   body.light-cards: service cards, testimonials, team and rating cards are
     light with an indigo outline instead of near-black (stage and the
     healthcare landing);
   body.blue-light: the homepage hero and inner page heads are light too,
     instead of near-black with waves; with body.light-waves the waves stay,
     indigo on light. The hero can get a visual
     on the right (.hero-visual.hv-product); the photo variant fills the whole
     hero instead, the clean one has neither.
   The footer stays dark in both. Classes come from mu-plugins
   (innova-design-preview.php on the stage, innova-healthcare.php). */

body.blue-light, body.light-cards {
	--band-light: linear-gradient(180deg, #f7f8ff 0%, #eef0ff 100%);
	--text-gradient-light: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}

/* ---------- Header over a light band ---------- */
body.blue-light .site-header { color: var(--text); }
body.blue-light .site-header .brand-light { display: none; }
body.blue-light .site-header .brand-dark { display: block; }
body.blue-light .main-nav a:hover { color: var(--orange); background: #e0e4ff; }
body.blue-light .nav-list :is(.current-menu-item, .current_page_item, .current-menu-parent) > a { box-shadow: inset 0 -2px 0 var(--orange); }

/* ---------- Light bands: homepage hero and page heads ---------- */
body.blue-light :is(.hero, .page-head) { background: var(--band-light); color: var(--text); }
body.blue-light :is(.hero, .page-head)::before {
	background:
		radial-gradient(640px 420px at 92% 0%, rgba(99, 102, 241, 0.20), transparent 65%),
		radial-gradient(520px 360px at 55% 105%, rgba(167, 139, 250, 0.22), transparent 65%),
		radial-gradient(420px 300px at 0% 30%, rgba(129, 140, 248, 0.10), transparent 70%);
}
body.blue-light :is(.hero, .page-head)::after {
	background:
		radial-gradient(520px circle at var(--fx-x, 78%) var(--fx-y, 22%), rgba(129, 140, 248, 0.16), transparent 65%),
		radial-gradient(rgba(79, 70, 229, 0.12) 1px, transparent 1.5px) 0 0 / 24px 24px;
}
body.blue-light :is(.hero, .page-head) .eyebrow { color: var(--orange); }
body.blue-light :is(.hero, .page-head) .accent,
body.blue-light .hero .stat dd,
body.blue-light .error-code {
	background: var(--text-gradient-light); -webkit-background-clip: text; background-clip: text;
	color: transparent; filter: none;
}
body.blue-light :is(.hero-lead, .page-head-lead) { color: var(--text-muted); }

body.blue-light .hero .btn-ghost { border-color: #c7cdfe; color: var(--text); background: rgba(255, 255, 255, 0.6); }
body.blue-light .hero .btn-ghost:hover { border-color: var(--indigo-500); background: #fff; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15); }
body.blue-light .hero-partners li { background: #fff; border-color: var(--line); box-shadow: 0 2px 8px rgba(49, 46, 129, 0.06); }
body.blue-light .hero-partners img { background: #f4f5ff; }
body.blue-light .stats { border-top-color: #d9dcfb; }
body.blue-light .stat + .stat { border-left-color: #d9dcfb; }
body.blue-light .hero .stat dt { color: var(--text-muted); }

/* Glass edges catch an indigo rim on light */
body.blue-light .glass-edge::before { background: radial-gradient(140px circle at var(--gx, -999px) var(--gy, -999px), rgba(99, 102, 241, 0.7), rgba(165, 176, 252, 0.25) 45%, transparent 70%); }
body.blue-light .glass-edge::after { background: radial-gradient(160px circle at var(--gx, -999px) var(--gy, -999px), rgba(99, 102, 241, 0.06), transparent 70%); }

/* body.light-waves: the same light bands with the indigo waves on them (the
   homepage hero gets the moving ones). They fade out under the text on the left. */
body.blue-light.light-waves :is(.hero, .page-head)::before {
	background:
		linear-gradient(90deg, #f7f8ff 0%, rgba(247, 248, 255, 0.9) 30%, rgba(247, 248, 255, 0.35) 62%, rgba(247, 248, 255, 0) 100%),
		linear-gradient(0deg, rgba(238, 240, 255, 0.95) 0%, rgba(238, 240, 255, 0) 35%),
		url("../img/bg-waves.svg") center / cover no-repeat;
}
body.blue-light.light-waves .hero::before {
	background:
		linear-gradient(90deg, #f7f8ff 0%, rgba(247, 248, 255, 0.9) 30%, rgba(247, 248, 255, 0.35) 62%, rgba(247, 248, 255, 0) 100%),
		linear-gradient(0deg, rgba(238, 240, 255, 0.95) 0%, rgba(238, 240, 255, 0) 35%),
		var(--hero-waves) center / cover no-repeat;
}
body.blue-light.light-waves :is(.hero, .page-head)::after { background: none; }
body.blue-light.light-waves :is(.hero, .page-head) { animation: none; }

/* Page head details */
body.blue-light .breadcrumbs ol { color: var(--text-muted); }
body.blue-light .breadcrumbs [aria-current] { color: var(--text); }
body.blue-light .breadcrumbs a:hover { color: var(--orange); }
body.blue-light .page-head .tag-list-dark .tag { background: #e0e4ff; color: var(--orange-strong); }
body.blue-light .page-head .news-meta-dark { color: var(--text-muted); }

/* ---------- Cards on light: white with an indigo outline, no gradients ---------- */
body.light-cards .service-card,
body.light-cards .service-card.is-featured { /* beats blue-preview's dark featured card */
	background: #fff; border-color: #c7cdfe; color: var(--text); box-shadow: none;
}
body.light-cards .service-card:not(.is-featured):hover { box-shadow: none; }
body.light-cards .is-featured .service-lead { color: var(--text-muted); }
body.light-cards .is-featured .checklist .icon { background: #e0e4ff; color: var(--orange); }

/* ---------- Testimonials and other dark sections: light ---------- */
body.light-cards .section-ink {
	background:
		radial-gradient(640px 320px at 12% 0%, rgba(99, 102, 241, 0.12), transparent 65%),
		linear-gradient(180deg, #f4f5ff 0%, #eef0ff 100%);
	color: var(--text);
}
body.light-cards .section-ink .eyebrow { color: var(--orange); }
body.light-cards .section-ink .accent { background: var(--text-gradient-light); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
body.light-cards :is(.review-card, .team-card) { background: #fff; border-color: #c7cdfe; color: var(--text); }
body.light-cards .review-card blockquote { color: var(--text); }
body.light-cards .review-card > .icon { color: var(--orange); filter: none; }
body.light-cards .review-author { border-top-color: var(--line); }
body.light-cards :is(.review-role, .team-card p:last-child) { color: var(--text-muted); }
body.light-cards .team-role { color: var(--orange); }
body.light-cards .review-company { border: 1px solid var(--line); }
body.light-cards .slider-btn { border-color: #c7cdfe; color: var(--text); background: #fff; }
body.light-cards .slider-btn:hover { background: var(--indigo-500); border-color: var(--indigo-500); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3); }
body.light-cards .section-ink .checklist .icon { background: #e0e4ff; color: var(--orange); }

/* Clutch / rating badges */
body.light-cards .rating-card { background: #fff; border: 1px solid #c7cdfe; color: var(--text); }
body.light-cards .rating-card img { border: 1px solid var(--line); }
body.light-cards .rating-head { color: var(--orange); }
body.light-cards .rating-caption { color: var(--text-muted); }

/* ======================= Hero visual ======================= */
@media (min-width: 1081px) {
	body.blue-light .hero-inner:has(.hero-visual) {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		column-gap: clamp(32px, 4vw, 64px); align-items: center;
	}
	body.blue-light .hero-inner:has(.hero-visual) .hero-copy,
	body.blue-light .hero-inner:has(.hero-visual) .hero-partners { grid-column: 1; }
	body.blue-light .hero-visual { grid-column: 2; grid-row: 1 / span 2; }
	body.blue-light .hero-inner:has(.hero-visual) h1 { font-size: clamp(40px, 4.4vw, 60px); }
	/* the three partner badges fit one row next to the picture */
	body.blue-light .hero-inner:has(.hero-visual) .hero-partners { gap: 8px; }
	body.blue-light .hero-inner:has(.hero-visual) .hero-partners li { gap: 8px; padding: 6px 12px 6px 6px; font-size: 13px; }
	body.blue-light .hero-inner:has(.hero-visual) .hero-partners img { width: 24px; height: 24px; }
}
@media (max-width: 1080px) {
	/* below the partner badges, so the headline and buttons stay on top */
	body.blue-light .hero-visual { order: 1; width: 100%; max-width: 560px; }
}
.hero-visual { position: relative; }
.hero-visual * { box-sizing: border-box; }

/* Variant C (body.hero-clean): no picture and no glows at all, only an even
   light gradient and the dot grid (soft glows read as out of focus) */
body.blue-light.hero-clean .hero { animation: none; }
body.blue-light.hero-clean .hero::before { background: linear-gradient(120deg, rgba(255, 255, 255, 0.6) 0%, rgba(224, 228, 255, 0.5) 100%); }
body.blue-light.hero-clean .hero::after { background: radial-gradient(rgba(79, 70, 229, 0.12) 1px, transparent 1.5px) 0 0 / 24px 24px; }

/* Variant A: a live AI assistant window that plays real case scenarios */
.hv-product { padding: 28px 28px 36px 0; }
.hv-window {
	position: relative; z-index: 1;
	border: 1px solid #dfe2fd; border-radius: 20px; background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 6px rgba(49, 46, 129, 0.06), 0 30px 60px -20px rgba(49, 46, 129, 0.28);
	overflow: hidden; backdrop-filter: blur(6px);
}
.hv-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eceefe; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hv-dots { display: flex; gap: 6px; }
.hv-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e0e4ff; }
.hv-dots i:first-child { background: #a5b0fc; }
.hv-title { flex: 1; }
.hv-live { display: inline-flex; align-items: center; gap: 6px; color: #16a34a; font-size: 12px; }
.hv-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: hv-pulse 1.6s ease-in-out infinite; }
.hv-tabs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; }
.hv-tab { padding: 5px 10px; border-radius: 999px; background: #f4f5ff; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.hv-tab.is-on { background: var(--indigo-gradient); color: #fff; }
.hv-chat { display: flex; flex-direction: column; gap: 10px; height: 222px; padding: 16px; overflow: hidden; transition: opacity .4s; }
.hv-chat.is-leaving { opacity: 0; }
.hv-msg { max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.hv-msg.is-in { opacity: 1; transform: none; }
.hv-user { align-self: flex-end; background: var(--indigo-gradient); color: #fff; border-bottom-right-radius: 4px; }
.hv-ai { align-self: flex-start; background: #f4f5ff; color: var(--text); border: 1px solid #e6e8fe; border-bottom-left-radius: 4px; }
.hv-ai ul { margin: 6px 0 0; padding-left: 18px; }
.hv-ai li { list-style: disc; }
.hv-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.hv-typing i { width: 6px; height: 6px; border-radius: 50%; background: #a5b0fc; animation: hv-bounce 1s infinite; }
.hv-typing i:nth-child(2) { animation-delay: .15s; }
.hv-typing i:nth-child(3) { animation-delay: .3s; }
.hv-input { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 10px 12px 10px 16px; border: 1px solid #e6e8fe; border-radius: 12px; color: #9aa0b8; font-size: 14px; }
.hv-input span { flex: 1; }
.hv-input b { width: 30px; height: 30px; border-radius: 9px; background: var(--indigo-gradient); }
.hv-chip {
	position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px; border: 1px solid #e0e4ff; border-radius: 14px; background: #fff;
	box-shadow: 0 12px 30px -10px rgba(49, 46, 129, 0.3);
	font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
	animation: hv-float 6s ease-in-out infinite;
}
.hv-chip em { font-style: normal; color: var(--orange); }
.hv-chip-1 { right: 0; top: 0; }
.hv-chip-2 { left: -28px; bottom: 6px; animation-delay: -3s; }
.hv-glow { position: absolute; inset: 10% 5% 0 10%; z-index: 0; border-radius: 40%; background: radial-gradient(closest-side, rgba(99, 102, 241, 0.35), transparent); filter: blur(30px); }

/* Variant B (body.hero-photo): the admin hero photo fills the whole hero, as in
   the old orange design, under a light haze that keeps the text readable */
body.blue-light.hero-photo .hero-bg { display: block; opacity: 1; object-position: 70% center; }
body.blue-light.hero-photo .hero::before {
	background:
		linear-gradient(90deg, #f7f8ff 0%, rgba(247, 248, 255, 0.95) 34%, rgba(247, 248, 255, 0.6) 58%, rgba(247, 248, 255, 0.08) 100%),
		linear-gradient(0deg, rgba(238, 240, 255, 0.97) 0%, rgba(238, 240, 255, 0.8) 18%, rgba(238, 240, 255, 0) 42%),
		linear-gradient(rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.10));
}
body.blue-light.hero-photo .hero::after { opacity: .5; }
@media (max-width: 760px) {
	/* on phones the text runs across the whole photo */
	body.blue-light.hero-photo .hero::before {
		background:
			linear-gradient(rgba(247, 248, 255, 0.86), rgba(238, 240, 255, 0.94)),
			linear-gradient(rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.10));
	}
}

@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hv-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.hv-chip, .hv-live::before, .hv-typing i { animation: none; }
}
@media (max-width: 560px) {
	.hv-product { padding-right: 0; }
	.hv-chip-2 { left: 0; }
	.hv-chat { height: 240px; }
}


/* Contacts only: dissolve the waves into the contact section's own background. */
body.blue-light.light-waves.page-id-19 .page-head {
	background: linear-gradient(180deg, #f7f8ff 0%, var(--mist) 100%);
}
body.blue-light.light-waves.page-id-19 .page-head::before {
	-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}