@import url("icons/font-awesome.css"); /* Ref: https://fontawesome.com/search?o=r&m=free */
@import url("icons/bootstrap-icons.css"); /* Ref: https://icons.getbootstrap.com/#icons */
@import url("icons/unicons.css"); /* Ref: https://iconscout.com/unicons/explore/line */

[class*="fa-"],
[class*=" fa-"],
[class*="bi-"],
[class*=" bi-"],
[class*="uil-"],
[class*=" uil-"] {
	display: inline-block;
	line-height: inherit;
	font-display: swap;
}

[class*="fa-"]::before,
[class*=" fa-"]::before,
[class*="bi-"]::before,
[class*=" bi-"]::before,
[class*="uil-"]::before,
[class*=" uil-"]::before {
	display: inline-flex;
	align-self: center;
	justify-self: center;
	line-height: inherit;
}

.icon-lg {
	font-size: 1.3333333333333333em;
	line-height: 0.75em;
	vertical-align: -15%;
}
.icon-2x {
	font-size: 2em;
}
.icon-3x {
	font-size: 3em;
}
.icon-4x {
	font-size: 4em;
}
.icon-5x {
	font-size: 5em;
}
.icon-fw {
	width: 1.2857142857142858em;
	text-align: center;
}

.icon-border {
	padding: 0.2em 0.25em 0.15em;
	border: solid 0.08em #eeeeee;
	border-radius: 0.1em;
}
.icon.pull-left {
	margin-right: 0.3em;
}
.icon.pull-right {
	margin-left: 0.3em;
}
.icon-spin {
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(359deg);
	}
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
	}
}
@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(359deg);
	}
}
@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(359deg);
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
.icon-rotate-90 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.icon-rotate-180 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.icon-rotate-270 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
.icon-flip-horizontal {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
}
.icon-flip-vertical {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
	-webkit-transform: scale(1, -1);
	-moz-transform: scale(1, -1);
	-ms-transform: scale(1, -1);
	-o-transform: scale(1, -1);
	transform: scale(1, -1);
}
.icon-stacked {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
}
.icon-stacked-1x,
.icon-stacked-2x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.rtl .icon-stacked-1x,
.rtl .icon-stacked-2x {
	left: auto;
	right: 0;
}
.icon-stacked-1x {
	line-height: inherit;
}
.icon-stacked-2x {
	font-size: 2em;
}
.icon-inverse {
	color: #ffffff;
}
/**
 * Swiper 11.0.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 22, 2023
 */

 @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
/* ----------------------------------------------------------------
	Canvas: SAAS 2
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------
	FONTS
---------------------------------------------------------------------------- */

:root {
	--cnvs-themecolor: #3E45EB;
	--cnvs-themecolor-rgb: 62, 69, 235;
	--cnvs-gradient-color: linear-gradient(to right, #f6955c, #f23457);

	--cnvs-body-image: url('images/new/blur-bg.png');

	--cnvs-saas-color-1: #FFF7EF;
	--cnvs-saas-color-2: #F9FAF6;

	--cnvs-font-size-h1:	2.75rem;
	--cnvs-font-size-h2:	2rem;
	--cnvs-font-size-h3:	1.75rem;
	--cnvs-font-size-h4:	1.5rem;
	--cnvs-font-size-h5:	1rem;
	--cnvs-font-size-h6:	0.875rem;
	--cnvs-section-padding: 6rem;
	--bs-body-font-size: 1.125rem;

	--cnvs-primary-font: 'DM Sans', sans-serif;
	--cnvs-body-font: 'DM Sans', sans-serif;
	--cnvs-secondary-font: 'Cookie', cursive;
	--cnvs-other-font: 'Marcellus', serif;

	--cnvs-slider-arrow-color: var(--cnvs-contrast-300);
	--cnvs-slider-arrows-bg-color: transparent;
	--cnvs-slider-arrows-bg-hover-color: var(--cnvs-slider-arrows-bg-color);
	--cnvs-slider-arrows-size: 34px;
	--cnvs-canvas-slider-dots-size: 0.725rem;
	--cnvs-card-rounded: 20px;
}

:root,
.not-dark {
	--cnvs-heading-color: var(--cnvs-contrast-1000);
}

.fw-bolder {
	font-weight: 600 !important;
}

.rounded-xxl {
	border-radius: var(--cnvs-card-rounded);
}

.gradient-color {
	background-image: var(--cnvs-gradient-color) !important;
}

.gradient-text {
    font-family: var(--cnvs-secondary-font);
	padding: 0 5px;
	font-size: 120%;
}

.cnvs-bg-color-1 {
	background-color: var(--cnvs-saas-color-1)  !important;
}

.cnvs-bg-color-2 {
	background-color: var(--cnvs-saas-color-2)  !important;
}
.second-bg-color {
    background-color: var(--cnvs-secondcolor) !important;
}
#header {
	--cnvs-primary-menu-font-size: 1.125rem;
	--cnvs-primary-menu-tt:	none;
	--cnvs-primary-menu-ls:	0;
    --cnvs-primary-menu-padding-x: 20px;
    --cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-font: var(--cnvs-body-font);
}

#wrapper {
	background: var(--cnvs-body-bg);
	background-image: var(--cnvs-body-image);
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 100% auto;
}


/* Swiper Tabs */
.swiper-pagination-progress {
	--cnvs-swiper-bar-size: 2px;
	--cnvs-swiper-bar-color:  var(--cnvs-contrast-200);
	--cnvs-swiper-bar-active-color: var(--cnvs-contrast-1000);
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: auto;
	border-radius: 0;
	opacity: 1;
	margin: 0px;
	background-color: transparent;
}
.swiper-pagination-progress .swiper-pagination-bar,
.swiper-pagination-progress .swiper-pagination-bar-active {
	position: absolute;
	bottom: 0;
	border-radius: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: var(--cnvs-swiper-bar-size);
	margin: 0px;
	background-color: var(--cnvs-swiper-bar-color);
}

