/*
 * TechDotBit — AI theme layer
 * Loaded after modern.css. Gives the site an "AI company" look: deep-space
 * dark surfaces, neural violet/cyan/green gradients, glass cards with
 * glowing borders and a technical display font. Remove this file's enqueue
 * in functions.php to fall back to the plain modern design.
 */

:root {
	--ai-bg: #060913;
	--ai-bg-2: #0b1022;
	--ai-surface: rgba(255, 255, 255, .035);
	--ai-surface-2: rgba(255, 255, 255, .06);
	--ai-border: rgba(148, 163, 184, .14);
	--ai-text: #c7cde0;
	--ai-muted: #8b93ad;
	--ai-violet: #10b981;
	--ai-indigo: #3ead3c;
	--ai-cyan: #22d3ee;
	--ai-green: #34d399;
	/* Text-safe (WCAG AA on white text) versions for filled buttons */
	--ai-btn: linear-gradient(110deg, #3ead3c 0%, #3ead3c 100%);
	--ai-grad: linear-gradient(110deg, #3ead3c 0%, #10b981 45%, #22d3ee 100%);
	--ai-glow: 0 0 0 1px rgba(62, 173, 60, .35), 0 10px 36px -10px rgba(62, 173, 60, .6);
	--ai-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;

	--tdb-grad: var(--ai-grad);
	--tdb-accent: #23873a;
	--tdb-accent-hover: #2f8f2d;
	--tdb-accent-soft: #e8f5ec;
	--lqd-color-primary: #23873a;
	--lqd-h6-color: #23873a;
	--lqd-heading-font-family: var(--ai-display);
	--tdb-navy: var(--ai-bg);
}

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--ai-display); letter-spacing: -.025em; }
::selection { background: var(--ai-indigo); color: #fff; }
:focus-visible { outline-color: var(--ai-indigo); }

/* ---------- Eyebrow labels: gradient chip ---------- */
.ld-fancy-heading h6, h6.ld-fh-element {
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(62, 173, 60, .25);
	background: rgba(62, 173, 60, .06);
	color: #23873a;
	font-size: 11.5px !important;
	letter-spacing: .16em;
}
.ld-fancy-heading h6::before, h6.ld-fh-element::before {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--ai-grad);
	box-shadow: 0 0 10px rgba(62, 173, 60, .8);
}

/* ---------- Buttons: gradient + glow ---------- */
.btn.btn-solid.bg-primary,
.wpcf7-submit,
.search-form .search-submit {
	background: var(--ai-btn) !important;
	background-size: 160% 100% !important;
	border: 0 !important;
	box-shadow: var(--ai-glow) !important;
	transition: background-position .5s var(--tdb-ease-out, ease), box-shadow .3s, transform .2s !important;
}
.btn.btn-solid.bg-primary:hover,
.wpcf7-submit:hover,
.search-form .search-submit:hover {
	background-position: 100% 0 !important;
	box-shadow: 0 0 0 1px rgba(34, 211, 238, .45), 0 14px 46px -10px rgba(34, 211, 238, .55) !important;
	transform: translateY(-1px);
}
@media (min-width: 992px) {
	.lqd-head-sec .menu > li:last-child a {
		background: var(--ai-btn) !important;
		box-shadow: var(--ai-glow) !important;
	}
	.lqd-head-sec .menu > li:last-child a:hover { background: var(--ai-btn) !important; filter: brightness(1.12); }
}

