/* =====================================================
 * AppAgentix - premium skin
 *
 * An additive layer. Loads AFTER the page stylesheet and lp-components.css
 * and wins the cascade, so it can re-point colours that are hard-coded in
 * the four near-identical page stylesheets without editing any of them.
 *
 * Nothing here changes geometry: no widths, no paddings that affect flow,
 * no grid definitions. Only colour, border, radius, shadow, gradient and
 * motion. The section map must measure identically before and after.
 *
 * Remove the enqueue in inc/scripts.php to revert the whole upgrade.
 *
 * Contents
 *   1. Tokens
 *   2. Brand unification
 *   3. Focus system
 *   4. Buttons
 *   5. Section surfaces
 *   6. Icon containers
 *   7. Cards
 *   8. Section-specific treatments
 *   9. Form
 *  10. Cursor glow tint
 *  11. Reduced motion
 * ===================================================== */

/* =====================================================
 * 1. Tokens
 * ===================================================== */

:root {
	/* Supplied palette, verbatim. */
	--color-fill-orange: #FFEEE1;
	--color-border-orange: #FFA15C;
	--color-fill-blue: #DFCDFF;
	--color-border-blue: #8347EC;

	/* Derived. #FFA15C is 2.00:1 on white, so it can only ever be
	   decorative there; these two are the accessible stand-ins for when
	   orange has to carry meaning on a light ground. */
	--ao-orange-ink: #9E480C;   /* 5.48:1 on #FFEEE1, 6.0:1 on warm white - AA text */
	--ao-orange-ui: #D96C20;    /* 3.31:1 on warm white - AA non-text / UI          */
	--ao-blue-deep: #6a34d4;

	--ao-orange-glow: rgba(255, 161, 92, .18);
	--ao-blue-glow: rgba(131, 71, 236, .22);

	/* Surfaces. Three grounds instead of the current two, so the page
	   stops reading as one long slab of #120d26. */
	--ao-dark: #0f0a20;
	--ao-dark-2: #171030;
	--ao-warm: #fffaf6;

	/* Radius scale - absorbs the 25 distinct values in use. */
	--ao-r-sm: 8px;
	--ao-r-md: 14px;
	--ao-r-lg: 20px;
	--ao-r-pill: 999px;

	/* Shadow scale - absorbs the 45 distinct values in use. */
	--ao-shadow-sm: 0 2px 10px rgba(18, 13, 38, .06);
	--ao-shadow-md: 0 14px 30px -12px rgba(18, 13, 38, .18);
	--ao-shadow-lg: 0 30px 64px -22px rgba(18, 13, 38, .30);
	--ao-shadow-dark: 0 20px 44px -20px rgba(0, 0, 0, .7);
	--ao-glow-blue: 0 18px 42px -18px rgba(131, 71, 236, .6);
	--ao-glow-orange: 0 18px 42px -18px rgba(255, 161, 92, .45);

	/* Motion scale - absorbs the 52 distinct transitions. */
	--ao-dur-fast: .18s;
	--ao-dur: .28s;
	--ao-dur-slow: .45s;
	--ao-ease: cubic-bezier(.4, 0, .2, 1);

	/* Gradient recipes. Four, deliberately - not one per component. */
	--ao-grad-brand: linear-gradient(135deg, var(--color-border-blue), var(--lp-purple, #973dd9));
	--ao-grad-ring: linear-gradient(135deg, var(--color-border-blue), var(--color-border-orange));
	--ao-grad-warm: linear-gradient(180deg, var(--color-fill-orange), rgba(255, 238, 225, 0));
	--ao-grad-band:
		radial-gradient(62% 92% at 6% 4%, rgba(131, 71, 236, .26), rgba(131, 71, 236, 0) 62%),
		radial-gradient(54% 86% at 96% 98%, rgba(255, 161, 92, .13), rgba(255, 161, 92, 0) 64%),
		linear-gradient(152deg, var(--ao-dark-2) 0%, var(--ao-dark) 56%, #1a1136 100%);
}

/* =====================================================
 * 2. Brand unification
 *
 * The theme shipped four purples: #654dff, #973dd9, #5d45fd, #a04add.
 * --lp-primary becomes the single brand purple; --lp-purple stays as its
 * gradient partner so two-tone treatments do not flatten to a solid.
 * This one remap propagates through ~95 --lpc-* consumers.
 * ===================================================== */

:root {
	--lp-primary: #8347EC;
	--lp-primary-soft: #f1e9ff;
	--lp-pill: var(--color-fill-blue);
	--lp-shadow: var(--ao-shadow-md);
	--lp-shadow-hover: var(--ao-glow-blue);
}

/* The fourth purple, hard-coded in the page stylesheets for the accent
   text gradient and the case-study arrows. */
.lp-accent-text,
.lp-ai__accent,
.lp-splitmedia--about .lp-sm-accent {
	background: var(--ao-grad-ring);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.featured-case-studies .card-link svg {
	stroke: var(--color-border-blue);
}

.featured-case-studies .arrow-btn:hover {
	border-color: var(--color-border-blue);
	color: var(--color-border-blue);
}

.featured-case-studies .arrow-btn:hover svg {
	stroke: var(--color-border-blue);
}

.featured-case-studies .filter-tabs button.active {
	background: var(--color-border-blue);
	border-color: var(--color-border-blue);
}

.featured-case-studies .filter-tabs button:hover {
	border-color: var(--color-border-blue);
	color: var(--color-border-blue);
}

/* =====================================================
 * 3. Focus system
 *
 * header.css:9-12 disables outlines globally. The skin restores a real
 * indicator for anything focusable on this page.
 * ===================================================== */

.lp-body a:focus-visible,
.lp-body button:focus-visible,
.lp-body input:focus-visible,
.lp-body select:focus-visible,
.lp-body textarea:focus-visible,
.lp-body [tabindex]:focus-visible,
.lp-body summary:focus-visible {
	outline: 2px solid var(--color-border-blue);
	outline-offset: 3px;
	border-radius: var(--ao-r-sm);
}

/* On dark grounds the purple ring is only 3.67:1; the light fill reads
   far better and still names the brand. */
.lp-section--dark a:focus-visible,
.lp-section--dark button:focus-visible,
.lp-ind-dark a:focus-visible,
.lp-ind-dark button:focus-visible,
.lp-cta a:focus-visible,
.lp-ctab a:focus-visible,
.lp-ai a:focus-visible,
.lp-ai button:focus-visible,
.lp-proc a:focus-visible {
	outline-color: var(--color-fill-blue);
}

/* =====================================================
 * 4. Buttons
 *
 * .lp-btn is written out five times across five stylesheets and has
 * never had :focus-visible, :active or :disabled. Defined here in full
 * so the lp/* components stop depending on the page stylesheet for it.
 * ===================================================== */

.lp-btn {
	border-radius: var(--ao-r-sm);
	border: 0;
	cursor: pointer;
	letter-spacing: -.01em;
	transition:
		transform var(--ao-dur) var(--ao-ease),
		box-shadow var(--ao-dur) var(--ao-ease),
		background var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease),
		color var(--ao-dur) var(--ao-ease);
}

.lp-btn--primary {
	background: var(--ao-grad-brand);
	color: var(--lp-white, #fff);
	box-shadow: 0 8px 20px -10px rgba(131, 71, 236, .8);
}

.lp-btn--primary:hover {
	background: var(--ao-grad-brand);
	transform: translateY(-2px);
	/* Warm rim on the cool glow - the one place the two hues meet. */
	box-shadow:
		var(--ao-glow-blue),
		0 0 0 1px rgba(255, 161, 92, .32);
}

.lp-btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 6px 14px -8px rgba(131, 71, 236, .7);
}

.lp-btn--ghost {
	border: 1px solid var(--lp-border, #e2e2e2);
	background: transparent;
}

.lp-btn--ghost:hover {
	border-color: var(--color-border-blue);
	color: var(--color-border-blue);
	background: rgba(131, 71, 236, .05);
	transform: translateY(-2px);
}

/* Ghost sits on dark grounds in the hero, where orange is legible. */
.lp-section--dark .lp-btn--ghost,
.lp-hero .lp-btn--ghost {
	border-color: rgba(255, 255, 255, .24);
	color: var(--lp-white, #fff);
}

.lp-section--dark .lp-btn--ghost:hover,
.lp-hero .lp-btn--ghost:hover {
	border-color: var(--color-border-orange);
	color: var(--color-border-orange);
	background: rgba(255, 161, 92, .08);
}

/*
 * The split hero is the exception: it is the city landing pages' lead
 * section and its ground is pale, so the rule above would put white text
 * on near-white. Ghost returns to the ink-on-light treatment there.
 *
 * Scoped to --split, which only the hero carrying a lead-form aside
 * uses, so the dark heroes on the other landing pages are untouched.
 */
.lp-hero--split .lp-btn--ghost {
	border-color: var(--lp-border, #e2e2e2);
	color: var(--lp-dark, #120d26);
}

.lp-hero--split .lp-btn--ghost:hover {
	border-color: var(--color-border-blue);
	color: var(--color-border-blue);
	background: rgba(131, 71, 236, .05);
}

.lp-btn--light {
	background: var(--lp-white, #fff);
	color: var(--color-border-blue);
}

.lp-btn--light:hover {
	transform: translateY(-2px);
	box-shadow:
		0 18px 40px -16px rgba(0, 0, 0, .5),
		0 0 0 1px rgba(255, 161, 92, .4);
}

.lp-btn[disabled],
.lp-btn[aria-disabled="true"] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* =====================================================
 * 5. Section surfaces
 *
 * Currently 6 flat-dark + 5 gradient-dark + 2 white + 1 transparent,
 * which reads as one long slab. Three grounds instead, alternating.
 * ===================================================== */

.lp-section--dark,
#lp-stats,
#lp-clients {
	background: var(--ao-dark);
}

/* Tinted dark - the "technical" surfaces. */
#lp-process,
#lp-same-team,
#lp-why-choose {
	background:
		radial-gradient(56% 88% at 4% 2%, rgba(131, 71, 236, .16), rgba(131, 71, 236, 0) 60%),
		var(--ao-dark-2);
}

#lp-tech,
#lp-awards {
	background:
		radial-gradient(52% 84% at 96% 96%, rgba(255, 161, 92, .09), rgba(255, 161, 92, 0) 62%),
		var(--ao-dark);
}

.lp-ai {
	background: radial-gradient(56% 88% at 4% 2%, rgba(131, 71, 236, .16), rgba(131, 71, 236, 0) 60%),  var(--ao-dark-2);
}

/* Warm light - the white sections gain a faint warm wash so they
   read as a deliberate surface rather than an absence of one. */
#lp-services,
#lp-chain,
#lp-engagement,
#lp-pricing {
	position: relative;
	background: var(--ao-warm);
}

#lp-services::before,
#lp-chain::before,
#lp-engagement::before,
#lp-pricing::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 260px;
	background: var(--ao-grad-warm);
	pointer-events: none;
}

#lp-services > *,
#lp-chain > *,
#lp-engagement > *,
#lp-pricing > * {
	position: relative;
}

/* =====================================================
 * 6. Icon containers
 *
 * Every icon on this page is an inline SVG using stroke="currentColor",
 * so recolouring is entirely a matter of the container's `color`. No SVG
 * file or markup edits anywhere.
 * ===================================================== */

.lp-card__icon {
	background: var(--color-fill-blue);
	border-color: rgba(131, 71, 236, .3);
	color: var(--ao-blue-deep);
	border-radius: var(--ao-r-md);
	transition:
		background var(--ao-dur) var(--ao-ease),
		color var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease),
		transform var(--ao-dur) var(--ao-ease);
}

/* Warm-up on hover: the card's own colour shifts toward orange. */
.lp-card:hover .lp-card__icon,
.lp-service-card:hover .lp-card__icon {
	background: var(--color-fill-orange);
	border-color: rgba(255, 161, 92, .55);
	color: var(--ao-orange-ink);
	transform: translateY(-2px);
}

.lp-ind-node-icon,
.lp-ind-hub-icon {
	background: var(--ao-grad-brand);
	box-shadow: 0 10px 24px -10px rgba(131, 71, 236, .7);
}

.lp-ai__panelicon {
	background: linear-gradient(135deg, rgba(131, 71, 236, .38), rgba(255, 161, 92, .22));
	color: var(--color-fill-blue);
}

.lp-proc__badge {
	background: var(--ao-grad-brand);
	box-shadow: 0 12px 26px -10px rgba(131, 71, 236, .85);
}

.lp-award-icon {
	background:
		radial-gradient(circle at 30% 25%, rgba(131, 71, 236, .5), rgba(131, 71, 236, .14) 60%, rgba(255, 255, 255, .04));
	border-color: rgba(255, 161, 92, .4);
	color: var(--color-fill-blue);
}

.lp-tech-card__icon {
	color: rgba(255, 255, 255, .78);
}

.lp-tech-card:hover .lp-tech-card__icon,
.lp-tech-card:focus-visible .lp-tech-card__icon {
	color: var(--color-fill-blue);
}

/* =====================================================
 * 7. Cards
 *
 * Unified onto the radius and shadow scales. Differentiated by role:
 * light-ground cards get depth, dark-ground cards get a border tint.
 * ===================================================== */

.lp-card,
.lp-service-card {
	border-radius: var(--ao-r-lg);
	border: 1px solid rgba(131, 71, 236, .14);
	background: #fff;
	box-shadow: var(--ao-shadow-sm);
	transition:
		transform var(--ao-dur) var(--ao-ease),
		box-shadow var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease);
}