.swiper-pagination-progress .swiper-pagination-bar-active {
	z-index: 2;
	width: 0%;
	background-color: var(--cnvs-swiper-bar-active-color);
}
.active .swiper-pagination-progress .swiper-pagination-bar-active {
	animation-name: swiperbarAnim;
	animation-duration: 5s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: forwards;
}
@keyframes swiperbarAnim {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

.swiper-tab-link {
	--swiper-tab-title: #AAA;
	--swiper-tab-content: ;
	counter-increment: step-counter;
	position: relative;
	overflow: hidden;
	margin-bottom: 5px;
	padding: 20px 0;
	cursor: pointer;
}

.swiper-tab-link::before {
	content: "0" counter(step-counter)'.';
	position: relative;
	display: inline-block;
	font-size: 26px;
    font-weight: 600;
    min-width: 50px;
	margin-right: 5px;
	color: var(--swiper-tab-title);
    font-family: monospace;
	line-height: 1;
}

.swiper-tab-link .swiper-tab-title {
	display: inline-block;
	color: var(--swiper-tab-title);
	margin-bottom: 0;
	font-size: calc(1.275rem + 0.3vw);
}

.swiper-tab-link .swiper-tab-content {
	margin-bottom: 0;
	padding-top: 10px;
    margin-left: 5px;
	line-height: 0;
	opacity: 0;
	vertical-align:middle;
	font-size: 1rem;
	transition: line-height 0.6s cubic-bezier(.4,0,.2,1), opacity .1s .1s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 768px) {
    .swiper-tab-link .swiper-tab-content {
        margin-left: 60px;
    }
}

.swiper-tab-link.active .swiper-tab-content {
	opacity: .8;
	line-height: var(--cnvs-line-height-content);
	transition: line-height 0.5s cubic-bezier(.4,0,.2,1), opacity .15s .15s cubic-bezier(.4,0,.2,1);
}

.swiper-tab-link.active {
	--swiper-tab-title: #000;
}

.back-shadow {
	---cnvs-back-shadow-size: 5px;
	---cnvs-back-shadow-bg: var(--cnvs-contrast-1000);
	---cnvs-back-shadow-color: var(--cnvs-contrast-0);
	position: relative;
	background-color: var(---cnvs-back-shadow-color);
	border: 1px solid var(---cnvs-back-shadow-bg);
	margin-left: var(---cnvs-back-shadow-size);
	margin-bottom: var(---cnvs-back-shadow-size);
	box-shadow: calc(-1 * var(---cnvs-back-shadow-size)) var(---cnvs-back-shadow-size) 0 var(---cnvs-back-shadow-bg);
}


.pricing-bg {
	position: absolute;
	left: 0;
	top: 0;
	transform: scale(120%);
	z-index: -1;
	opacity: 0.4;
	object-fit: cover;
	width: 100%;
}

.pts-left,
.pts-right {
	font-weight: 600 !important;
}


.toggle {
    --cnvs-toggle-base-color: var(--cnvs-heading-color);
    --cnvs-toggle-font-size: 1.125rem;
    --cnvs-toggle-title-color: var(--cnvs-heading-color);
    --cnvs-toggle-content-padding: 1.5rem 1.75rem;
    margin: 0 0 30px 0;
}

.toggle-header {
	border-radius: var(--cnvs-card-rounded);
	font-weight: 600;
}

.toggle-content {
	padding: 1.5rem 0;
	padding-bottom: .75rem;
	opacity: .8;
	margin-bottom: 0;
}

.toggle-closed {
	transition: .2s;
	opacity: .2;
}

.toggle-active .toggle-closed {
	display: block;
	transform: rotate(45deg);
	opacity: 1;
}

.pricing-tenure-switcher .btn-group {
    background-color: var(--cnvs-contrast-200);
    padding: 6px;
}

.pricing-tenure-switcher .btn-group .btn {
    --bs-btn-border-width: 0;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.425rem;
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-font-weight: 500;
    border-radius: var(--bs-border-radius-pill) !important;
}

.pricing-tenure-switcher .btn-check:checked + .btn {
    background-color: var(--cnvs-contrast-900);
	color: #FFF;
}
/* ----------------------------------------------------------------
	Canvas: Landing
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #3D80E4;
	--cnvs-themecolor-rgb: 61, 128, 228;
	--cnvs-secondary-color: #FF3A33;

	--cnvs-body-font: 'Source Sans Pro', sans-serif;
	--cnvs-primary-font: 'Roboto', sans-serif;
}

#header {
	--cnvs-primary-menu-font-weight: 500;
	--cnvs-primary-menu-font-size:	1rem;
	--cnvs-primary-menu-tt:	none;
	--cnvs-primary-menu-ls:	0;
	--cnvs-primary-menu-submenu-font-weight:	400;
	--cnvs-primary-menu-submenu-hover-font-weight: 500;
	--cnvs-primary-menu-submenu-tt:	none;
}

#header {
	--cnvs-primary-menu-submenu-font-size: 15px;
	--cnvs-primary-menu-submenu-color: #666;
	--cnvs-primary-menu-submenu-hover-bg: transparent;
}

.is-expanded-menu .menu-container > .menu-item {
	--cnvs-primary-menu-hover-color: #FFF !important;
	--cnvs-primary-menu-active-color: #FFF !important;
}

* {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.button,
.btn { transition: transform 0.45s cubic-bezier(0.2, 0.7, .3, 1); }

.button:hover,
.btn:hover { transform: translateX(-4px); }

.text-muted { color: #9BB0BF !important; }

.bgsecondary { background-color: var(--cnvs-secondary-color, #FF3A33); }

.sub-menu-container .menu-item > .menu-link i {
	margin-right: 15px;
	color: var(--cnvs-themecolor, #3D80E4);
	font-size: 18px;
}

.sub-menu-container:not(.mega-menu-column),
.mega-menu-content {
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 15px 18px;
	margin-top: -1px;
}

.slider-element {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.slide-imgs .iphone-img {
	position: relative;
	z-index: 1;
	width: 330px;
	-webkit-transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%);
	transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, .3, 1);
}

.slide-imgs:hover .iphone-img {
	-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%);
	transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%);
}

.slide-imgs .card-img {
	position: absolute;
	bottom: 10px;
	left: -90px;
	width: 360px;
	transition: opacity 0.65s cubic-bezier(0.2, 0.7, .3, 1);
	z-index: 1;
}

.slider-element  { z-index: 1; }

.section-clients {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 45px 0;
	background-color: #FFF;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.section-clients img { width: 100px; }

.section-features { padding: 120px }

.heading-block h2 {
	font-size: 52px;
	line-height: 1.3;
	font-weight: 900;
	letter-spacing: -1px;
}

.heading-block h3 {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
}

.features-items .feature-box .fbox-icon {
	--f-icon-size: 42px;
	position: relative;
	margin-bottom: 34px;
	width: 42px;
	height: 42px;
	width: var(--f-icon-size);
	height: var(--f-icon-size);
}

.features-items .feature-box .fbox-icon i {
	background-color: transparent !important;
	color: var(--cnvs-themecolor, #3D80E4);
	font-size: 42px;
	font-size: var(--f-icon-size);
}

.features-items .fbox-desc h3 {
	font-size: 19px;
	text-transform: none;
	font-weight: 800;
	letter-spacing: 0;
}

.owl-stage-outer { padding: 0; }

.owl-stage-outer .owl-stage-outer-bg {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	-webkit-background-size: contain;
	background-size: contain;
	background-image: url('images/section/device.png');
	background-repeat: no-repeat;
	background-position: center center;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.owl-item img {
	width: 100%;
	transform: scale(0.85);
	transition: transform .3s cubic-bezier(0.2, 0.7, .3, 1);
}

.owl-item.active.center img {
	transform: scale(0.95);
}

.owl-carousel .owl-dots .owl-dot {
	opacity: .3;
	margin-top: 40px;
	width: 20px;
	height: 5px;
	border-radius: 4px;
	transition: all .3s cubic-bezier(0.2, 0.7, .3, 1);
}

.owl-carousel .owl-dots .owl-dot.active { width: 50px; }

.pricing-table .card {
	border-radius: 20px;
	padding: 25px 40px;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: -1px -1px;
	background-size: 102% 160px;
	border-color: rgba(255, 255, 255, 0.3);
}

.pricing-table .card h2 { font-size: 48px; }

.pricing-table .card p {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6 !important;
}

.pricing-table .card .iconlist {
	font-size: 15px;
	font-weight: 500;
	color: #888;
	font-family: 'Roboto';
}

.pricing-table .card .iconlist li:not(:last-child) { margin-bottom: 7px; }

.toggle-wrap {
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 10px;
}

.toggle {
	padding: 18px 30px;
	margin-bottom: 0;
	background-color: rgba(255,255,255,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.15);
	transition: background-color .2s ease;
}

.toggle:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.toggle:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.toggle:last-child { border-bottom: 0; }

.toggle .togglet {
	font-size: 19px;
	padding-left: 0;
	font-weight: 600;
	color: #F5F5F5;
}

.toggle:hover { background-color: rgba(255,255,255,0.15); }

.device-video-wrap { position: relative; }

.device-video-wrap img {
	position: relative;
	margin: 0 auto;
	max-width: 1024px;
}

.device-video-wrap video {
	position: absolute;
	top: 35px;
	left: 33%;
	max-width: 40%;
	z-index: 1;
	transform: translate(-50%);
}

.device-video-wrap::before,
.dotted-bg::before {
	content: "";
	position: absolute;
	display: block;
	top: 40%;
	left: 35%;
	width: 110%;
	height: 120%;
	background-size: 12px 12px;
	background-position: center;
	transform: translate(-50%, -50%);
	background-image: radial-gradient(#3D80E4 14%, transparent 14%);
	-webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
	z-index: 0;
}

.dotted-bg::before { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 14%, transparent 14%); }
.dotted-bg.dotted-bg-dark::before { background-image: radial-gradient(rgba(4, 4, 4, 0.2) 14%, transparent 14%); }

.device-video-wrap > * {
	position: relative;
	z-index: 1;
}

.feature-box.fbox-plain .fbox-icon i { font-size: 36px; }

.testimonial .flexslider .slider-wrap img {
	display: block;
	width: auto;
	margin: 0 auto;
	max-height: 80px;
	margin-bottom: 30px;
}

.testimonial .testi-content p {
	font-size: 28px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5 !important;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

.dark .testimonial .testi-content p { color: #FFF; }
.dark .testimonial .testi-meta span { color: rgba(255, 255, 255, .5); }

.flex-prev,
.flex-next {
	width: 45px;
	height: 45px;
	border-radius: 50%;
}

.dark .flex-prev,
.dark .flex-next { background-color: #FFF !important; }

.flex-next i,
.flex-prev i {
	font-size: 24px;
	height: 45px;
	line-height: 45px;
	color: #111;
	text-shadow: none;
}

.flex-next i { margin-left: 2px; }
.flex-prev i { margin-left: -1px; }

.skills li {
	height: 12px;
	border-radius: 10px;
}

.skills li .progress { border-radius: 10px; }

.skills li .progress-percent {
	top: -38px;
	right: -60px;
	padding: 5px 10px;
	text-align: center;
	color: #FFF;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.24);
	height: auto;
	z-index: 2;
	font-size: 17px;
	line-height: 16px;
	text-shadow: none;
}

.text-nowrap {
	width: 600px;
	position: relative;
	z-index: 2;
	background-color: #FFF;
	transform: translateX(6%);
	padding: 0 20px 10px;
}

/* Responsive Device less than 992px (.device-md <)
-----------------------------------------------------------------*/
@media (max-width: 991.98px) {

	.display-3 {
		font-size: 7vw;
	}

	.slide-imgs .iphone-img {
		-webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.85) translateX(20%) translateY(0%) !important;
		transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.85) translateX(20%) translateY(0%) !important;
	}

	.slider-element { padding-top: 30px; }

	.section-features { padding: 60px }

	.testimonial .testi-content p { font-size: 20px; }

	.testimonial .testi-content p { max-width: 600px; }

	.sub-menu-container:not(.mega-menu-column),
	.mega-menu-content {
		border-radius: 0;
		margin-top: 0;
	}

	.dark .menu-container > .menu-item > .menu-link,
	.dark .sub-menu-container .menu-item > .menu-link { color: #FFF; }

	.text-nowrap {
		width: 100%;
		position: relative;
		z-index: 2;
		transform: none;
		padding: 0;
	}

}

/* Responsive Device less than 768px (.device-sm <)
-----------------------------------------------------------------*/
@media (max-width:767.98px) {

	.section-clients {
		position: relative;
		bottom: auto;
	}

	.testimonial .testi-content p { max-width: 300px; }

}
/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ── Primary nav text style — restored from the live production
     site's own custom.css (fetched from aioncalls.com directly for
     comparison). The theme's default nav text is uppercase, bold,
     letter-spaced — production overrides it to normal-case, lighter
     weight, no letter-spacing, which is what actually keeps every
     nav item (incl. "AIonChats Live" and "Industries We Serve") on
     one line at normal padding. This block replaces earlier
     speculative padding/width hacks that were band-aids for the
     wrong root cause. ── */
#header {
  --cnvs-primary-menu-padding-x: 20px;
  --cnvs-primary-menu-font-size: 1rem;
  --cnvs-primary-menu-tt: none;
  --cnvs-primary-menu-ls: 0;
  --cnvs-primary-menu-font-weight: 500;
  --cnvs-primary-menu-font: var(--cnvs-body-font);
  --cnvs-primary-menu-submenu-font-weight: 400;
  --cnvs-primary-menu-submenu-hover-font-weight: 500;
  --cnvs-primary-menu-submenu-tt: none;
  --cnvs-primary-menu-submenu-font-size: 15px;
  --cnvs-primary-menu-submenu-color: #666;
  --cnvs-primary-menu-submenu-hover-bg: transparent;
}
/* ── Dark header matching the site's real visual identity.
     Canvas's own header is a solid WHITE bar by default
     (`--cnvs-header-bg` traces to `--cnvs-contrast-0:#fff`), which sat
     as a flat, disconnected strip on top of every page's dark hero —
     "irrespective to the contrast of the page" is exactly the bug:
     the header never adapted to what's actually rendered beneath it.

     The theme ships a full dark palette for this (`.dark { --cnvs-
     contrast-*: ... }`), normally toggled by adding a `.dark` class
     somewhere on the page. Applying that class to <body> would recolor
     unrelated page content, so instead the same variables are
     redeclared here scoped to `#header` alone (a plain ID selector,
     no `.dark` class needed) — since CSS custom properties cascade to
     all descendants, every theme rule that already reads these tokens
     (the mobile hamburger bars, `.border-contrast-500` / `.text-
     contrast-500` on Log In + Get Demo, the dropdown panel background,
     the header's own hairline border) picks up correct dark-appropriate
     colors automatically, with zero page content touched. Tuned to our
     actual brand dark (#06060f/#0d0d1f), not the theme's neutral gray.

     IMPORTANT: fully opaque, not translucent. A semi-transparent
     `rgba(6,6,15,.72)` was tried first, but `body`'s own background is
     white (`--bs-body-bg`, no `.dark` class on <body>), so the
     translucent header blended with white behind it and rendered as
     flat gray instead of black — and the same white showed as a gap
     wherever the header met the page. Solid color avoids relying on
     whatever happens to be behind the header. ── */
#header {
  --cnvs-contrast-bg: #06060f;
  --cnvs-contrast-bg-offset: #0d0d1f;
  --cnvs-contrast-0: #000;
  --cnvs-contrast-100: #0a0a1c;
  --cnvs-contrast-200: #13132a;
  --cnvs-contrast-300: #23233f;
  --cnvs-contrast-400: #4a4a68;
  --cnvs-contrast-500: #7b7a9e;
  --cnvs-contrast-600: #a5a4c0;
  --cnvs-contrast-700: #c7c6db;
  --cnvs-contrast-800: #e4e3f5;
  --cnvs-contrast-900: #f1f0ff;
  --cnvs-contrast-1000: #fff;
  --cnvs-invert-contrast-0: #fff;
  --cnvs-invert-contrast-900: #0a0a1c;
  --cnvs-invert-contrast-1000: #000;
  --cnvs-contrast-rgb: 255, 255, 255;
  --cnvs-invert-contrast-rgb: 6, 6, 15;
  --cnvs-header-bg: #06060f;
  --cnvs-header-sticky-bg: #06060f;
  --cnvs-primary-menu-submenu-bg: #0d0d1f;
  --cnvs-primary-menu-submenu-color: #a5a4c0;
  /* Default derives this from --cnvs-contrast-rgb (now 255,255,255 so
     hamburger/borders read light-on-dark elsewhere), which would give
     a faint LIGHT line right where the header meets the page — the
     other half of the "gap". Override back to a dark, barely-there
     seam so the header reads as one continuous black surface. */
  --cnvs-header-border-color: rgba(0, 0, 0, 0.4);
  color: var(--cnvs-contrast-800);
}
/* Same dark base wherever the header hasn't painted yet (page load,
   fast scroll, the sliver above/behind a fixed header) — kills any
   white flash/gap site-wide without touching any other body rule. */