/* ---------- Header ---------- */
.main-header, .is-stuck .lqd-head-sec-wrap, .lqd-mobile-sec, .lqd-mobile-sec-inner { background: rgba(6, 9, 19, .82) !important; }
.main-header {
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent !important;
	border-image: linear-gradient(90deg, transparent, rgba(16, 185, 129, .45), rgba(34, 211, 238, .45), transparent) 1;
}
.lqd-head-sec .menu > li > a:after { background: var(--ai-grad); }
.lqd-head-sec .menu > li.menu-item-has-children > .sub-menu {
	background: rgba(11, 16, 34, .96);
	border-color: var(--ai-border);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.lqd-head-sec .menu .sub-menu a { color: var(--ai-text) !important; }
.lqd-head-sec .menu .sub-menu a:hover { color: #fff !important; }
.lqd-head-sec .menu .sub-menu a::before { background: var(--ai-grad) !important; }
.lqd-head-sec .service-menu > .sub-menu > li > a { border-color: var(--ai-border) !important; color: #fff !important; }
.mega-block-title, .lqd-head-sec .sub-menu h4 { color: #fff !important; }

/* ---------- Hero ---------- */
.banner { background-color: var(--ai-bg) !important; }
.banner::after {
	background:
		linear-gradient(90deg, rgba(6, 9, 19, .94) 0%, rgba(6, 9, 19, .72) 48%, rgba(6, 9, 19, .35) 100%),
		linear-gradient(180deg, transparent 70%, var(--ai-bg) 100%) !important;
}
.banner::before {
	background:
		radial-gradient(36% 46% at 80% 26%, rgba(16, 185, 129, .38), transparent 70%),
		radial-gradient(30% 40% at 66% 82%, rgba(34, 211, 238, .26), transparent 70%),
		radial-gradient(26% 32% at 96% 70%, rgba(52, 211, 153, .18), transparent 70%) !important;
}
.tdb-neural {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: .9;
}
.banner h1 { text-shadow: 0 0 40px rgba(62, 173, 60, .25); }
.banner p, .banner .text-26 { color: rgba(214, 220, 240, .86) !important; }

/* ---------- Dark "AI" service sections ---------- */
.lqd-section.services:not(.stats) {
	position: relative;
	background:
		radial-gradient(50% 60% at 15% 0%, rgba(62, 173, 60, .16), transparent 70%),
		radial-gradient(40% 50% at 100% 100%, rgba(34, 211, 238, .10), transparent 70%),
		var(--ai-bg) !important;
	color: var(--ai-text);
	border-bottom: 0 !important;
}
.lqd-section.services:not(.stats)::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%);
	mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 80%);
}
.lqd-section.services:not(.stats) > .container { position: relative; }
.lqd-section.services:not(.stats) h2,
.lqd-section.services:not(.stats) h3,
.lqd-section.services:not(.stats) h4,
.lqd-section.services:not(.stats) h5 { color: #fff !important; }
.lqd-section.services:not(.stats) p,
.lqd-section.services:not(.stats) .ld-fh-element:not(h2):not(h3):not(h6) { color: var(--ai-text) !important; }
.lqd-section.services:not(.stats) h6.ld-fh-element,
.lqd-section.services:not(.stats) .ld-fancy-heading h6 {
	color: #86efac;
	border-color: rgba(134, 239, 172, .3);
	background: rgba(16, 185, 129, .1);
}
.lqd-section.services:not(.stats) a { color: #fff; }

/* Glass cards with glowing gradient borders */
.services:not(.stats) .iconbox,
.inner-services:not(.stats) .iconbox {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) padding-box,
		linear-gradient(140deg, rgba(148, 163, 184, .22), rgba(148, 163, 184, .06) 40%, rgba(148, 163, 184, .14)) border-box !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -30px rgba(0, 0, 0, .8) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.services:not(.stats) .iconbox:hover,
.inner-services:not(.stats) .iconbox:hover {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) padding-box,
		var(--ai-grad) border-box !important;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, .2), 0 24px 60px -24px rgba(62, 173, 60, .55) !important;
}
.services:not(.stats) .iconbox::before,
.inner-services:not(.stats) .iconbox::before {
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(16, 185, 129, .16), transparent 60%) !important;
}
/* Icons keep a light chip so dark icon artwork stays visible */
.services:not(.stats) .iconbox .iconbox-icon-container {
	background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(226, 232, 255, .9)) !important;
	box-shadow: 0 0 24px rgba(62, 173, 60, .35);
}
.services:not(.stats) .iconbox:hover .iconbox-icon-container { background: #fff !important; }
.services:not(.stats) .iconbox h3, .services:not(.stats) .iconbox h3 a { color: #fff !important; }
.services:not(.stats) .iconbox:hover h3, .services:not(.stats) .iconbox:hover h3 a { color: #fff !important; }
.services:not(.stats) .iconbox p { color: var(--ai-muted) !important; }

/* Process numbers / list items inside dark sections */
.lqd-section.services:not(.stats) .process-list .iconbox { text-align: left; }

/* ---------- Stats / awards ---------- */
.stats { background: linear-gradient(180deg, var(--ai-bg-2), var(--ai-bg)) !important; }
.stats .contents span, .stats .counting {
	background: var(--ai-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ---------- Light sections: soft neural mesh ---------- */
.bg-gray-100.lqd-section,
.lqd-section.why-ace,
.lqd-section.testimonials,
.lqd-section.modern-tech {
	background:
		radial-gradient(40% 50% at 0% 0%, rgba(16, 185, 129, .07), transparent 70%),
		radial-gradient(40% 50% at 100% 100%, rgba(34, 211, 238, .07), transparent 70%),
		#f7f8fc !important;
}
.steps img, .why-ace img, .rounded-inherit { box-shadow: 0 30px 60px -30px rgba(10, 60, 35, .45); }
.modern-tech .carousel-item .carousel-item-inner:hover { border-color: #4ade80 !important; box-shadow: 0 10px 30px -12px rgba(62, 173, 60, .45) !important; }
.home-whytech_block-title-key {
	background: var(--ai-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.why-tdb .home-whytech_block { border: 1px solid rgba(62, 173, 60, .14); box-shadow: 0 20px 50px -30px rgba(10, 60, 35, .35); }
.testimonials .container::before { color: rgba(62, 173, 60, .08); }

/* Links / accents that used the old green */
.entry-content p a, .article p a, .link, .table-of-contents li.active > a, .faq-list .question.open { color: #23873a !important; }
.lqd-lp-title a:hover, .entry-title a:hover { color: #23873a; }
.categories > a:hover, ul#portfolio-filter li a.active, ul#portfolio-filter li a:hover {
	background: var(--ai-bg) !important;
	border-color: var(--ai-bg) !important;
	color: #fff !important;
}
.entry-content blockquote { border-left-color: #3ead3c; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus {
	border-color: #3ead3c !important;
	box-shadow: 0 0 0 4px rgba(62, 173, 60, .15) !important;
}
.footer-top address a:hover { color: #23873a; }

/* ---------- CTA bands ---------- */
.image-bg.contact .liquid-row-overlay,
.image-bg.help .liquid-row-overlay {
	background:
		radial-gradient(40% 80% at 100% 0%, rgba(16, 185, 129, .45), transparent 70%),
		radial-gradient(35% 70% at 0% 100%, rgba(34, 211, 238, .30), transparent 70%),
		linear-gradient(120deg, rgba(6, 9, 19, .95), rgba(11, 16, 34, .88)) !important;
}

/* ---------- Footer ---------- */
.footer-top {
	background:
		radial-gradient(40% 80% at 50% 0%, rgba(62, 173, 60, .06), transparent 70%),
		#f7f8fc !important;
}
#site-footer.main-footer {
	background:
		radial-gradient(40% 60% at 85% 0%, rgba(16, 185, 129, .14), transparent 70%),
		radial-gradient(30% 50% at 0% 100%, rgba(34, 211, 238, .08), transparent 70%),
		var(--ai-bg) !important;
}
#site-footer .iconbox-icon-container { color: #86efac !important; }
.lqd-back-to-top a { background: var(--ai-btn) !important; box-shadow: var(--ai-glow) !important; }
.tdb-progress { background: var(--ai-grad); box-shadow: 0 0 12px rgba(62, 173, 60, .8); }

/* Mobile menu icon: the theme draws bars in currentColor (text-black) */
.lqd-mobile-sec .nav-trigger,
.lqd-mobile-sec .nav-trigger.text-black { color: #fff !important; }

/* Let the neural network show through on the right of the hero */
.banner::after {
	background:
		linear-gradient(90deg, rgba(6, 9, 19, .92) 0%, rgba(6, 9, 19, .55) 45%, rgba(6, 9, 19, .1) 100%),
		linear-gradient(180deg, transparent 75%, var(--ai-bg) 100%) !important;
}
@media (max-width: 767px) {
	.banner::after { background: linear-gradient(180deg, rgba(6, 9, 19, .55), rgba(6, 9, 19, .8)) !important; }
}
.lqd-mobile-sec .nav-trigger .bars { filter: none !important; }

/* Dark sections always get breathing room at the top */
.lqd-section.services:not(.stats) { padding-top: max(var(--tdb-pt, 0px), clamp(56px, 7vw, 96px)) !important; }


/* Buttons: solid brand green, as on the original site */
.btn.btn-solid.bg-primary,
.wpcf7-submit,
.search-form .search-submit,
.lqd-back-to-top a { background: #3ead3c !important; }
.btn.btn-solid.bg-primary:hover,
.wpcf7-submit:hover,
.search-form .search-submit:hover {
	background: #2f8f2d !important;
	box-shadow: 0 0 0 1px rgba(62, 173, 60, .4), 0 14px 40px -10px rgba(62, 173, 60, .6) !important;
}
@media (min-width: 992px) {
	.lqd-head-sec .menu > li:last-child a { background: #3ead3c !important; }
	.lqd-head-sec .menu > li:last-child a:hover { background: #2f8f2d !important; filter: none; }
}

/* ---------- Client logos grid (inc/brands.php) ---------- */
.tdb-clients {
	padding: clamp(48px, 6vw, 80px) 0;
	background: #fff;
	border-top: 1px solid #eef1f5;
	border-bottom: 1px solid #eef1f5;
}
.tdb-clients__title {
	margin: 0 0 clamp(28px, 4vw, 44px);
	text-align: center;
	color: #6b7690;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.tdb-clients__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tdb-clients__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	text-align: center;
}
.tdb-clients__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
}
.tdb-clients__logo img {
	width: 160px !important;
	height: 62px !important;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
	filter: grayscale(1) contrast(1.1);
	opacity: .62;
	transition: filter .35s, opacity .35s, transform .35s;
}
.tdb-clients__item:hover img { filter: none; opacity: 1; transform: scale(1.04); }
.tdb-clients__link {
	color: #23873a;
	font-weight: 600;
	font-size: 15px;
}
.tdb-clients__link:hover { color: #1b6e2f; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) { .tdb-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .tdb-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* FAQ list on landing pages */
.tdb-lp-faq .faq-list { margin: 0 auto; padding: 0; list-style: none; }
.tdb-lp-faq .faq-list > li {
	list-style: none;
	margin: 0 0 12px;
	border: 1px solid #e3e8ef;
	border-radius: 14px;
	background: #fff;
	transition: border-color .25s, box-shadow .25s;
}
.tdb-lp-faq .faq-list > li::marker { content: none; }
.tdb-lp-faq .faq-list > li:hover { border-color: #b9e6c3; }
.tdb-lp-faq .faq-list .question { padding: 20px 56px 20px 24px; font-size: 17px; cursor: pointer; }
.tdb-lp-faq .faq-list .answer { padding: 0 24px 20px; color: #44506a; }
.tdb-lp-faq .faq-list .question::after { right: 24px; top: 50%; transform: translateY(-50%); color: #23873a; }