/* =====================================================================
   Proximal Innovation: additions on top of the Folio theme (style.css).
   Uses the theme's colour variables so light/dark mode keep working.
   ===================================================================== */

:root {
	/* Brand palette: solid indigo and purple. Gradients only indigo -> purple, used sparingly. */
	--px-indigo: #5F41FB;
	--px-indigo-dark: #4A2FE0;
	--px-purple: #7F39F8;
	--px-ink: #16123A;
	--px-tint: rgba(95, 65, 251, .08);
}

/* ---------- Hero slider ---------- */
.px-hero { padding-top: 9rem; padding-bottom: 3rem; }
.px-hero .swiper-slide { height: auto; }
.px-hero-img {
	position: relative; border-radius: 1.5rem; overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(95, 65, 251, .45);
	aspect-ratio: 5 / 4;
}
.px-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.px-float {
	position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem;
	background: var(--bs-body-bg); border-radius: 1rem; padding: .75rem 1rem;
	box-shadow: 0 12px 30px rgba(20, 16, 46, .18); font-size: .875rem;
	animation: px-bob 5s ease-in-out infinite;
}
.px-float .px-float-icon {
	width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
	color: #fff; background: var(--px-indigo); font-size: 1.1rem; flex-shrink: 0;
}
.px-float-1 { left: -1.5rem; bottom: 2rem; }
.px-float-2 { right: -1rem; top: 1.75rem; animation-delay: -2.5s; }
@keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.px-hero .swiper-pagination { position: static; margin-top: 2rem; text-align: left; }
.px-hero .swiper-pagination-bullet { width: 28px; height: 6px; border-radius: 6px; background: var(--px-indigo); opacity: .25; transition: all .3s; }
.px-hero .swiper-pagination-bullet-active { width: 56px; opacity: 1; background: var(--px-indigo); }
.px-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--px-indigo);
	background: var(--px-tint); padding: .4rem .9rem; border-radius: 50rem;
}
@media (max-width: 991.98px) {
	.px-hero { padding-top: 7rem; }
	.px-float-1 { left: .75rem; bottom: .75rem; }
	.px-float-2 { right: .75rem; top: .75rem; }
}