body {
  background-color: #06060f;
}
/* The actual source of the visible white band under the header:
   `#wrapper` (style.css) sets its own `background-color:
   var(--cnvs-body-bg)` — white — independently of <body>. Since
   `#wrapper` only contains the header plus `.header-wrap-clone` (the
   non-fixed spacer that reserves the header's real height in normal
   flow), `#wrapper` renders as a solid white bar exactly header-height
   tall, sitting right where the clone's reserved space is — a second,
   separate white surface from the one <body>'s background already
   fixed above. */
#wrapper {
  background-color: #06060f;
}
/* .button-border's text color comes from --cnvs-btn-border-color,
   which traces to --cnvs-btn-color-dark (a fixed dark gray, not one of
   the --cnvs-contrast-* tokens redeclared for #header above) — so
   Log In / Get Demo both rendered with near-invisible dark text on
   the new dark header. Explicit white fixes both. */
#header .header-misc .aa-nav-login,
#header .header-misc .get-started-btn {
  color: #fff !important;
}
#logo img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#logo a:hover img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  #logo img, #logo a:hover img { transition: none; transform: none; }
}

/* ── Nav hover/active color — site-wide, applies on every page.
     Previously forced to pure white (#FFF), which is invisible on
     any page whose header renders with a white/light background
     (confirmed on the blog page via screenshot: white text on a
     white header disappears on hover). Using the theme's own accent
     blue instead reads clearly on both light and dark header
     backgrounds, so every page's nav now hovers the same way. ── */
.is-expanded-menu .menu-container > .menu-item {
  --cnvs-primary-menu-hover-color: var(--cnvs-themecolor, #3D80E4) !important;
  --cnvs-primary-menu-active-color: var(--cnvs-themecolor, #3D80E4) !important;
}
.sub-menu-container .menu-item > .menu-link i {
  margin-right: 15px;
  color: var(--cnvs-themecolor, #3D80E4);
  font-size: 18px;
}

/* ── Hero/header overlap fix (index_new.html only, structurally):
     that page's #wrapper stays open around the entire body instead
     of closing right after </header> like every other page and
     production do — so its hero picks up the theme's ".include-header"
     negative top margin (meant to tuck the hero behind a TRANSPARENT
     header) against our SOLID header, and paints over its top edge.
     Cancel the negative margin whenever the header isn't transparent. ── */
.is-expanded-menu #header:not(.transparent-header) + .include-header {
  margin-top: 0 !important;
}

/* ── Sitewide header/hero overlap fix: `.sticky-header #header-wrap`
     is `position: fixed` from page load (not just after scrolling),
     so its parent `#wrapper` collapses to near-zero height. The very
     next element — every hero section using `.include-header` — then
     starts at the true top of the page and renders UNDER the fixed
     header instead of below it. `.include-header` is meant for a
     TRANSPARENT header (nav text overlaid on the hero image), but
     every page here uses a solid header, so the fixed bar visually
     covers/overlaps the top of the hero content (badge, heading).
     Push every such hero down by the real rendered header height
     instead — applies to every page sharing this markup pattern
     (`#wrapper` closing right after `</header>`, hero as its very
     next sibling), so this one rule fixes it everywhere at once. ── */
#wrapper + .slider-element.include-header {
  padding-top: var(--cnvs-header-height, 100px) !important;
}

/* ── Keep "Get Started" on the same row as the nav (additive, does
     NOT touch the nav-text-style block above). Our nav has more items
     than production's (we added "AIonChats Live" + the nested
     "Industries We Serve" groups), so #logo and .header-misc — both
     forced into a fixed 16.67% grid column (col-lg-2) regardless of
     their actual content size — still leave too little room for the
     button even with the correct compact nav text. Let both size to
     their real content instead, and stop the row from wrapping. ── */
@media (min-width: 992px) {
  #header #logo {
    flex: 0 0 auto;
    width: auto;
    /* #logo also carries Bootstrap's `me-lg-auto` (margin-right: auto
       !important;), which claims ALL the header row's leftover flex
       space right after the logo — that's what was pushing the nav
       (and everything after it) away from the logo/toward the center
       instead of sitting close on the left. Needs !important to
       actually beat it; a plain override here was silently losing. */
    margin-right: 1.5rem !important;
  }
  #header .header-misc {
    flex: 0 0 auto;
    width: auto;
  }
  #header .header-row {
    flex-wrap: nowrap;
  }
  /* Center the nav links in whatever space is left between the logo
     and the Log In/Get Demo buttons, instead of hugging either side.
     Logo and header-misc both have a fixed (non-auto) margin, so this
     is the only auto margin in the row — flexbox splits ALL leftover
     space evenly between nav's left and right edges, centering it
     regardless of how wide the logo or button group happen to be. */
  #header nav.primary-menu {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Log In / Get Demo — the header's only two action buttons (Sign
     Up was folded out; /login already reaches the signup panel via
     "Create one free" and the /login?form=signup deep link), sharing
     one treatment (bg-color, always-on solid blue). The shared
     selector below adds the lift + glow on hover to both, plus equal
     min-width/centering so they read as one uniform pair. Compact
     padding + a smaller min-width keep them proportionate to the nav
     row instead of dominating it. Font-size still comes from
     `.button`'s own default (--cnvs-btn-fontsize: 1rem, no per-button
     override), matching --cnvs-primary-menu-font-size: 1rem on the nav
     links — button and nav text stay the same size and font even
     though the buttons themselves are now smaller. ── */
#header .header-misc .aa-nav-login,
#header .header-misc .get-started-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.75rem;
  box-sizing: border-box;
  --cnvs-btn-padding-x: 1rem;
  --cnvs-btn-padding-y: 0.4rem;
  transition: transform 0.25s ease, background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.25s ease;
}
#header .header-misc .aa-nav-login:hover,
#header .header-misc .get-started-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--cnvs-themecolor-rgb), 0.22);
}

/* Buttons sat flush against the right edge of the header (`ms-auto`
   ate all the leftover flex space); now that "Company" folds three
   nav items into one dropdown, that gap would only grow. A fixed
   margin instead of `auto` keeps the button group anchored just after
   the nav — visually in the header's center block — rather than
   pinned to the far edge. */
#header .aa-header-misc {
  margin-left: 2rem !important;
}

@media (max-width: 575px) {
  #header .get-started-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.85rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #header .header-misc .aa-nav-login,
  #header .header-misc .get-started-btn { transition: none; }
}

/* ── "Industries We Serve" dropdown: AIonCalls and AIonChats shown as
     two side-by-side columns in one panel, both visible immediately —
     not nested flyout submenus needing a second hover.

     IMPORTANT: the theme has a higher-specificity rule —
     ".is-expanded-menu .menu-container > .menu-item:not(.mega-menu)
     .sub-menu-container:not([class*=col-]):not([class=col])" — that
     force-sets width back to its 240px default on ANY submenu whose
     class doesn't contain "col-"/"col". That compound selector beats
     a plain single class on specificity alone, so width (and display,
     to be safe) need !important here to actually win. This is also
     exactly why the layout was rendering as one vertical column
     instead of two side-by-side ones — the panel was silently being
     clamped back to 240px, too narrow for a flex row to show. ── */