/* The component ships a deliberate checkerboard on even cards, tinted with
   the old lavender ramp. Re-pointed to the warm fill so the alternation
   survives and lands on the new palette instead of clashing with it. This
   is the soft-orange-on-light treatment the section was scoped for. */
.lp-card:nth-child(even) {
	background: linear-gradient(155deg, #fff4ea 0%, var(--ao-warm) 62%, #fff 100%);
	border-color: rgba(255, 161, 92, .24);
}

.lp-card:hover,
.lp-service-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 161, 92, .5);
	box-shadow: var(--ao-shadow-md);
}

/*
 * Dark-ground cards.
 *
 * .lp-casetabs .lp-ct-tab used to sit in this group. It is no longer a
 * dark-ground card - it is a light index card that carries its own
 * radius, its own four-property transition and its own active state in
 * lp-components.css. Leaving it here re-applied --ao-r-md and a shorter
 * transition from further down the cascade and fought that rule.
 */
.lp-ai__cell,
.lp-proc__item,
.lp-tech-card {
	border-radius: var(--ao-r-md);
	transition:
		transform var(--ao-dur) var(--ao-ease),
		box-shadow var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease),
		background var(--ao-dur) var(--ao-ease);
}

.lp-ai__cell:hover,
.lp-ai__cell.is-active,
.lp-proc__item:hover {
	border-color: rgba(131, 71, 236, .6);
	box-shadow: var(--ao-glow-blue);
}