/* ---------- Stats band ---------- */
.px-stats { background: var(--px-ink); border-radius: 1.5rem; position: relative; overflow: hidden; }
.px-stat { position: relative; z-index: 2; text-align: center; color: #fff; }
.px-stat .px-stat-num { font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; }
.px-stat .px-stat-num span.px-suffix { color: #A58BFF; }
.px-stat .px-stat-label { color: rgba(255, 255, 255, .7); font-size: .9rem; margin-top: .5rem; }
.px-stat i { font-size: 1.4rem; color: #A58BFF; display: block; margin-bottom: .75rem; }

/* ---------- Pillars ---------- */
.px-pillar {
	position: relative; border-radius: 1.25rem; padding: 2rem; height: 100%;
	background: var(--bs-body-bg); border: 1px solid rgba(95, 65, 251, .12);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s;
	overflow: hidden;
}
.px-pillar::before {
	content: ""; position: absolute; inset: 0; background: var(--px-indigo); opacity: 0;
	transition: opacity .35s; z-index: 0;
}
.px-pillar > * { position: relative; z-index: 1; }
.px-pillar:hover { transform: translateY(-8px); box-shadow: 0 25px 50px -20px rgba(95, 65, 251, .55); border-color: transparent; }
.px-pillar:hover::before { opacity: 1; }
.px-pillar:hover, .px-pillar:hover h5, .px-pillar:hover a, .px-pillar:hover p { color: #fff !important; }
.px-pillar img.px-3d { height: 84px; width: auto; margin-bottom: 1.25rem; transition: transform .35s; }
.px-pillar:hover img.px-3d { transform: scale(1.08) rotate(-4deg); }
.px-pillar .px-num { position: absolute; top: 1.25rem; right: 1.5rem; font: 700 2.75rem Poppins, sans-serif; opacity: .07; }
.px-pillar ul { list-style: none; padding: 0; margin: 0; }
.px-pillar ul li a { font-size: .875rem; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; padding: .15rem 0; }

/* ---------- Ecosystem infographic ---------- */
.px-eco svg { width: 100%; height: auto; display: block; }
.px-eco .px-flow { stroke-dasharray: 6 8; animation: px-dash 1.6s linear infinite; }
@keyframes px-dash { to { stroke-dashoffset: -28; } }
.px-eco .px-node rect { transition: transform .3s; }
.px-eco-mobile .px-eco-col { border-radius: 1rem; padding: 1.25rem; background: var(--bs-body-bg); border: 1px solid rgba(95, 65, 251, .15); }
.px-eco-mobile .px-eco-core { background: var(--px-indigo); color: #fff; border: 0; }
.px-eco-mobile .px-eco-core h6 { color: #fff; }
.px-eco-arrow { text-align: center; color: var(--px-purple); font-size: 1.5rem; line-height: 1; padding: .35rem 0; }

/* ---------- Industry slider cards ---------- */
.px-industry { position: relative; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 3 / 4; display: block; }
.px-industry img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.px-industry:hover img { transform: scale(1.08); }
.px-industry .px-industry-body {
	position: absolute; inset: auto 0 0 0; padding: 1.5rem; color: #fff;
	background: rgba(22, 18, 58, .88);
}
.px-industry h6 { color: #fff; margin-bottom: .35rem; }
.px-industry p { color: rgba(255, 255, 255, .8); font-size: .875rem; margin: 0; }

/* ---------- Technology marquee ---------- */
.px-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.px-marquee-track { display: flex; gap: 1rem; width: max-content; animation: px-marquee 40s linear infinite; }
.px-marquee:hover .px-marquee-track { animation-play-state: paused; }
.px-chip {
	white-space: nowrap; padding: .7rem 1.25rem; border-radius: 50rem; font-weight: 600; font-size: .95rem;
	background: var(--bs-body-bg); border: 1px solid rgba(95, 65, 251, .15); color: var(--bs-heading-color);
}
.px-chip i { color: #5F41FB; margin-right: .4rem; }
@keyframes px-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.px-marquee-track, .px-float, .px-eco .px-flow { animation: none; }
}

/* ---------- Parallax band ---------- */
.px-parallax { position: relative; border-radius: 1.5rem; overflow: hidden; min-height: 460px; display: flex; align-items: center; }
.px-parallax { background-color: var(--px-indigo) !important; }
.px-parallax::before { content: ""; position: absolute; inset: 0; background: rgba(74, 47, 224, .92); z-index: 1; }
.px-parallax > .container { position: relative; z-index: 2; }

/* ---------- Timeline / process ---------- */
.px-steps { counter-reset: step; }
.px-step { position: relative; padding-top: 3.75rem; }
.px-step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; border-radius: 50%;
	display: grid; place-items: center; font: 700 1rem Poppins, sans-serif; color: #fff; background: var(--px-indigo);
	box-shadow: 0 10px 25px -8px rgba(95, 65, 251, .7);
}
.px-step::after { content: ""; position: absolute; top: 1.5rem; left: 3.5rem; right: -1rem; height: 0; border-top: 2px dashed rgba(127, 57, 248, .45); }
.px-steps > div:last-child .px-step::after { display: none; }
@media (max-width: 991.98px) { .px-step::after { display: none; } }

/* ---------- Detail page ---------- */
.px-detail-hero-img { border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -25px rgba(95, 65, 251, .5); }
.px-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.px-feature { border-radius: 1.25rem; padding: 1.75rem; height: 100%; background: var(--bs-body-bg); border: 1px solid rgba(95, 65, 251, .12); transition: transform .3s, box-shadow .3s; }
.px-feature:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(95, 65, 251, .45); }
.px-feature .px-feature-icon { width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; color: #fff; background: var(--px-indigo); font-size: 1.25rem; margin-bottom: 1rem; }
.px-related .card { border-radius: 1.25rem; overflow: hidden; }
.px-related .card img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- About collage ---------- */
.px-collage { position: relative; min-height: 520px; }
.px-collage img { position: absolute; border-radius: 1.25rem; object-fit: cover; box-shadow: 0 25px 50px -20px rgba(20, 16, 46, .4); }
.px-collage .c1 { width: 62%; height: 360px; top: 0; left: 0; }
.px-collage .c2 { width: 48%; height: 260px; bottom: 0; right: 0; border: 6px solid var(--bs-body-bg); }
.px-collage .px-float { left: auto; right: 8%; top: 42%; }
@media (max-width: 575.98px) { .px-collage { min-height: 400px; } .px-collage .c1 { height: 260px; width: 80%; } .px-collage .c2 { height: 190px; width: 62%; } }

/* ---------- Solid icon tiles and photo-less panels ---------- */
.px-pillar-icon, .px-tile {
	width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: grid; place-items: center;
	background: var(--px-tint); color: var(--px-indigo); font-size: 1.6rem; transition: background .35s, color .35s;
}
.px-pillar-icon { width: 4.25rem; height: 4.25rem; font-size: 1.9rem; margin-bottom: 1.25rem; }
.px-pillar:hover .px-pillar-icon { background: #fff; color: var(--px-indigo); }
.px-tile-lg { width: 3.75rem; height: 3.75rem; }
.px-icon-panel {
	width: 100%; height: 100%; display: grid; place-items: center; color: #fff;
	background-color: var(--px-indigo);
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
	background-size: 18px 18px;
}
.px-icon-panel i { font-size: 4rem; }
.px-industry .px-icon-panel i { font-size: 3.5rem; margin-bottom: 5rem; }
.swiper-slide:nth-child(even) .px-industry .px-icon-panel { background-color: var(--px-purple); }
.px-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.px-card-media img, .px-card-media .px-icon-panel { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.px-card-media .px-icon-panel i { font-size: 3rem; }

/* ---------- Theme overrides: replace multi-colour gradients with solid brand colours ---------- */
.btn-primary-grad { background: var(--px-indigo) !important; border-color: var(--px-indigo) !important; color: #fff !important; }
.btn-primary-grad:hover, .btn-primary-grad:focus, .btn-primary-grad:active { background: var(--px-indigo-dark) !important; border-color: var(--px-indigo-dark) !important; }
.text-primary-grad, .link-primary-grad, .link-primary-grad > .bi {
	background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--px-indigo) !important;
}
.link-primary-grad:hover { color: var(--px-indigo-dark) !important; }
.bg-primary-grad { background: var(--px-purple) !important; }
.bg-secondary-grad { background: #F4F2FF !important; }
[data-bs-theme=dark] .bg-secondary-grad { background: rgba(95, 65, 251, .12) !important; }
.pagination-primary-grad .page-item.active .page-link, .pagination-primary-grad .page-link:hover { background: var(--px-indigo) !important; }