.aion-industries-panel {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 720px !important;
  max-width: 92vw !important;
  padding: 16px 0 !important;
}
.aion-industries-col {
  padding: 0 20px;
  list-style: none;
  min-width: 0;
}
.aion-industries-col.aion-col-calls  { flex: 0 0 34% !important; }
.aion-industries-col.aion-col-chats  { flex: 0 0 66% !important; }
.aion-industries-channels {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.aion-industries-col + .aion-industries-col {
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.aion-industries-col-title {
  font-family: var(--cnvs-primary-menu-submenu-font, inherit);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cnvs-themecolor, #3D80E4);
  padding: 4px 10px 12px;
}
.aion-industries-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aion-industries-list .menu-item {
  border-top: 0 !important;
}
.aion-industries-list .menu-item > .menu-link {
  border-radius: 8px;
  padding-left: 10px !important;
  padding-right: 10px !important;
  transition: background-color .15s ease, color .15s ease;
}
.aion-industries-list .menu-item > .menu-link:hover {
  background-color: rgba(61, 128, 228, .08);
}
/* ── Multi-Agent Workspace's children (Omnichannel Deployment,
     For Agencies) nested directly beneath it, instead of sitting in
     their own grid column — keeps the whole mega-menu to exactly two
     columns (AIonCalls | AIonChats). ── */
.aion-industries-sublist {
  list-style: none;
  margin: 2px 0 6px 14px;
  padding: 0 0 2px 12px;
  border-left: 2px solid rgba(61, 128, 228, .25);
}
.aion-industries-sublist .menu-item > .menu-link {
  font-size: 13px;
  opacity: .82;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.aion-industries-sublist .menu-item > .menu-link:hover {
  opacity: 1;
}

@media (max-width: 991px) {
  .aion-industries-panel {
    display: block !important;
    width: 100% !important;
  }
  .aion-industries-col.aion-col-calls,
  .aion-industries-col.aion-col-chats {
    flex: 1 1 100% !important;
  }
  .aion-industries-col + .aion-industries-col {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 8px;
    padding-top: 8px;
  }
}
   /* ═══════════════════════════════════════ */
       /* CUSTOM STYLES — PRESERVED FROM ORIGINAL */
  /* ═══════════════════════════════════════ --> */
 
    :root { --cnvs-primary-font: "DM Sans", sans-serif; }

    .block-tab-2 .nav-tabs {
      --bs-nav-tabs-border-width: 0px;
      --bs-nav-link-color: #111;
      --bs-nav-link-hover-color: var(--bs-danger);
    }
    .block-tab-2 .nav-tabs .nav-item .nav-link {
      position: relative; font-size: 15px;
      font-weight: 400; padding: 0 0 20px 0;
    }
    .block-tab-2 .nav-tabs .nav-item .nav-link i {
      display: block; font-size: 38px; margin: 0 0 10px 0;
    }
    .block-tab-2 .nav-tabs .nav-item .nav-link.active { top: 0; }
    .block-tab-2 .nav-tabs .nav-item .nav-link.active i { color: var(--bs-danger); }
    .block-tab-2 .nav-tabs .nav-item .nav-link.active::after {
      content: ''; position: absolute; width: 6px; height: 6px;
      bottom: 0; left: 50%; margin-left: -3px;
      border-radius: 50%; background: var(--bs-danger);
    }

    .promo-users { opacity: 0.1; --cnvs-promo-users-img-pos-x: 0; --cnvs-promo-users-img-pos-y: 0; }
    .promo-users img { position: absolute; top: var(--cnvs-promo-users-img-pos-y); left: var(--cnvs-promo-users-img-pos-x); bottom: var(--cnvs-promo-users-img-pos-y); right: var(--cnvs-promo-users-img-pos-x); }
    .promo-users img:nth-child(1) { --cnvs-promo-users-img-pos-x: 13%; --cnvs-promo-users-img-pos-y: -6%; }
    .promo-users img:nth-child(2) { --cnvs-promo-users-img-pos-x: 4%; --cnvs-promo-users-img-pos-y: 40%; }
    .promo-users img:nth-child(3) { left: auto; --cnvs-promo-users-img-pos-x: 29%; --cnvs-promo-users-img-pos-y: -10%; }
    .promo-users img:nth-child(4) { left: auto; top: auto; --cnvs-promo-users-img-pos-x: 20%; --cnvs-promo-users-img-pos-y: 95%; }
    .promo-users img:nth-child(5) { top: auto; --cnvs-promo-users-img-pos-x: 17%; --cnvs-promo-users-img-pos-y: 3%; }
    .promo-users img:nth-child(6) { top: auto; --cnvs-promo-users-img-pos-x: 91%; --cnvs-promo-users-img-pos-y: 83%; }
    .promo-users img:nth-child(7) { top: auto; --cnvs-promo-users-img-pos-x: 90%; --cnvs-promo-users-img-pos-y: 17%; }
    .promo-users img:nth-child(8) { top: auto; --cnvs-promo-users-img-pos-x: 94%; --cnvs-promo-users-img-pos-y: 34%; }
    .promo-users img:nth-child(9) { top: auto; --cnvs-promo-users-img-pos-x: 94%; --cnvs-promo-users-img-pos-y: 51%; }
    .promo-users img:nth-child(10) { top: auto; --cnvs-promo-users-img-pos-x: 73%; --cnvs-promo-users-img-pos-y: 6%; }
    .promo-users img:nth-child(11) { --cnvs-promo-users-img-pos-x: 82%; --cnvs-promo-users-img-pos-y: 80%; }
    .promo-users img:nth-child(12) { --cnvs-promo-users-img-pos-x: 65%; --cnvs-promo-users-img-pos-y: 81%; }
    .promo-users img:nth-child(13) { left: auto; --cnvs-promo-users-img-pos-x: 3%; --cnvs-promo-users-img-pos-y: 23%; }
    .promo-users img:nth-child(14) { left: auto; top: auto; --cnvs-promo-users-img-pos-x: 12%; --cnvs-promo-users-img-pos-y: 92%; }
    .promo-users img:nth-child(15) { top: auto; --cnvs-promo-users-img-pos-x: 17%; --cnvs-promo-users-img-pos-y: 3%; }
    @media (min-width: 768px) { .promo-users { opacity: 1; } }

    .trans { background: transparent; }

    .gradient-bg {
      background: url("https://www.aioncalls.com/static/assets/images/aioncalls_landing_background_dark.png") center center / cover no-repeat;
    }

    /* ── HERO H1 FIX — forces visibility regardless of preload-lcp ── */
    h1.preload-lcp, h1.custhead {
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      color: #ffffff !important;
    }

    .btn-demo {
      background: linear-gradient(45deg, #ff6b35, #e91e63);
      color: white; border: none; border-radius: 25px;
      padding: 10px 25px; font-weight: 600; transition: all 0.3s ease;
    }
    .btn-demo:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(233,30,99,0.3); color: white;
    }

    .hero-section { text-align: center; position: relative; }
    .hero-title {
      font-size: 3.5rem; font-weight: 700;
      color: #ffffff; margin-bottom: 60px; line-height: 1.2;
    }

    .cta-button {
      background: linear-gradient(45deg, #004b6c, #0074BD, #9c27b0);
      color: white; border: none; border-radius: 50px;
      padding: 18px 40px; font-size: 1.2rem; font-weight: 600;
      transition: all 0.4s ease; position: relative;
      z-index: 10; box-shadow: 0 15px 35px #004b6c78;
    }
    .cta-button:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 50px rgba(233,30,99,0.4); color: white;
    }

    .bottom-section { padding: 60px 0 40px; text-align: center; }
    .bottom-text {
      color: rgba(255,255,255,0.9); font-size: 1.1rem;
      line-height: 1.6; max-width: 600px; margin: 0 auto 50px;
    }

    .full-line { display: block; width: 100%; clear: both; }

    .block-sticky-cards,
    .block-sticky-cards .section { overflow: visible; }
    .block-sticky-cards .sticky-section + .sticky-section { margin-top: 5vh; }
    @media (min-width: 992px) {
      .block-sticky-cards .sticky-section {
        --sticky-top-gap: 30px;
        position: sticky; z-index: 2;
        top: calc(80px + var(--sticky-top-gap));
      }
      .block-sticky-cards .sticky-section + .sticky-section { margin-top: 20vh; }
    }

    .dark #header-wrap:not(.not-dark) #logo [class^="logo-"],
    .dark .header-row:not(.not-dark) #logo [class^="logo-"] { display: none; }
    .dark #header-wrap:not(.not-dark) #logo .logo-dark,
    .dark .header-row:not(.not-dark) #logo .logo-dark { display: flex; }

    .feature-box-border-vertical .feature-box { position: relative; }
    .feature-box-border-vertical .feature-box:not(.noborder)::before,
    .feature-box-border-vertical .fbox-active.feature-box:not(.noborder)::after {
      content: ""; position: absolute; top: 0; left: 35px;
      width: 3px; height: 100%; background-color: var(--bs-gray-200);
    }
    .feature-box-border-vertical .fbox-icon i,
    .feature-box-border-vertical .fbox-border.fbox-light .fbox-icon i {
      position: relative; z-index: 5; text-align: center;
      box-shadow: 0 0 0 6px #FFF; background-color: #FFF !important;
    }
    .feature-box-border-vertical .fbox-active.feature-box .fbox-icon i,
    .feature-box-border-vertical .fbox-active.feature-box .fbox-border.fbox-light .fbox-icon i,
    .feature-box-border-vertical .fbox-active.feature-box:not(.noborder)::after {
      background-color: var(--bs-primary) !important; color: #FFF;
    }

    .cust-iconlist { font-size: 15px; font-weight: 500; color: black !important; font-family: inherit !important; }
    .cust-iconlist li { flex-wrap: nowrap !important; padding-bottom: 5px; }

    .gradient-font-cust {
      background-image: linear-gradient(to right, #4a00e0, #8e2de2) !important;
    }

    .feature_box_bg { background-color: #025391 !important; }

    .fbox-plain.fbox-sm { margin-bottom: 40px; }
    .fbox-icon { top: 3px; }
    .fbox-plain.fbox-sm h3 {
      text-transform: none; font-weight: 600;
      font-size: 1.125rem; letter-spacing: 0;
    }

    .is-expanded-menu .menu-container > .menu-item {
      --cnvs-primary-menu-hover-color: var(--cnvs-themecolor, #3D80E4) !important;
      --cnvs-primary-menu-active-color: var(--cnvs-themecolor, #3D80E4) !important;
    }

    #scheduler-wrapper {
      background: #f6f7f9; border-radius: 16px; overflow: hidden;
      box-shadow: 0 12px 30px rgba(0,0,0,.12); animation: fadeIn .3s ease;
    }
    .scheduler-header {
      background: #fff; padding: 12px 16px;
      display: flex; justify-content: space-between;
      align-items: center; border-bottom: 1px solid #eee;
    }
    .scheduler-note { font-size: 0.9rem; color: #444; }
    #scheduler-iframe { width: 100%; height: 720px; border: none; background: #f6f7f9; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
 
  /* ══════════════════════════════════════
   AIONCALLS BY THE NUMBERS
   Stats Grid — Responsive
══════════════════════════════════════ */
:root {
    --aoc-bg:         #06060f;
    --aoc-surface:    #0d0d1f;
    --aoc-surface2:   #13132a;
    --aoc-border:     rgba(124,58,237,0.15);
    --aoc-border-w:   rgba(255,255,255,0.07);
    --aoc-purple:     #7c3aed;
    --aoc-purple-lt:  #9d6bff;
    --aoc-purple-d:   rgba(124,58,237,0.12);
    --aoc-purple-g:   rgba(124,58,237,0.25);
    --aoc-cyan:       #06b6d4;
    --aoc-cyan-d:     rgba(6,182,212,0.10);
    --aoc-green:      #10b981;
    --aoc-green-d:    rgba(16,185,129,0.10);
    --aoc-amber:      #f59e0b;
    --aoc-red:        #ef4444;
    --aoc-white:      #f1f0ff;
    --aoc-muted:      #7b7a9e;
    --ff-head:        'Space Grotesk', sans-serif;
    --ff-body:        'Plus Jakarta Sans', sans-serif;
  }

  /* ── Base ── */
  body {
    background: var(--aoc-bg) !important;
    font-family: var(--ff-body) !important;
    overflow-x: hidden;
  }
  html { overflow-x: hidden; }

  .aoc-section    { padding: 90px 0; }
  .aoc-section-sm { padding: 60px 0; }

  /* ── Typography helpers ── */
  .aoc-h2 {
    font-family: var(--ff-head);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--aoc-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
  }
  .aoc-h2 .hl  { color: var(--aoc-purple-lt); }
  .aoc-h2 .hlc { color: var(--aoc-cyan); }
  .aoc-h2 .hlg { color: var(--aoc-green); }
  .aoc-lead {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.85;
    color: var(--aoc-muted);
  }
  .aoc-lead strong { color: var(--aoc-white); font-weight: 500; }

  /* ── Kicker pill ── */
  .aoc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--aoc-purple-lt);
    border: 1px solid rgba(157,107,255,0.25);
    padding: 0.3rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.25rem;
  }
  .aoc-kicker-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--aoc-purple-lt);
    animation: aoc-dot 2s infinite;
  }
  @keyframes aoc-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(157,107,255,0.4); }
    50%      { box-shadow: 0 0 0 6px transparent; }
  }

  /* ── Buttons ── */
  .btn-aoc-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--aoc-purple);
    color: #fff !important;
    font-family: var(--ff-head);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    text-decoration: none !important;
    border: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }
  .btn-aoc-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
  }
  .btn-aoc-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--aoc-purple-g);
    color: #fff !important;
  }
  .btn-aoc-primary:hover::after { transform: translateX(100%); }

  .btn-aoc-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--aoc-white) !important;
    font-family: var(--ff-head);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.85rem 1.75rem;
    border-radius: 10px;
    border: 1px solid var(--aoc-border-w);
    text-decoration: none !important;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
  }
  .btn-aoc-ghost:hover {
    border-color: rgba(157,107,255,0.4);
    background: var(--aoc-purple-d);
    color: var(--aoc-white) !important;
  }

  /* ── Surface cards ── */
  .aoc-card {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
  }
  .aoc-card:hover {
    border-color: rgba(124,58,237,0.35);
    transform: translateY(-3px);
  }
  .aoc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-purple) 50%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .aoc-card:hover::before { transform: scaleX(1); }

  .aoc-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--aoc-purple-d);
    border: 1px solid rgba(124,58,237,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--aoc-purple-lt);
    margin-bottom: 1.25rem;
    transition: box-shadow 0.3s;
  }
  .aoc-card:hover .aoc-icon {
    box-shadow: 0 0 20px var(--aoc-purple-g);
  }

.aoc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.aoc-stat-cell {
  background: #0d0d1f;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background 0.2s;
}

.aoc-stat-cell:hover {
  background: #13132a;
}

.aoc-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #f1f0ff;
  line-height: 1;
  margin-bottom: 0.35rem;
}

