/* Stage only: the whole site in an indigo accent palette (body.blue-preview,
   added by mu-plugins/innova-design-preview.php; production runs the orange
   palette from main.css). Same layout and content. Dark surfaces stay near-black
   and neutral, like the orange design, so the logo and text keep their
   contrast; indigo is used only for accents, with a neon glow on dark.
   Light sections get a faint indigo tint. Scoped to body.blue-preview.

   Indigo scale used below:
   50 #eef0ff  100 #e0e4ff  200 #c7cdfe  300 #a5b0fc  400 #818cf8
   500 #6366f1  600 #4f46e5  700 #4338ca */

body.blue-preview {
	--orange: #4f46e5;                 /* primary accent (indigo-600) */
	--orange-strong: #4338ca;          /* accent text on light, hover (700) */
	--indigo-300: #a5b0fc;
	--indigo-400: #818cf8;
	--indigo-500: #6366f1;
	--indigo-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
	--indigo-text-gradient: linear-gradient(90deg, #a5b0fc 0%, #c4b5fd 100%);
	--neon: 0 0 0 1px rgba(129, 140, 248, 0.45), 0 0 24px rgba(99, 102, 241, 0.55), 0 0 64px rgba(99, 102, 241, 0.25);
	--ink: #0d0d14;                    /* near-black, as in the orange design */
	--ink-2: #17171f;                  /* raised dark surface */
	--paper: #ffffff;
	--mist: #f4f5ff;                   /* light sections, faint indigo tint */
	--text: #16161f;
	--text-muted: #5a5d72;
	--text-on-dark: #f4f5f8;
	--text-on-dark-muted: #a9aebb;     /* neutral grey, as in the orange design */
	--line: #e3e5fb;
	--line-dark: rgba(255, 255, 255, 0.12);
	--shadow: 0 1px 2px rgba(49, 46, 129, 0.06), 0 12px 32px rgba(49, 46, 129, 0.10);
}
body.blue-preview ::selection { background: #c7cdfe; color: var(--text); }

/* ---------- Buttons: indigo with a neon glow ---------- */
body.blue-preview .btn-primary {
	background: var(--indigo-gradient); color: #fff;
	box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.5), 0 8px 28px rgba(99, 102, 241, 0.5);
	transition: box-shadow .2s, filter .2s;
}
body.blue-preview .btn-primary:hover { color: #fff; filter: brightness(1.1); box-shadow: var(--neon); }
body.blue-preview .btn-ghost { border-color: rgba(255, 255, 255, 0.4); color: var(--text-on-dark); }
body.blue-preview .btn-ghost:hover { border-color: var(--indigo-400); background: rgba(129, 140, 248, 0.1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
body.blue-preview .link-arrow { color: var(--orange); }
body.blue-preview .link-arrow:hover { color: var(--orange-strong); }

/* ---------- Header ---------- */
body.blue-preview .main-nav a:hover { color: var(--indigo-300); }
body.blue-preview .site-header.is-solid {
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(49, 46, 129, 0.06);
}
body.blue-preview .site-header.is-solid .main-nav a:hover { color: var(--orange); background: #eef0ff; }

/* ---------- Hero: near-black with indigo waves and neon glows ---------- */
/* Background photos are off in the blue palette: every dark band (homepage
   hero and page heads) shows the waves instead. */
body.blue-preview :is(.hero-bg, .page-head-bg) { display: none; }
body.blue-preview .hero { background: var(--ink); }
body.blue-preview .hero::before {
	background:
		radial-gradient(620px 380px at 90% 6%, rgba(99, 102, 241, 0.42), transparent 62%),
		radial-gradient(480px 320px at 62% 108%, rgba(139, 92, 246, 0.28), transparent 65%),
		/* waves show on the right and fade out under the text on the left */
		linear-gradient(90deg, #0d0d14 0%, rgba(13, 13, 20, 0.93) 32%, rgba(13, 13, 20, 0.45) 65%, rgba(13, 13, 20, 0.12) 100%),
		linear-gradient(0deg, rgba(13, 13, 20, 0.9) 0%, rgba(13, 13, 20, 0) 40%),
		var(--hero-waves) center / cover no-repeat;
}
/* The homepage hero is the only place where the waves move (the animation
   lives inside the SVG); page heads use the static bg-waves.svg. */
body.blue-preview { --hero-waves: url("../img/bg-waves-animated.svg"); }
@media (prefers-reduced-motion: reduce) {
	body.blue-preview { --hero-waves: url("../img/bg-waves.svg"); }
}
body.blue-preview .hero::after {
	background:
		radial-gradient(520px circle at var(--fx-x, 78%) var(--fx-y, 22%), rgba(129, 140, 248, 0.2), transparent 65%),
		radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 24px 24px;
}

/* Glass edges: buttons and partner badges catch a soft highlight on the side
   nearest the pointer, like light on the rim of glass. --gx/--gy are the
   pointer position inside each element, set by blue-preview.js (mouse only). */
body.blue-preview .glass-edge { position: relative; }
body.blue-preview .glass-edge::before {
	content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none;
	padding: 1.5px;
	background: radial-gradient(140px circle at var(--gx, -999px) var(--gy, -999px), rgba(214, 219, 255, 0.85), rgba(165, 176, 252, 0.25) 45%, transparent 70%);
	-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);
	opacity: 0; transition: opacity .3s;
}
body.blue-preview .glass-edge::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(160px circle at var(--gx, -999px) var(--gy, -999px), rgba(255, 255, 255, 0.07), transparent 70%);
	opacity: 0; transition: opacity .3s;
}
body.blue-preview .glass-lit .glass-edge::before,
body.blue-preview .glass-lit .glass-edge::after { opacity: 1; }
body.blue-preview .glass-edge > * { position: relative; z-index: 1; }
body.blue-preview .hero .eyebrow { color: var(--indigo-400); }
body.blue-preview .hero-partners li { background: rgba(255, 255, 255, 0.06); border-color: var(--line-dark); }
body.blue-preview .stats { border-top-color: var(--line-dark); }
body.blue-preview .stat + .stat { border-left-color: var(--line-dark); }

/* Neon gradient text for accents and key figures on dark */
body.blue-preview :is(.hero, .section-ink) .accent,
body.blue-preview .hero .stat dd {
	background: var(--indigo-text-gradient); -webkit-background-clip: text; background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.45));
}

/* ---------- Light sections ---------- */
body.blue-preview .eyebrow { color: var(--orange); }
body.blue-preview .accent { color: var(--orange); }
body.blue-preview .section-mist { background: linear-gradient(180deg, #f4f5ff 0%, #eef0ff 100%); }

/* Services */
body.blue-preview .service-card { border-color: var(--line); transition: border-color .2s, box-shadow .2s; }
body.blue-preview .service-card:not(.is-featured):hover { border-color: #c7cdfe; box-shadow: var(--shadow); }
body.blue-preview .service-card.is-featured {
	background:
		radial-gradient(420px 260px at 100% 0%, rgba(99, 102, 241, 0.35), transparent 70%),
		var(--ink);
	border-color: var(--ink);
}
body.blue-preview .checklist .icon { background: #e0e4ff; color: var(--orange); }
body.blue-preview .is-featured .checklist .icon,
body.blue-preview .section-ink .checklist .icon { background: rgba(129, 140, 248, 0.16); color: var(--indigo-400); }
body.blue-preview .expertise-card { background: var(--mist); border: 1px solid var(--line); transition: border-color .2s, transform .2s, box-shadow .2s; }
body.blue-preview .expertise-card:hover { border-color: #c7cdfe; transform: translateY(-2px); box-shadow: var(--shadow); }
body.blue-preview .icon-badge { background: var(--indigo-gradient); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.28); }

/* Why us / industries */
body.blue-preview .areas { border: 1px solid var(--line); }

/* Cases */
body.blue-preview .case-card { border-color: var(--line); }
body.blue-preview .case-card:hover { border-color: #c7cdfe; }
body.blue-preview .case-media { background: #eef0ff; }

/* ---------- Testimonials (dark band) ---------- */
body.blue-preview .section-ink {
	background:
		radial-gradient(640px 320px at 12% 0%, rgba(99, 102, 241, 0.22), transparent 65%),
		var(--ink);
}
body.blue-preview .section-ink .eyebrow { color: var(--indigo-400); }
body.blue-preview .review-card { background: var(--ink-2); border-color: var(--line-dark); }
body.blue-preview .review-card > .icon { color: var(--indigo-400); filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6)); }
body.blue-preview .slider-btn:hover { background: var(--indigo-500); border-color: var(--indigo-500); color: #fff; box-shadow: var(--neon); }

/* ---------- Partners & ratings ---------- */
body.blue-preview .partner-card { border-color: var(--line); }
body.blue-preview .rating-card {
	background:
		radial-gradient(300px 160px at 100% 0%, rgba(99, 102, 241, 0.3), transparent 70%),
		var(--ink);
}
body.blue-preview .rating-head { color: var(--indigo-300); }

/* ---------- Contact ---------- */
body.blue-preview .contact-card { border: 1px solid var(--line); }
body.blue-preview .field input,
body.blue-preview .field textarea { border-color: var(--line); }
body.blue-preview .field input:focus,
body.blue-preview .field textarea:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18); }
body.blue-preview .video-play { color: #fff; background: var(--indigo-gradient); box-shadow: 0 0 0 12px rgba(99, 102, 241, 0.25); }
body.blue-preview .contact-dialog::backdrop { background: rgba(13, 13, 20, 0.6); }

/* ---------- Footer ---------- */
body.blue-preview .site-footer {
	background:
		radial-gradient(560px 260px at 0% 0%, rgba(99, 102, 241, 0.14), transparent 65%),
		var(--ink);
}
body.blue-preview :is(.footer-list, .footer-legal) a:hover { color: var(--indigo-300); }

/* ======================= Inner pages ======================= */

/* Page heads (Blog, Cases, About, articles, 404): same near-black band,
   indigo waves and glow as the homepage hero (photos are hidden above) */
body.blue-preview .page-head { background: var(--ink); }
body.blue-preview .page-head::before {
	background:
		radial-gradient(560px 320px at 92% 0%, rgba(99, 102, 241, 0.34), transparent 62%),
		radial-gradient(420px 260px at 60% 120%, rgba(139, 92, 246, 0.2), transparent 65%),
		linear-gradient(90deg, #0d0d14 0%, rgba(13, 13, 20, 0.93) 32%, rgba(13, 13, 20, 0.45) 65%, rgba(13, 13, 20, 0.12) 100%),
		linear-gradient(0deg, rgba(13, 13, 20, 0.9) 0%, rgba(13, 13, 20, 0) 40%),
		url("../img/bg-waves.svg") center / cover no-repeat;
}
body.blue-preview .page-head::after {
	background:
		radial-gradient(520px circle at var(--fx-x, 78%) var(--fx-y, 22%), rgba(129, 140, 248, 0.2), transparent 65%),
		radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.5px) 0 0 / 24px 24px;
}
body.blue-preview .page-head .eyebrow { color: var(--indigo-400); }
body.blue-preview .page-head .accent { color: var(--indigo-300); }
body.blue-preview .breadcrumbs a:hover { color: var(--indigo-300); }
body.blue-preview .error-code {
	background: var(--indigo-text-gradient); -webkit-background-clip: text; background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 24px rgba(99, 102, 241, 0.45));
}

/* Active menu item underline on the dark header */
body.blue-preview .nav-list :is(.current-menu-item, .current_page_item, .current-menu-parent) > a { box-shadow: inset 0 -2px 0 var(--indigo-400); }
body.blue-preview .site-header.is-solid .nav-list :is(.current-menu-item, .current_page_item, .current-menu-parent) > a { box-shadow: inset 0 -2px 0 var(--orange); }

/* Call-to-action band at the bottom of inner pages: indigo gradient instead of orange */
body.blue-preview .cta-band {
	background:
		radial-gradient(600px 300px at 100% 0%, rgba(165, 176, 252, 0.35), transparent 65%),
		var(--indigo-gradient);
	color: #fff;
}
body.blue-preview .cta-band p { color: rgba(255, 255, 255, 0.85); }
body.blue-preview .cta-band .accent { color: #fff; }
body.blue-preview .cta-band .btn-primary { background: #fff; color: var(--orange-strong); box-shadow: 0 8px 24px rgba(18, 16, 43, 0.25); }
body.blue-preview .cta-band .btn-primary:hover { background: #eef0ff; color: var(--orange-strong); filter: none; }

/* About: team cards and figures on dark */
body.blue-preview .team-card { background: var(--ink-2); border-color: var(--line-dark); }
body.blue-preview .team-role { color: var(--indigo-400); }

/* Case and article pages */
body.blue-preview .tag-list-dark .tag { background: rgba(129, 140, 248, 0.14); color: var(--text-on-dark); }
body.blue-preview .prose blockquote { border-left-color: var(--indigo-500); }
body.blue-preview .chip.is-active .chip-count { color: var(--indigo-300); }