.lp-tech-card:hover,
.lp-tech-card:focus-visible {
	border-color: var(--color-border-orange);
	background: rgba(255, 161, 92, .07);
	box-shadow:
		0 0 0 1px rgba(255, 161, 92, .4),
		var(--ao-glow-orange);
}

/* =====================================================
 * 8. Section-specific treatments
 * ===================================================== */

/* --- Stats: the figures are the point, so they carry the warm accent --- */

.lp-stat-num {
	background: var(--ao-grad-ring);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- Why-choose: 7 hand-tuned hexes replaced by a two-hue rotation.
       One card in six is warm, which keeps orange at roughly 20%.

       These are deliberately darker than the originals. The shipped
       gradients put white text on light ends measuring 3.17-4.11:1 -
       six of the seven cards failed AA. Every light end below clears
       4.5:1 against white, so the rotation fixes a pre-existing
       contrast failure rather than inheriting it. --- */

.lp-why-a1 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%); }
.lp-why-a2 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%); }
.lp-why-a3 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%);  }
.lp-why-a4 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%);  }
.lp-why-a5 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%); }
.lp-why-a6 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%);  }
.lp-why-a7 { background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%);  }

/* Body copy shipped at rgba(255,255,255,.82), which measured ~3.5:1 even
   on the old lighter gradients. Raised so it clears AA on the new ones. */