/* Colour variants */
.aoc-stat-num .hl  { color: #9d6bff; }
.aoc-stat-num .hlg { color: #10b981; }
.aoc-stat-num .hlc { color: #06b6d4; }

.aoc-stat-label {
  font-size: 0.78rem;
  color: #7b7a9e;
  line-height: 1.4;
  font-weight: 400;
}

.aoc-stat-sub {
  font-size: 0.65rem;
  color: rgba(123, 122, 158, 0.55);
  margin-top: 0.25rem;
}

/* Compliance cell badges */
.aoc-comply {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.22rem 0.65rem;
  border-radius: 50px;
}

/* ── Responsive breakpoints ── */

/* Tablet landscape — 2×4 grid */
@media (max-width: 1199px) {
  .aoc-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .aoc-stat-num {
    font-size: 2rem;
  }
  .aoc-stat-cell {
    padding: 1.75rem 1rem;
  }
}

/* Tablet portrait — 2×4 */
@media (max-width: 991px) {
  .aoc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 12px;
  }
  .aoc-stat-num {
    font-size: 2.2rem;
  }
  .aoc-stat-cell {
    padding: 1.75rem 1.25rem;
  }
}

/* Mobile landscape — 2×4 */
@media (max-width: 767px) {
  .aoc-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 10px;
  }
  .aoc-stat-num {
    font-size: 1.9rem;
  }
  .aoc-stat-label {
    font-size: 0.72rem;
  }
  .aoc-stat-sub {
    display: none;
  }
  .aoc-stat-cell {
    padding: 1.5rem 1rem;
  }
}

/* Mobile portrait — 1×8 single column */
@media (max-width: 479px) {
  .aoc-stats-grid {
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
  }
  .aoc-stat-num {
    font-size: 1.75rem;
  }
  .aoc-stat-cell {
    padding: 1.25rem 0.85rem;
  }
}

  .aoc-hero-lead strong { color: var(--aoc-white); font-weight: 500; }

  /* Price badge */
  .aoc-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.25);
    color: var(--aoc-green);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.75rem;
  }

  /* Geo flags strip */
  .aoc-geo-strip {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }
  .aoc-geo-flag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(241,240,255,0.45);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.22rem 0.65rem;
    border-radius: 6px;
  }

  /* Compliance badges */
  .aoc-comply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--aoc-green);
    background: var(--aoc-green-d);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
  }

  /* ════════════════════════════════
     TRUST TICKER
  ════════════════════════════════ */
  .aoc-trust-bar {
    background: var(--aoc-surface);
    border-top: 1px solid var(--aoc-border);
    border-bottom: 1px solid var(--aoc-border);
    padding: 16px 0;
    overflow: hidden;
  }
  .aoc-trust-scroll {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: aoc-ticker 28s linear infinite;
  }
  .aoc-trust-scroll:hover { animation-play-state: paused; }
  @keyframes aoc-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .aoc-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--aoc-muted);
  }
  .aoc-trust-item i { color: var(--aoc-purple-lt); font-size: 0.8rem; }
  .aoc-trust-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--aoc-border);
    flex-shrink: 0;
  }

  /* ════════════════════════════════
     STATS SECTION
  ════════════════════════════════ */
  .aoc-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--aoc-border);
    border: 1px solid var(--aoc-border);
    border-radius: 16px;
    overflow: hidden;
  }
  .aoc-stat-cell {
    background: var(--aoc-surface);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: background 0.2s;
  }
  .aoc-stat-cell:hover { background: var(--aoc-surface2); }
  .aoc-stat-num {
    font-family: var(--ff-head);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--aoc-white);
    line-height: 1;
    margin-bottom: 0.35rem;
  }
  .aoc-stat-num .hl { color: var(--aoc-purple-lt); }
  .aoc-stat-num .hlg { color: var(--aoc-green); }
  .aoc-stat-num .hlc { color: var(--aoc-cyan); }
  .aoc-stat-label {
    font-size: 0.78rem;
    color: var(--aoc-muted);
    line-height: 1.4;
    font-weight: 400;
  }
  .aoc-stat-sub {
    font-size: 0.65rem;
    color: rgba(123,122,158,0.6);
    margin-top: 0.25rem;
  }
  @media (max-width: 767px) {
    .aoc-stats-grid { grid-template-columns: repeat(2,1fr); }
  }

  /* ════════════════════════════════
     COMPARISON TABLE
  ════════════════════════════════ */
  .aoc-table-wrap {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 16px;
    overflow: hidden;
    overflow-x: auto;
  }
  .aoc-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
  }
  .aoc-table thead th {
    font-family: var(--ff-head);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--aoc-border);
    color: var(--aoc-muted);
    text-align: center;
  }
  .aoc-table thead th:first-child { text-align: left; }
  .aoc-table thead th.col-aoc {
    color: var(--aoc-purple-lt);
    background: rgba(124,58,237,0.07);
  }
  .aoc-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
  }
  .aoc-table tbody tr:hover { background: rgba(255,255,255,0.02); }
  .aoc-table tbody tr:last-child { border-bottom: none; }
  .aoc-table td {
    padding: 0.85rem 1.25rem;
    font-size: 0.85rem;
    color: var(--aoc-muted);
    text-align: center;
    vertical-align: middle;
  }
  .aoc-table td:first-child {
    text-align: left;
    color: var(--aoc-white);
    font-weight: 500;
  }
  .aoc-table td.col-aoc { background: rgba(124,58,237,0.04); }
  .ic-yes { color: var(--aoc-green);  font-size: 0.9rem; }
  .ic-no  { color: var(--aoc-red);    font-size: 0.9rem; }
  .ic-meh { color: var(--aoc-amber);  font-size: 0.85rem; }

  /* ════════════════════════════════
     HOW IT WORKS — 3 STEPS
  ════════════════════════════════ */
  .aoc-step-card {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
    height: 100%;
  }
  .aoc-step-card:hover {
    border-color: rgba(124,58,237,0.35);
    transform: translateY(-4px);
  }
  .aoc-step-num {
    font-family: var(--ff-head);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--aoc-purple-lt);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .aoc-step-num-badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--aoc-purple-d);
    border: 1px solid rgba(124,58,237,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--aoc-purple-lt);
  }
  .aoc-step-title {
    font-family: var(--ff-head);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--aoc-white);
    margin-bottom: 0.75rem;
  }
  .aoc-step-text {
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--aoc-muted);
    margin-bottom: 1.25rem;
  }
  .aoc-tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .aoc-tag {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aoc-cyan);
    background: var(--aoc-cyan-d);
    border: 1px solid rgba(6,182,212,0.2);
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
  }

  /* Step connector line */
  .aoc-step-line {
    height: 2px;
    background: linear-gradient(90deg, var(--aoc-purple), transparent);
    margin: 2rem 0;
    opacity: 0.3;
  }

  /* ════════════════════════════════
     RECEPTIONIST COMPARISON
  ════════════════════════════════ */
  .aoc-vs-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .aoc-vs-col {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 14px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
  }
  .aoc-vs-col.winner {
    border-color: rgba(124,58,237,0.3);
  }
  .aoc-vs-col.winner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-purple) 50%, transparent);
  }
  .aoc-vs-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .aoc-vs-label.loser  { color: var(--aoc-muted); }
  .aoc-vs-label.winner { color: var(--aoc-purple-lt); }
  .aoc-vs-price {
    font-family: var(--ff-head);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  .aoc-vs-price.red { color: var(--aoc-red); }
  .aoc-vs-price.grn { color: var(--aoc-green); }
  .aoc-vs-per {
    font-size: 0.78rem;
    color: var(--aoc-muted);
    margin-bottom: 1.5rem;
  }
  .aoc-vs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
  .aoc-vs-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--aoc-muted);
    line-height: 1.45;
  }
  .aoc-vs-list li i { margin-top: 2px; flex-shrink: 0; }
  .aoc-vs-list li strong { color: var(--aoc-white); }
  @media(max-width:767px) { .aoc-vs-wrap { grid-template-columns: 1fr; } }

  /* ════════════════════════════════
     INDUSTRY CARDS
  ════════════════════════════════ */
  .aoc-ind-card {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 14px;
    padding: 1.75rem;
    text-decoration: none;
    display: block;
    height: 100%;
    transition: border-color 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
  }
  .aoc-ind-card:hover {
    border-color: rgba(124,58,237,0.35);
    transform: translateY(-3px);
  }
  .aoc-ind-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-purple) 50%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }
  .aoc-ind-card:hover::after { transform: scaleX(1); }
  .aoc-ind-emoji {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
    line-height: 1;
  }
  .aoc-ind-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aoc-purple-lt);
    margin-bottom: 0.5rem;
  }
  .aoc-ind-title {
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--aoc-white);
    margin-bottom: 0.6rem;
    line-height: 1.25;
  }
  .aoc-ind-text {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--aoc-muted);
    margin-bottom: 1rem;
  }
  .aoc-ind-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .aoc-ind-tag {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aoc-green);
    background: var(--aoc-green-d);
    border: 1px solid rgba(16,185,129,0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
  }

  /* ════════════════════════════════
     HIPAA COMPLIANCE BLOCK
  ════════════════════════════════ */
  .aoc-hipaa-band {
    background: var(--aoc-surface);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
  }
  .aoc-hipaa-band::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-green) 50%, transparent);
  }
  .aoc-comply-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--aoc-green);
    background: var(--aoc-green-d);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
  }

  /* ════════════════════════════════
     OUTBOUND STATS
  ════════════════════════════════ */
  .aoc-outbound-stat {
    text-align: center;
    padding: 1.75rem;
    background: var(--aoc-surface2);
    border: 1px solid var(--aoc-border);
    border-radius: 12px;
  }
  .aoc-outbound-stat-num {
    font-family: var(--ff-head);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--aoc-white);
    line-height: 1;
    margin-bottom: 0.35rem;
  }
  .aoc-outbound-stat-num span { color: var(--aoc-purple-lt); }
  .aoc-outbound-stat-label {
    font-size: 0.75rem;
    color: var(--aoc-muted);
    font-weight: 400;
  }

  /* ════════════════════════════════
     MULTILINGUAL FLAGS STRIP
  ════════════════════════════════ */
  .aoc-flags-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
  }
  .aoc-flag {
    font-size: 1.6rem;
    cursor: default;
    transition: transform 0.2s;
    display: inline-block;
  }
  .aoc-flag:hover { transform: scale(1.3); }

  /* ════════════════════════════════
     AUDIO DEMO CARDS
  ════════════════════════════════ */
  .aoc-audio-card {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
    transition: border-color 0.3s;
  }
  .aoc-audio-card:hover { border-color: rgba(124,58,237,0.3); }
  .aoc-audio-title {
    font-family: var(--ff-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--aoc-white);
    margin-bottom: 0.5rem;
  }
  .aoc-audio-desc {
    font-size: 0.82rem;
    color: var(--aoc-muted);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }
  .aoc-audio-player {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    accent-color: var(--aoc-purple);
    background: transparent;
    color-scheme: dark;
  }
  audio::-webkit-media-controls-panel { background: var(--aoc-surface2); }

  /* Play button style */
  .aoc-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--aoc-purple-d);
    border: 1px solid rgba(124,58,237,0.3);
    color: var(--aoc-purple-lt);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  .aoc-play-btn:hover {
    background: rgba(124,58,237,0.2);
    border-color: rgba(124,58,237,0.5);
    color: var(--aoc-purple-lt);
  }

  /* ════════════════════════════════
     FAQ
  ════════════════════════════════ */
  .aoc-faq-item { border-bottom: 1px solid var(--aoc-border-w); }
  .aoc-faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    text-align: left;
  }
  .aoc-faq-q-text {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--aoc-white);
    line-height: 1.4;
    font-family: var(--ff-body);
  }
  .aoc-faq-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--aoc-border-w);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--aoc-muted);
    transition: border-color 0.2s, color 0.2s, transform 0.3s;
  }
  .aoc-faq-item.open .aoc-faq-icon {
    border-color: var(--aoc-purple-lt);
    color: var(--aoc-purple-lt);
    transform: rotate(45deg);
  }
  .aoc-faq-a {
    display: none;
    padding-bottom: 1.25rem;
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--aoc-muted);
  }
  .aoc-faq-item.open .aoc-faq-a { display: block; }

  /* ════════════════════════════════
     CTA BAND
  ════════════════════════════════ */
  .aoc-cta-band {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: var(--aoc-surface);
    border-top: 1px solid var(--aoc-border);
  }
  .aoc-cta-band::before {
    content: '';
    position: absolute;
    top: -180px; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(124,58,237,0.15) 0%, transparent 70%);
    pointer-events: none;
  }
  .aoc-cta-h2 {
    font-family: var(--ff-head);
    font-size: clamp(2rem,4.5vw,3.8rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--aoc-white);
    margin-bottom: 0.75rem;
  }
  .aoc-cta-h2 .grad {
    background: linear-gradient(135deg, #9d6bff, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Form */
  .aoc-form-card {
    background: #0d0d1f;
    border: 1px solid var(--aoc-border);
    border-radius: 16px;
    padding: 2.25rem;
    position: relative;
    overflow: hidden;
  }
  .aoc-form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-purple) 50%, transparent);
  }
  .aoc-input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--aoc-border-w);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: var(--ff-body);
    font-size: 0.88rem;
    color: var(--aoc-white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .aoc-input:focus {
    border-color: rgba(124,58,237,0.5);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
  }
  .aoc-input::placeholder { color: rgba(123,122,158,0.5); }
  .aoc-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aoc-muted);
    display: block;
    margin-bottom: 0.3rem;
  }

  /* ════════════════════════════════
     ANIMATIONS
  ════════════════════════════════ */
  @keyframes aoc-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
  @keyframes aoc-spin  { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @keyframes aoc-spinr { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }
  @keyframes aoc-pulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
  @keyframes aoc-glow  { 0%,100%{opacity:.1;} 50%{opacity:.3;} }
  @keyframes aoc-blink { 0%,85%,100%{opacity:1;} 92%{opacity:.1;} }

  /* ════════════════════════════════
     SPEED COMPARISON BLOCK
  ════════════════════════════════ */
  .aoc-speed-col {
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
  }
  .aoc-speed-col.aoc-winner {
    border-color: rgba(124,58,237,0.3);
    position: relative;
    overflow: hidden;
  }
  .aoc-speed-col.aoc-winner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aoc-purple) 50%, transparent);
  }
  .aoc-speed-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .aoc-speed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
  .aoc-speed-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--aoc-muted);
    line-height: 1.5;
  }
  .aoc-speed-list li i { flex-shrink: 0; margin-top: 2px; }

  /* ════════════════════════════════
     RESPONSIVE
  ════════════════════════════════ */
  @media (max-width: 991px) {
    .aoc-section { padding: 60px 0; }
    .aoc-hero-svg-panel { display: none; }
  }

/* ============================================================
     AIOnCalls — Footer
     Namespace : aoc-ft-  (zero conflicts)
     Canvas classes: footer, id="footer", id="copyrights"
                     container — ALL preserved
     All content unchanged · dark theme matched to page
============================================================ -



/* ════════════════════════════════════════════════════════════
   RULE 1+3  FOOTER WRAPPER — ID scoped
════════════════════════════════════════════════════════════ */

#footer.aoc-ft-footer {
  background: #06060f !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

/* Top gradient border line */
#footer.aoc-ft-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124,58,237,.5) 30%,
    rgba(6,182,212,.4)  70%,
    transparent);
  pointer-events: none;
}

/* Subtle dot grid */
#footer.aoc-ft-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124,58,237,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

#footer.aoc-ft-footer > * {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   RULE 1  MAIN FOOTER BODY — aoc-ft- prefix
════════════════════════════════════════════════════════════ */

.aoc-ft-body {
  padding: 60px 0 40px;
  border-bottom: 1px solid rgba(124,58,237,.15);
}

/* Logo + tagline */
.aoc-ft-logo-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #f1f0ff;
  letter-spacing: -.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .65rem;
}
.aoc-ft-logo-mark:hover { color: #9d6bff; }

.aoc-ft-logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9d6bff;
  animation: aoc-ft-dot 2s infinite;
}

/* RULE 2 — keyframe prefixed aoc-ft- */
@keyframes aoc-ft-dot {
  0%,100% { box-shadow: 0 0 0 0 rgba(157,107,255,.5); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.aoc-ft-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem;
  font-weight: 300;
  color: #7b7a9e;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 280px;
}

/* Compliance badges */
.aoc-ft-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.aoc-ft-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.22);
  padding: .2rem .6rem;
  border-radius: 4px;
}
.aoc-ft-badge.aoc-ft-purple {
  color: #9d6bff;
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.22);
}

/* Social icons */
.aoc-ft-socials {
  display: flex;
  gap: .6rem;
}
.aoc-ft-social-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7b7a9e;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.aoc-ft-social-btn:hover {
  background: rgba(124,58,237,.2);
  border-color: rgba(157,107,255,.4);
  color: #9d6bff;
  transform: translateY(-2px);
}

/* ── Column headings ── */
.aoc-ft-col-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9d6bff;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 7px;
}
.aoc-ft-col-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(124,58,237,.2);
}

/* ── Nav links ── */
.aoc-ft-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.aoc-ft-links li a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .85rem;
  font-weight: 300;
  color: #7b7a9e;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease, gap .2s ease;
}
.aoc-ft-links li a i {
  font-size: .55rem;
  color: rgba(124,58,237,.5);
  transition: color .2s ease;
}
.aoc-ft-links li a:hover {
  color: #f1f0ff;
  gap: 10px;
}
.aoc-ft-links li a:hover i {
  color: #9d6bff;
}

/* ── Contact info ── */
.aoc-ft-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: .85rem;
}
.aoc-ft-contact-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  color: #9d6bff;
  flex-shrink: 0;
  margin-top: 1px;
}
.aoc-ft-contact-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .83rem;
  font-weight: 300;
  color: #7b7a9e;
  line-height: 1.55;
}
.aoc-ft-contact-text a {
  color: #9d6bff;
  text-decoration: none;
  transition: color .2s ease;
}
.aoc-ft-contact-text a:hover { color: #c4a8ff; }

/* Geo markets pill row */
.aoc-ft-geo-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}
.aoc-ft-geo-pill {
  font-size: .68rem;
  font-weight: 500;
  color: rgba(241,240,255,.45);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: .18rem .6rem;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   RULE 3+8  CANVAS copyrights OVERRIDE
   Scoped to #copyrights inside #footer.aoc-ft-footer
════════════════════════════════════════════════════════════ */

#footer.aoc-ft-footer #copyrights {
  background: transparent !important;
  border-top: 1px solid rgba(124,58,237,.15) !important;
  padding: 1.5rem 0 !important;
}

/* Address block */
#footer.aoc-ft-footer #copyrights address {
  font-style: normal;
  font-size: .82rem;
  font-weight: 300;
  color: #7b7a9e;
  line-height: 1.8;
  margin-bottom: .65rem;
  text-align: center;
}
#footer.aoc-ft-footer #copyrights address strong {
  color: #f1f0ff;
  font-weight: 700;
}
#footer.aoc-ft-footer #copyrights address a {
  color: #9d6bff;
  text-decoration: none;
  transition: color .2s ease;
}
#footer.aoc-ft-footer #copyrights address a:hover {
  color: #c4a8ff;
}

/* Copyright line */
.aoc-ft-copy-line {
  font-size: .78rem;
  color: rgba(123,122,158,.55);
  text-align: center;
  margin-bottom: .65rem;
}

/* Legal nav */
.aoc-ft-legal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.aoc-ft-legal-nav a {
  font-size: .78rem;
  font-weight: 400;
  color: #7b7a9e;
  text-decoration: none;
  transition: color .2s ease;
}
.aoc-ft-legal-nav a:hover { color: #9d6bff; }
.aoc-ft-legal-nav .aoc-ft-sep {
  color: rgba(124,58,237,.3);
  font-size: .7rem;
}

/* ════════════════════════════════════════════════════════════
   RULE 6  RESPONSIVE — all scoped
════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .aoc-ft-body { padding: 50px 0 35px; }
}

@media (max-width: 767px) {
  .aoc-ft-body { padding: 40px 0 30px; }
  .aoc-ft-logo-col { margin-bottom: 2.5rem; }
  .aoc-ft-tagline  { max-width: 100%; }
}
/* ============================================================
   AIOnCalls — Outbound Section Responsive CSS
   Scoped entirely to #outbound — zero conflicts
   Fixes:
   · Stat grid col-4 → col-6 on mobile (2-col layout)
   · Stat numbers font size scaling
   · SVG pipeline diagram scaling + readability
   · Feature list icon alignment on small screens
   · Section padding reduction on mobile
   · kicker + heading size scaling
   · CTA button full width on mobile
============================================================ */


/* ════════════════════════════════════════════════════════════
   BASE — applies at all sizes, scoped to #outbound
════════════════════════════════════════════════════════════ */

/* Stat cell base */
#outbound .aoc-outbound-stat {
  background: var(--aoc-surface, #0d0d1f);
  border: 1px solid var(--aoc-border, rgba(124,58,237,.15));
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}
#outbound .aoc-outbound-stat:hover {
  background: var(--aoc-surface2, #13132a);
  border-color: rgba(124,58,237,.3);
}

#outbound .aoc-outbound-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--aoc-white, #f1f0ff);
  line-height: 1;
  margin-bottom: .3rem;
}
#outbound .aoc-outbound-stat-num span {
  color: var(--aoc-purple-lt, #9d6bff);
}

#outbound .aoc-outbound-stat-label {
  font-size: .72rem;
  color: var(--aoc-muted, #7b7a9e);
  font-weight: 400;
  line-height: 1.4;
}

/* Feature list items — enforce consistent alignment */
#outbound .aoc-outbound-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--aoc-white, #f1f0ff);
}
#outbound .aoc-outbound-feat-item i {
  color: var(--aoc-purple-lt, #9d6bff);
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 1rem;
}

/* SVG pipeline wrapper */
#outbound .aoc-outbound-pipeline {
  background: var(--aoc-surface, #0d0d1f);
  border: 1px solid var(--aoc-border, rgba(124,58,237,.15));
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  overflow: hidden;
}
#outbound .aoc-outbound-pipeline svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}
#outbound .aoc-outbound-pipeline p {
  font-size: .72rem;
  color: var(--aoc-muted, #7b7a9e);
  margin: .5rem 0 0;
}


/* ════════════════════════════════════════════════════════════
   LARGE TABLET  ≤ 1199px
════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {

  #outbound .aoc-outbound-stat-num {
    font-size: 1.5rem;
  }

  #outbound .aoc-outbound-pipeline {
    padding: 1.25rem;
  }

}


/* ════════════════════════════════════════════════════════════
   TABLET  ≤ 991px
   Columns stack · stat grid stays 3-col but numbers shrink
════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

  /* Section padding */
  #outbound.aoc-section {
    padding: 65px 0;
  }

  /* Left col gets bottom margin when stacked */
  #outbound .col-lg-5 {
    margin-bottom: 2.5rem;
  }

  #outbound .aoc-outbound-stat {
    padding: 1rem .75rem;
  }

  #outbound .aoc-outbound-stat-num {
    font-size: 1.35rem;
  }

  #outbound .aoc-outbound-stat-label {
    font-size: .68rem;
  }

  /* Subheading above stats */
  #outbound .aoc-outbound-subheading {
    font-size: 1.1rem !important;
    margin-bottom: 1.25rem !important;
  }

}


/* ════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE  ≤ 767px
   Stat grid → 2 columns  ·  SVG simplifies
════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Section padding */
  #outbound.aoc-section {
    padding: 55px 0;
  }

  /* ── Stat grid: col-4 → col-6 (2 per row) ── */
  /*
     The HTML uses Bootstrap .col-4 inside .row.g-3
     We override the column width here so each stat
     takes half the row instead of a third
  */
  #outbound .row.g-3 > .col-4 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  #outbound .aoc-outbound-stat {
    padding: 1.1rem .85rem;
  }

  #outbound .aoc-outbound-stat-num {
    font-size: 1.45rem;
  }

  /* The two "text-only" stats (24/7 and 9-6pm) — keep readable */
  #outbound .aoc-outbound-stat-num[style*="1.8rem"] {
    font-size: 1.5rem !important;
  }

  /* Kicker */
  #outbound .aoc-kicker {
    font-size: .65rem;
  }

  /* Heading */
  #outbound .aoc-h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  /* Sub-heading above stats */
  #outbound .aoc-outbound-subheading {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  /* Feature list items — tighten gap slightly */
  #outbound .aoc-outbound-feat-item,
  #outbound .d-flex.flex-column > div {
    gap: 8px !important;
    font-size: .88rem !important;
  }

  /* CTA button — full width */
  #outbound .btn-aoc-primary {
    width: 100%;
    justify-content: center;
  }

  /* Pipeline diagram padding */
  #outbound .aoc-outbound-pipeline {
    padding: 1rem .75rem;
  }

}