.lp-why-item p {
	color: rgba(255, 255, 255, .96);
}

.lp-why-a1 .lp-why-fold { background: #43189f; }
.lp-why-a2 .lp-why-fold { background: #2e1c8f; }
.lp-why-a3 .lp-why-fold { background: #4d1497; }
.lp-why-a4 .lp-why-fold { background:  #43189f;  }
.lp-why-a5 .lp-why-fold { background: #3a209b; }
.lp-why-a6 .lp-why-fold { background: #531a96; }
.lp-why-a7 .lp-why-fold { background: #26309c; }

/* The icon sits on a white disc, so these are measured against #fff. */
.lp-why-a1 .lp-why-icon { color: #6b34d8; }
.lp-why-a2 .lp-why-icon { color: #4f38e0; }
.lp-why-a3 .lp-why-icon { color: #7a2fd8; }
.lp-why-a4 .lp-why-icon { color: var(--ao-orange-ink); }
.lp-why-a5 .lp-why-icon { color: #5c3ade; }
.lp-why-a6 .lp-why-icon { color: #8a2fd0; }
.lp-why-a7 .lp-why-icon { color: #3f4ae0; }

.lp-why-item {
	border-radius: var(--ao-r-md);
	box-shadow: var(--ao-shadow-dark);
	transition:
		transform var(--ao-dur) var(--ao-ease),
		box-shadow var(--ao-dur) var(--ao-ease);
}

.lp-why-item:hover {
	box-shadow: 0 28px 52px -20px rgba(0, 0, 0, .75);
}

/* --- Pricing: the highlighted tier is the one warm moment on white --- */

.lp-tier {
	border-radius: var(--ao-r-lg);
	transition:
		transform var(--ao-dur) var(--ao-ease),
		box-shadow var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease);
}

.lp-tier--featured {
	border-color: var(--ao-orange-ui);
	box-shadow: var(--ao-shadow-lg);
}

.lp-tier--featured .lp-tier__badge {
	background: var(--color-fill-orange);
	color: var(--ao-orange-ink);
}

.lp-tier:hover {
	box-shadow: var(--ao-shadow-md);
}

/* --- AI data bus --- */

.lp-ai__bus {
	border-radius: var(--ao-r-lg);
	border-color: rgba(131, 71, 236, .18);
}

.lp-ai__railfill {
	background: var(--ao-grad-ring);
}

.lp-ai__raildot {
	background: var(--color-fill-blue);
	box-shadow: 0 0 18px var(--color-border-blue);
}

.lp-ai__station.is-on .lp-ai__stationdot {
	background: var(--color-border-orange);
	border-color: var(--color-border-orange);
	box-shadow: 0 0 16px -2px var(--color-border-orange);
}

.lp-ai__panel {
	border-radius: var(--ao-r-md);
	border-color: rgba(131, 71, 236, .32);
	background: rgba(131, 71, 236, .08);
}

/* --- Process rail --- */

.lp-proc__rail::before {
	background: linear-gradient(180deg,
		var(--color-border-blue) 0%,
		var(--color-border-orange) 52%,
		rgba(255, 255, 255, .07) 100%);
}

/* --- Industries hub --- */

.lp-industries .lp-ind-hub-cta {
	background: var(--ao-grad-brand);
	box-shadow: 0 14px 30px -10px rgba(131, 71, 236, .7);
}

.lp-industries .lp-ind-hub-ring {
	border-color: rgba(255, 161, 92, .28);
}

.lp-ind-node {
	transition:
		background var(--ao-dur) var(--ao-ease),
		border-color var(--ao-dur) var(--ao-ease),
		transform var(--ao-dur) var(--ao-ease);
}

/* --- Closing CTA band --- */

.lp-ctab__tag {
	background: rgba(255, 161, 92, .14);
	border-color: rgba(255, 161, 92, .3);
	color: var(--color-fill-orange);
}

/* --- FAQ --- */

.lp-faq-item {
	border-radius: var(--ao-r-md);
	transition: border-color var(--ao-dur) var(--ao-ease), background var(--ao-dur) var(--ao-ease);
}

.lp-faq-item.open,
.lp-faq-item:hover {
	border-color: rgba(131, 71, 236, .4);
}

.lp-faq-tab.is-active {
	background: var(--ao-grad-brand);
	border-color: transparent;
}

/* =====================================================
 * 9. Form
 *
 * Resolves the radius mismatch (card 18 / input 8 / button 4) and moves
 * the ring from :focus to :focus-visible so it stops firing on click.
 * ===================================================== */

.lp-form-card {
	border-radius: var(--ao-r-lg);
	box-shadow: var(--ao-shadow-lg);
}

.lp-form-glow {
	background: linear-gradient(135deg,
		var(--color-border-blue),
		var(--lp-purple, #973dd9) 45%,
		var(--color-border-orange));
	opacity: .55;
}

.lp-form input,
.lp-form select,
.lp-form textarea {
	border-radius: var(--ao-r-sm);
	transition:
		border-color var(--ao-dur-fast) var(--ao-ease),
		background var(--ao-dur-fast) var(--ao-ease),
		box-shadow var(--ao-dur-fast) var(--ao-ease);
}

.lp-form input:focus-visible,
.lp-form select:focus-visible,
.lp-form textarea:focus-visible {
	outline: none;
	border-color: var(--color-fill-blue);
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 3px rgba(131, 71, 236, .4);
}

.lp-form-badge {
	background: rgba(131, 71, 236, .24);
	border-color: rgba(255, 161, 92, .38);
	color: var(--color-fill-blue);
	border-radius: var(--ao-r-pill);
}

.lp-form-benefits svg {
	color: var(--color-fill-blue);
}

/* =====================================================
 * 10. Cursor glow tint
 *
 * The orb is a single purple radial today. Two stacked tones give it
 * depth without raising its intensity. Scoped to this page; the global
 * default in cursor.css is unchanged.
 * ===================================================== */

.lp-body .cursor-glow__orb {
	background:
		radial-gradient(circle,
			rgba(131, 71, 236, .11) 0%,
			rgba(131, 71, 236, .05) 34%,
			rgba(131, 71, 236, 0) 68%),
		radial-gradient(circle at 62% 62%,
			rgba(255, 161, 92, .07) 0%,
			rgba(255, 161, 92, 0) 56%);
}

/* =====================================================
 * 11. Reduced motion
 * ===================================================== */

@media (prefers-reduced-motion: reduce) {
	.lp-btn,
	.lp-card,
	.lp-service-card,
	.lp-card__icon,
	.lp-ai__cell,
	.lp-proc__item,
	.lp-tech-card,
	.lp-why-item,
	.lp-tier,
	.lp-ind-node,
	.lp-faq-item,
	.lp-form input,
	.lp-form select,
	.lp-form textarea {
		transition: none;
	}

	.lp-btn:hover,
	.lp-btn:active,
	.lp-card:hover,
	.lp-service-card:hover,
	.lp-card:hover .lp-card__icon,
	.lp-service-card:hover .lp-card__icon,
	.lp-why-item:hover,
	.lp-tier:hover {
		transform: none;
	}
}