/* ════════════════════════════════════════════════════════════
   MOBILE PORTRAIT  ≤ 479px
   Stat grid → still 2-col  ·  numbers scale down more
════════════════════════════════════════════════════════════ */

@media (max-width: 479px) {

  /* Section padding */
  #outbound.aoc-section {
    padding: 45px 0;
  }

  /* Stat cells — compact */
  #outbound .aoc-outbound-stat {
    padding: .9rem .65rem;
    border-radius: 10px;
  }

  #outbound .aoc-outbound-stat-num {
    font-size: 1.25rem;
    margin-bottom: .2rem;
  }

  #outbound .aoc-outbound-stat-num[style*="1.8rem"] {
    font-size: 1.25rem !important;
  }

  #outbound .aoc-outbound-stat-label {
    font-size: .64rem;
    line-height: 1.35;
  }

  /* Heading */
  #outbound .aoc-h2 {
    font-size: clamp(1.35rem, 7.5vw, 1.75rem) !important;
    letter-spacing: -.015em !important;
  }

  /* Feature list */
  #outbound .d-flex.flex-column {
    gap: .6rem !important;
  }
  #outbound .d-flex.flex-column > div {
    font-size: .85rem !important;
    gap: 8px !important;
  }

  /* Lead paragraph */
  #outbound .aoc-lead {
    font-size: .9rem !important;
  }

  /* SVG pipeline — hide sub-labels on very small screens */
  #outbound .aoc-outbound-pipeline svg text[y="112"] {
    display: none;
  }

  /* Pipeline description text */
  #outbound .aoc-outbound-pipeline p {
    font-size: .68rem;
  }

  /* Row gap reduction */
  #outbound .row.g-3 {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem;
  }

  /* Section g-5 gap reduction when stacked */
  #outbound .row.g-5 {
    --bs-gutter-y: 2rem;
  }

}


/* ════════════════════════════════════════════════════════════
   VERY SMALL  ≤ 359px  (Galaxy Fold etc)
════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {

  #outbound .aoc-outbound-stat-num {
    font-size: 1.1rem;
  }

  #outbound .aoc-outbound-stat-label {
    font-size: .6rem;
  }

  /* On the absolute smallest screens, go 1-column for stats */
  #outbound .row.g-3 > .col-4 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #outbound .aoc-outbound-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: .85rem 1rem;
  }

  #outbound .aoc-outbound-stat-num {
    margin-bottom: 0;
    font-size: 1.3rem;
  }

  #outbound .aoc-outbound-stat-label {
    font-size: .72rem;
    text-align: right;
    max-width: 55%;
  }

}
html, body {
    overflow-x: hidden !important;
    max-width: 100%;
}

* {
    box-sizing: border-box;
}
/* ═══════════════════════════════════════════
     PAGE CSS — cs- namespace
     "Case Studies" page — brand-new dedicated page fixing the
     previously-broken "Case Study" nav link (was pointing at a
     nonexistent #section-industry anchor).
     Reuses the site-wide aoc- design tokens (colors, fonts) for
     visual consistency, with its own cs- prefix for page-specific
     layout only — no existing CSS touched or overridden.
     RULES:
       RULE 1  Custom classes  → cs- prefix
       RULE 2  Keyframes       → cs- prefix
       RULE 3  No bare names   → never .card / .container
       RULE 4  Responsive      → scoped inside @media
═══════════════════════════════════════════ */

:root {
  --cs-bg:        #06060f;
  --cs-surface:   rgba(255,255,255,.03);
  --cs-border:    rgba(255,255,255,.09);
  --cs-purple:    #7c3aed;
  --cs-purplelt:  #9d6bff;
  --cs-cyan:      #06b6d4;
  --cs-green:     #10b981;
  --cs-amber:     #f59e0b;
  --cs-white:     #f1f0ff;
  --cs-muted:     #7b7a9e;
  --ff-head: 'Space Grotesk', sans-serif;
  --ff-body: 'Plus Jakarta Sans', sans-serif;
}

/* ═══ RULE 2 — KEYFRAMES ═══ */
@keyframes cs-float      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes cs-dot-pulse  { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes cs-count-glow { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px currentColor; } }

/* ═══ RULE 1 — 1. HERO ═══ */
#cs-hero .slider-inner {
  background:
    radial-gradient(ellipse 65% 55% at 72% 40%, rgba(16,185,129,.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 12% 78%, rgba(124,58,237,.08) 0%, transparent 55%),
    linear-gradient(160deg, #04040e 0%, #070714 40%, #0a0a1c 100%) !important;
}
.cs-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 3rem; align-items: center; padding: 90px 0 50px; }
.cs-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cs-green);
  border: 1px solid rgba(16,185,129,.32); background: rgba(16,185,129,.09);
  border-radius: 50px; padding: .45rem 1rem; margin-bottom: 1.5rem;
}
.cs-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cs-green); position: relative; }
.cs-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--cs-green);
  animation: cs-dot-pulse 1.6s infinite;
}
.cs-hero-h1 { font-family: var(--ff-head); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.35rem); line-height: 1.14; color: var(--cs-white); margin-bottom: 1.25rem; }
.cs-hero-h1 .cs-grad {
  background: linear-gradient(135deg, var(--cs-green) 0%, var(--cs-cyan) 50%, var(--cs-purplelt) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cs-hero-lead { font-family: var(--ff-body); font-size: 1.05rem; line-height: 1.7; color: rgba(241,240,255,.78); max-width: 560px; margin: 0 0 1.75rem; }
.cs-hero-lead strong { color: var(--cs-white); font-weight: 600; }

.cs-hero-visual { display: flex; justify-content: center; }

.cs-trust-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.cs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: .78rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 50px; border: 1px solid transparent;
}
.cs-badge.g { color: var(--cs-green); background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); }
.cs-badge.a { color: var(--cs-amber); background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); }
.cs-badge.c { color: var(--cs-cyan); background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.25); }

.cs-btn-p, .cs-btn-g {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-size: .88rem; font-weight: 700;
  padding: .85rem 1.85rem; border-radius: 10px; text-decoration: none !important;
  transition: transform .2s, box-shadow .2s, color .2s, background .2s;
}
.cs-btn-p { background: var(--cs-green); color: #052014 !important; }
.cs-btn-p:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16,185,129,.4); }
.cs-btn-g { background: transparent; color: var(--cs-white) !important; border: 1px solid var(--cs-border); }
.cs-btn-g:hover { border-color: rgba(157,107,255,.45); background: rgba(124,58,237,.06); }

/* ═══ RULE 1 — SHARED BILLING BANNER (voice + chat ROI calculators) ═══ */
.cs-shared-billing {
  display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto 2.5rem;
  background: rgba(157,107,255,.07); border: 1px solid rgba(157,107,255,.22);
  border-radius: 14px; padding: 1rem 1.4rem;
}
.cs-shared-billing i { font-size: 1.3rem; color: var(--cs-purplelt); flex-shrink: 0; }
.cs-shared-billing span { font-family: var(--ff-body); font-size: .86rem; color: rgba(241,240,255,.82); line-height: 1.6; }
.cs-shared-billing b { color: var(--cs-white); font-weight: 700; }
.cs-roi-col-label {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--ff-head); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cs-white); margin-bottom: 1.1rem;
}
.cs-roi-col-label i { color: var(--cs-green); font-size: .95rem; }

/* ═══ RULE 1 — SHARED SECTION STYLES ═══ */
.cs-sec { padding: 90px 0; }
.cs-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-head); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cs-green);
  border: 1px solid rgba(16,185,129,.28); background: rgba(16,185,129,.08);
  border-radius: 50px; padding: .35rem .9rem; margin-bottom: 1rem;
}
.cs-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cs-green); }
.cs-h2 { font-family: var(--ff-head); font-weight: 700; color: var(--cs-white); font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; }
.cs-lead { font-family: var(--ff-body); font-weight: 300; color: rgba(241,240,255,.72); line-height: 1.75; font-size: .98rem; }

/* ═══ RULE 1 — STATS GRID (by the numbers) ═══ */
.cs-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--cs-border); border-radius: 16px; overflow: hidden; border: 1px solid var(--cs-border); }
.cs-stat-cell { background: #08080f; padding: 1.75rem 1.25rem; text-align: center; }
.cs-stat-num { font-family: var(--ff-head); font-weight: 700; font-size: 2rem; color: var(--cs-white); display: block; line-height: 1.1; animation: cs-count-glow 4s infinite; }
.cs-stat-num .hl  { color: var(--cs-purplelt); }
.cs-stat-num .hlc { color: var(--cs-cyan); }
.cs-stat-num .hlg { color: var(--cs-green); }
.cs-stat-label { font-family: var(--ff-head); font-size: .82rem; font-weight: 700; color: rgba(241,240,255,.9); margin-top: .5rem; }
.cs-stat-sub { font-family: var(--ff-body); font-size: .74rem; color: var(--cs-muted); margin-top: .25rem; }

/* ═══ RULE 1 — INDUSTRY RESULT CARDS ═══ */
.cs-ind-card {
  display: block; background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: 16px; padding: 1.75rem; height: 100%; text-decoration: none !important;
  transition: border-color .3s, transform .3s;
}
.cs-ind-card:hover { border-color: rgba(16,185,129,.4); transform: translateY(-4px); }
.cs-ind-icon {
  width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.25);
  color: var(--cs-green); font-size: 1.35rem; margin-bottom: 1.1rem;
}
.cs-ind-card h3 { font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; color: var(--cs-white); margin-bottom: .6rem; }
.cs-ind-row { display: flex; gap: 8px; margin-bottom: .5rem; align-items: baseline; }
.cs-ind-row-label { font-family: var(--ff-head); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-muted); flex-shrink: 0; width: 78px; }
.cs-ind-row-text { font-family: var(--ff-body); font-size: .85rem; color: rgba(241,240,255,.82); line-height: 1.6; }
.cs-ind-impact { display: inline-flex; align-items: center; gap: 6px; margin-top: .9rem; font-family: var(--ff-head); font-size: .78rem; font-weight: 700; color: var(--cs-green); }
.cs-ind-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 1rem; font-family: var(--ff-body); font-size: .8rem; color: var(--cs-cyan); }

/* ═══ RULE 1 — AUDIO PROOF SECTION (reuses shared .aoc-audio-* classes) ═══ */
.cs-audio-wrap .aoc-audio-card { height: 100%; }

/* ═══ RULE 1 — CHANNEL STRIP (AIonChats results) ═══ */
.cs-channel-card {
  display: block; background: var(--cs-surface); border: 1px solid var(--cs-border);
  border-radius: 16px; padding: 1.5rem; height: 100%; text-decoration: none !important;
  transition: border-color .3s, transform .3s;
}
.cs-channel-card:hover { border-color: rgba(6,182,212,.4); transform: translateY(-4px); }
.cs-channel-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .75rem; }
.cs-channel-card i.cs-channel-icon { font-size: 1.4rem; color: var(--cs-cyan); display: block; margin: 0; }
.cs-channel-badge {
  font-family: var(--ff-head); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .18rem .5rem; border-radius: 50px; white-space: nowrap;
}
.cs-channel-badge.live { color: var(--cs-green); background: rgba(16,185,129,.14); }
.cs-channel-card h3 { font-family: var(--ff-head); font-weight: 700; font-size: .98rem; color: var(--cs-white); margin-bottom: .5rem; }
.cs-channel-card p { font-family: var(--ff-body); font-size: .84rem; color: var(--cs-muted); line-height: 1.6; margin: 0 0 .9rem; }
.cs-channel-stat { display: flex; align-items: baseline; gap: 5px; font-family: var(--ff-head); font-size: .78rem; font-weight: 700; color: var(--cs-cyan); margin-bottom: .9rem; }
.cs-channel-stat span { font-family: var(--ff-body); font-size: .74rem; font-weight: 400; color: var(--cs-muted); }
.cs-channel-more { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ff-body); font-size: .78rem; color: var(--cs-cyan); }

/* ═══ RULE 1 — FAQ ═══ */
.cs-faq-item { border-bottom: 1px solid var(--cs-border); padding: 1.1rem 0; }
.cs-faq-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; background: none; border: none; padding: 0; text-align: left;
  cursor: pointer; font-family: var(--ff-head); font-weight: 600; font-size: .95rem; color: var(--cs-white);
}
.cs-faq-icon i { color: var(--cs-green); transition: transform .3s; flex-shrink: 0; }
.cs-faq-item.cs-faq-open .cs-faq-icon i { transform: rotate(45deg); }
.cs-faq-answer { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.cs-faq-item.cs-faq-open .cs-faq-answer { max-height: 400px; }
.cs-faq-answer-inner { font-family: var(--ff-body); font-size: .87rem; color: var(--cs-muted); line-height: 1.7; padding-top: .75rem; }

/* ═══ RULE 5 — RESPONSIVE ═══ */
@media (max-width: 991px) {
  .cs-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-hero-grid { grid-template-columns: 1fr; padding: 60px 0 40px; gap: 2rem; text-align: center; }
  .cs-hero-visual { order: -1; max-width: 380px; margin: 0 auto; width: 100%; }
  .cs-hero-lead { margin: 0 auto 1.75rem; }
  .cs-trust-badges, .d-flex.gap-3.flex-wrap { justify-content: center; }
}

@media (max-width: 767px) {
  .cs-sec { padding: 55px 0; }
  .cs-h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .cs-ind-card, .cs-channel-card { padding: 1.35rem; }
  .cs-stat-cell { padding: 1.25rem .9rem; }
  .cs-stat-num { font-size: 1.6rem; }
  .cs-hero-visual { max-width: 320px; }
}

@media (max-width: 575px) {
  .cs-stats-grid { grid-template-columns: 1fr 1fr; }
  .cs-trust-badges { gap: .4rem; }
  .cs-btn-p, .cs-btn-g { width: 100%; justify-content: center; padding: .8rem 1.2rem; }
  .cs-ind-icon { width: 44px; height: 44px; font-size: 1.15rem; }
  .cs-faq-btn { font-size: .88rem; }
  .cs-live-badge { font-size: .66rem; }
  .cs-ind-row { flex-direction: column; gap: 2px; }
  .cs-ind-row-label { width: auto; }
}

/* ═══════════════════════════════════════════
     ROI CALCULATOR — reused verbatim (markup, ids and JS) from the
     homepage's #aoch-roi-wrap component. That component's CSS lives
     only inline in index_new.html, not in any shared stylesheet, so
     it's duplicated here rather than left unstyled on this page.
     Kept under its original aoch-roi- names (not renamed to cs-)
     since the homepage's <script> block queries these exact
     ids/classes — renaming would silently break the calculator.
═══════════════════════════════════════════ */
#aoch-roi-wrap { width: 100%; max-width: 448px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; }
.aoch-roi-card { background: rgba(11,11,28,.96); border: 1px solid rgba(124,58,237,.22); border-radius: 18px; overflow: hidden; position: relative; }
.aoch-roi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #7c3aed 50%, transparent); pointer-events: none; z-index: 1; }
.aoch-roi-body { padding: 1.35rem 1.4rem; }
.aoch-roi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.aoch-roi-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Grotesk', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9d6bff; background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.22); padding: .22rem .7rem; border-radius: 50px; }
.aoch-roi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; animation: aoch-roi-dot-pulse 1.6s infinite; }
@keyframes aoch-roi-dot-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(16,185,129,.5); } 50% { opacity:.6; box-shadow:0 0 0 5px transparent; } }
.aoch-roi-avg-hint { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .68rem; font-weight: 300; color: rgba(241,240,255,.28); }
.aoch-roi-avg-hint b { color: #10b981; font-weight: 600; }
.aoch-roi-slider-row { margin-bottom: 1.1rem; }
.aoch-roi-sl-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.aoch-roi-sl-label { font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 600; color: rgba(241,240,255,.65); }
.aoch-roi-sl-val { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 800; color: #9d6bff; white-space: nowrap; }
.aoch-roi-range { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; outline: none; cursor: pointer; margin-bottom: .28rem; background: rgba(124,58,237,.18); }
.aoch-roi-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #7c3aed; border: 3px solid #f1f0ff; box-shadow: 0 0 10px rgba(124,58,237,.5); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.aoch-roi-range::-webkit-slider-thumb:hover { box-shadow: 0 0 20px rgba(124,58,237,.8); transform: scale(1.12); }
.aoch-roi-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #7c3aed; border: 3px solid #f1f0ff; cursor: pointer; }
.aoch-roi-sl-hints { display: flex; justify-content: space-between; }
.aoch-roi-sl-hint { font-family: 'Space Grotesk', sans-serif; font-size: .56rem; color: rgba(241,240,255,.2); }
.aoch-roi-select { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(124,58,237,.2); border-radius: 9px; padding: .55rem .75rem; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 600; color: #9d6bff; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' fill='none'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%239d6bff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; margin-bottom: 1.2rem; transition: border-color .2s; }
.aoch-roi-select option { background: #0d0d1f; color: #f1f0ff; }
.aoch-roi-select:focus { border-color: rgba(157,107,255,.5); }
.aoch-roi-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(124,58,237,.2) 50%, transparent); margin: 0 0 1.1rem; }
.aoch-roi-headline { background: linear-gradient(135deg, rgba(124,58,237,.11) 0%, rgba(6,182,212,.06) 100%); border: 1px solid rgba(157,107,255,.2); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; text-align: center; position: relative; overflow: hidden; }
.aoch-roi-headline::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.04) 50%, transparent 65%); transform: translateX(-100%); pointer-events: none; }
.aoch-roi-headline.aoch-roi-shimmer::after { animation: aoch-roi-sweep .5s ease forwards; }
@keyframes aoch-roi-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.aoch-roi-sentence { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 300; color: rgba(241,240,255,.4); margin-bottom: .3rem; line-height: 1.5; }
.aoch-roi-big-num { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #10b981; margin-bottom: .25rem; transition: color .3s ease; }
.aoch-roi-explain { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 300; color: rgba(241,240,255,.3); line-height: 1.5; }
.aoch-roi-explain b { color: #9d6bff; font-weight: 600; }
.aoch-roi-outcomes { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-bottom: .9rem; }
.aoch-roi-oc { border-radius: 11px; padding: .8rem .65rem; text-align: center; transition: transform .2s ease; }
.aoch-roi-oc:hover { transform: translateY(-2px); }
.aoch-roi-oc.aoch-roi-oc-money { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.2); }
.aoch-roi-oc.aoch-roi-oc-leads { background: rgba(6,182,212,.07); border: 1px solid rgba(6,182,212,.2); }
.aoch-roi-oc.aoch-roi-oc-time { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.2); }
.aoch-roi-oc-icon { font-size: 1.15rem; display: block; margin-bottom: .3rem; line-height: 1; }
.aoch-roi-oc-num { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 800; line-height: 1; display: block; margin-bottom: .2rem; }
.aoch-roi-oc-money .aoch-roi-oc-num { color: #10b981; }
.aoch-roi-oc-leads .aoch-roi-oc-num { color: #06b6d4; }
.aoch-roi-oc-time .aoch-roi-oc-num { color: #f59e0b; }
.aoch-roi-oc-money .aoch-roi-oc-icon { color: #10b981; }
.aoch-roi-oc-leads .aoch-roi-oc-icon { color: #06b6d4; }
.aoch-roi-oc-time .aoch-roi-oc-icon { color: #f59e0b; }
.aoch-roi-oc-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .58rem; font-weight: 400; line-height: 1.35; display: block; }
.aoch-roi-oc-money .aoch-roi-oc-lbl { color: rgba(16,185,129,.6); }
.aoch-roi-oc-leads .aoch-roi-oc-lbl { color: rgba(6,182,212,.6); }
.aoch-roi-oc-time .aoch-roi-oc-lbl { color: rgba(245,158,11,.6); }
.aoch-roi-vs { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; margin-bottom: .9rem; }
.aoch-roi-vs-side { flex: 1; text-align: center; }
.aoch-roi-vs-cost { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 800; line-height: 1; display: block; margin-bottom: .15rem; }
.aoch-roi-vs-cost.red { color: rgba(239,68,68,.85); }
.aoch-roi-vs-cost.grn { color: #10b981; }
.aoch-roi-vs-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .6rem; font-weight: 300; color: rgba(241,240,255,.28); display: block; line-height: 1.4; }
.aoch-roi-vs-mid { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex-shrink: 0; }
.aoch-roi-vs-pill { font-family: 'Space Grotesk', sans-serif; font-size: .62rem; font-weight: 700; color: #10b981; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); padding: .18rem .5rem; border-radius: 50px; white-space: nowrap; }
.aoch-roi-vs-arr { font-size: .75rem; color: rgba(241,240,255,.15); }
.aoch-roi-cta-row { display: flex; align-items: center; gap: .8rem; }
.aoch-roi-cta-btn { display: inline-flex; align-items: center; gap: 7px; background: #7c3aed; color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 700; padding: .78rem 1.3rem; border-radius: 50px; text-decoration: none; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s, color .2s; }
.aoch-roi-cta-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transform: translateX(-100%); transition: transform .45s ease; }
.aoch-roi-cta-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(124,58,237,.5); }
.aoch-roi-cta-btn:hover::after { transform: translateX(100%); }
.aoch-roi-cta-note { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .68rem; font-weight: 300; color: rgba(241,240,255,.27); line-height: 1.55; }
.aoch-roi-cta-note b { color: rgba(241,240,255,.48); font-weight: 500; }
.aoch-roi-trust { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding-top: .3rem; justify-content: center; }
.aoch-roi-trust-item { display: flex; align-items: center; gap: 5px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .67rem; color: rgba(241,240,255,.27); }
.aoch-roi-trust-item i { color: #10b981; font-size: .68rem; }
@keyframes aoch-roi-flash { from { opacity: .35; } to { opacity: 1; } }
.aoch-roi-flash { animation: aoch-roi-flash .26s ease forwards; }

@media (max-width: 1199px) {
  #aoch-roi-wrap { max-width: 415px; }
  .aoch-roi-big-num { font-size: 2.7rem; }
}
@media (max-width: 991px) {
  #aoch-roi-wrap { max-width: 100%; }
}
@media (max-width: 575px) {
  .aoch-roi-body { padding: 1.1rem; }
  .aoch-roi-big-num { font-size: 2.35rem; }
  .aoch-roi-cta-row { flex-direction: column; align-items: stretch; }
  .aoch-roi-cta-btn { justify-content: center; }
}
@media (max-width: 380px) {
  .aoch-roi-oc { padding: .65rem .45rem; }
  .aoch-roi-oc-num { font-size: .92rem; }
  .aoch-roi-oc-lbl { font-size: .55rem; }
}