/*
 * Wise Tech — AI Solutions visual system.
 * Loaded after the base stylesheet to preserve templates and SEO markup.
 */

:root {
	--wt-navy-950: #030712;
	--wt-navy-900: #07101f;
	--wt-navy-800: #0b1730;
	--wt-navy-700: #152a52;
	--wt-blue-600: #2563eb;
	--wt-blue-500: #38bdf8;
	--wt-orange-500: #7c3aed;
	--wt-orange-600: #6d28d9;
	--wt-cyan-400: #22d3ee;
	--wt-violet-500: #8b5cf6;
	--wt-indigo-500: #6366f1;
	--wt-slate-900: #111827;
	--wt-slate-700: #475569;
	--wt-slate-600: #64748b;
	--wt-slate-500: #7c8aa0;
	--wt-slate-200: #e3e8f2;
	--wt-surface: #f6f8ff;
	--wt-shadow-sm: 0 16px 44px rgba(28, 44, 88, 0.1);
	--wt-shadow-md: 0 28px 80px rgba(3, 7, 18, 0.22);
	--wt-shadow-glow: 0 18px 55px rgba(99, 102, 241, 0.24);
	--wt-radius-sm: 10px;
	--wt-radius-md: 18px;
	--wt-radius-lg: 26px;
}

body {
	font-family: "Be Vietnam Pro", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

::selection {
	background: rgba(99, 102, 241, 0.25);
	color: var(--wt-navy-950);
}

:focus-visible {
	outline-color: rgba(34, 211, 238, 0.78);
}

.site-header {
	background:
		linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.1), rgba(34, 211, 238, 0.05)),
		var(--wt-navy-950);
	box-shadow: 0 12px 38px rgba(3, 7, 18, 0.22);
}

.topbar {
	border-bottom-color: rgba(125, 211, 252, 0.09);
	color: #91a4c5;
}

.header-main {
	border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.primary-menu a {
	color: #c7d2e8;
}

.primary-menu > .menu-item > a::after {
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--wt-blue-500), var(--wt-violet-500));
	box-shadow: 0 0 18px rgba(34, 211, 238, 0.5);
}

.primary-menu .sub-menu {
	padding: 12px;
	border: 1px solid rgba(99, 102, 241, 0.14);
	border-radius: 15px;
	box-shadow: 0 24px 70px rgba(3, 7, 18, 0.2);
}

.primary-menu .sub-menu a {
	border-radius: 9px;
}

.primary-menu .sub-menu a:hover {
	background: rgba(99, 102, 241, 0.08);
	color: var(--wt-indigo-500);
}

.header-phone:hover {
	color: var(--wt-cyan-400);
}

.button {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.button--primary {
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 72%);
	box-shadow: 0 13px 32px rgba(99, 102, 241, 0.32);
}

.button--primary:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 72%);
	box-shadow: 0 18px 42px rgba(99, 102, 241, 0.42);
}

.button--secondary {
	border-color: rgba(125, 211, 252, 0.28);
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(12px);
}

.button--secondary:hover,
.button--ghost:hover {
	border-color: var(--wt-cyan-400);
	background: rgba(34, 211, 238, 0.08);
	box-shadow: 0 0 26px rgba(34, 211, 238, 0.15);
}

.eyebrow,
.product-card__category,
.post-card__read-more,
.product-card__link {
	color: var(--wt-indigo-500);
}

.hero {
	isolation: isolate;
	padding-top: 110px;
	background:
		radial-gradient(circle 520px at 18% 12%, rgba(37, 99, 235, 0.34), transparent 68%),
		radial-gradient(circle 620px at 82% 20%, rgba(124, 58, 237, 0.28), transparent 66%),
		radial-gradient(circle 460px at 52% 92%, rgba(34, 211, 238, 0.13), transparent 70%),
		linear-gradient(145deg, #030712 0%, #081427 52%, #0b1430 100%);
}

.hero::before {
	top: -440px;
	border-color: rgba(125, 211, 252, 0.09);
	box-shadow: inset 0 0 70px rgba(99, 102, 241, 0.06);
}

.hero::after {
	top: -300px;
	border-color: rgba(167, 139, 250, 0.1);
}

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 13px;
	border: 1px solid rgba(125, 211, 252, 0.2);
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.45);
	color: #a5f3fc;
	backdrop-filter: blur(12px);
}

.hero__kicker::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wt-cyan-400);
	box-shadow: 0 0 13px var(--wt-cyan-400);
	content: "";
}

.hero h1 {
	text-wrap: balance;
	text-shadow: 0 10px 44px rgba(0, 0, 0, 0.22);
}

.hero h1 span {
	background: linear-gradient(90deg, #60a5fa 4%, #a78bfa 48%, #67e8f9 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lead {
	color: #b4c2da;
}

.hero-card {
	border-color: rgba(148, 163, 184, 0.15);
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.54), rgba(15, 23, 42, 0.28));
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.hero-card:hover {
	border-color: rgba(34, 211, 238, 0.34);
	box-shadow: 0 18px 46px rgba(3, 7, 18, 0.24), 0 0 32px rgba(34, 211, 238, 0.07);
	transform: translateY(-5px);
}

.hero-card .icon-box {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(124, 58, 237, 0.2));
	color: #67e8f9;
	box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.12);
}

.about-visual {
	background:
		radial-gradient(circle at 72% 22%, rgba(34, 211, 238, 0.42), transparent 27%),
		radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.48), transparent 35%),
		linear-gradient(145deg, #071225, #152c67);
	box-shadow: var(--wt-shadow-md), 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.about-visual .icon {
	filter: drop-shadow(0 0 24px rgba(103, 232, 249, 0.32));
}

.check-list li::before {
	background: linear-gradient(135deg, var(--wt-indigo-500), var(--wt-cyan-400));
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.text-link {
	border-image: linear-gradient(90deg, var(--wt-indigo-500), var(--wt-cyan-400)) 1;
}

.section--surface {
	background:
		linear-gradient(180deg, rgba(99, 102, 241, 0.025), transparent 28%),
		var(--wt-surface);
}

.section--dark {
	background:
		radial-gradient(circle 520px at 12% 10%, rgba(37, 99, 235, 0.18), transparent 70%),
		radial-gradient(circle 540px at 90% 90%, rgba(124, 58, 237, 0.15), transparent 70%),
		var(--wt-navy-900);
}

.solution-card,
.service-card,
.process-card,
.product-card,
.post-card,
.faq-item,
.detail-card,
.contact-card {
	border-color: var(--wt-slate-200);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.solution-card:hover,
.service-card:hover,
.process-card:hover,
.product-card:hover,
.post-card:hover,
.detail-card:hover,
.contact-card:hover {
	border-color: rgba(99, 102, 241, 0.3);
	box-shadow: var(--wt-shadow-sm);
	transform: translateY(-5px);
}

.section--dark .solution-card {
	border-color: rgba(148, 163, 184, 0.14);
	background: linear-gradient(145deg, rgba(30, 41, 59, 0.58), rgba(15, 23, 42, 0.42));
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

.section--dark .solution-card:hover {
	border-color: rgba(167, 139, 250, 0.34);
	box-shadow: 0 20px 55px rgba(3, 7, 18, 0.3), 0 0 30px rgba(124, 58, 237, 0.08);
}

.icon-box {
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.11), rgba(34, 211, 238, 0.12));
	color: var(--wt-blue-600);
}

.icon-box--orange {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(34, 211, 238, 0.13));
	color: #a78bfa;
}

.process-card__number {
	background: linear-gradient(135deg, var(--wt-blue-600), var(--wt-violet-500));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.58;
}

.cta-strip {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle 350px at 90% 20%, rgba(34, 211, 238, 0.18), transparent 70%),
		linear-gradient(125deg, #07101f, #101d43 56%, #231553);
	box-shadow: var(--wt-shadow-md);
}

.service-chip::before {
	background: linear-gradient(180deg, var(--wt-blue-500), var(--wt-violet-500));
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.34);
}

.post-card__media,
.product-card__visual {
	background:
		radial-gradient(circle at 75% 25%, rgba(34, 211, 238, 0.35), transparent 30%),
		linear-gradient(140deg, #071225, #153474 55%, #43238b);
}

.post-card__media .icon,
.product-card__visual .icon {
	filter: drop-shadow(0 0 24px rgba(103, 232, 249, 0.22));
}

.partners {
	background:
		linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.12), rgba(34, 211, 238, 0.06)),
		var(--wt-navy-950);
}

.partners__list li {
	border-color: rgba(148, 163, 184, 0.12);
	background: rgba(15, 23, 42, 0.52);
}

.contact-panel {
	background:
		radial-gradient(circle 360px at 90% 4%, rgba(34, 211, 238, 0.18), transparent 70%),
		linear-gradient(145deg, #081325, #151a42 65%, #25184f);
	box-shadow: var(--wt-shadow-md), 0 0 0 1px rgba(99, 102, 241, 0.12);
}

.contact-panel input[type="submit"] {
	background: linear-gradient(135deg, #2563eb, #7c3aed);
	box-shadow: 0 12px 30px rgba(99, 102, 241, 0.28);
}

.faq-item[open] {
	border-color: rgba(99, 102, 241, 0.28);
	box-shadow: var(--wt-shadow-sm);
}

.page-hero,
.final-cta {
	background:
		radial-gradient(circle 430px at 16% 10%, rgba(37, 99, 235, 0.26), transparent 68%),
		radial-gradient(circle 520px at 85% 65%, rgba(124, 58, 237, 0.22), transparent 70%),
		linear-gradient(145deg, #030712, #0a1730 55%, #17133b);
}

.map-frame {
	border-color: rgba(99, 102, 241, 0.17);
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1), rgba(34, 211, 238, 0.1));
}

.pagination .page-numbers.current,
.pagination a:hover {
	border-color: transparent;
	background: linear-gradient(135deg, var(--wt-blue-600), var(--wt-violet-500));
	color: var(--wt-white);
	box-shadow: 0 10px 24px rgba(99, 102, 241, 0.22);
}

.site-footer {
	background:
		radial-gradient(circle 520px at 12% 0%, rgba(37, 99, 235, 0.14), transparent 70%),
		radial-gradient(circle 440px at 90% 100%, rgba(124, 58, 237, 0.12), transparent 70%),
		var(--wt-navy-950);
}

.footer-tagline,
.footer-title {
	color: #e6ecff;
}

.footer-links a:hover,
.footer-contact a:hover {
	color: var(--wt-cyan-400);
}

@media (max-width: 1280px) {
	.primary-navigation {
		background:
			linear-gradient(145deg, rgba(37, 99, 235, 0.07), rgba(124, 58, 237, 0.08)),
			var(--wt-navy-950);
	}
}

/* Content-aware fallback for long menus on wide displays. */
body.nav-collapsed .menu-toggle {
	display: inline-flex;
}

body.nav-collapsed .header-main__inner {
	min-height: 78px;
}

body.nav-collapsed .site-logo img,
body.nav-collapsed .custom-logo {
	height: 50px;
}

body.nav-collapsed .primary-navigation {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	margin: 0;
	padding: 14px 24px 24px;
	border-top: 1px solid #e2e8f0;
	background: #ffffff;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

body.nav-collapsed .primary-navigation.is-open {
	display: block;
}

body.nav-collapsed .primary-menu {
	display: block;
	width: min(100%, var(--wt-container));
	margin: 0 auto;
}

body.nav-collapsed .primary-menu a {
	padding: 13px 5px;
	color: var(--wt-slate-900);
	border-bottom: 1px solid #edf2f7;
	white-space: normal;
}

body.nav-collapsed .primary-menu > .menu-item > a::after {
	display: none;
}

body.nav-collapsed .primary-menu .sub-menu {
	position: static;
	display: none;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 16px;
	visibility: visible;
	opacity: 1;
	background: transparent;
	box-shadow: none;
	transform: none;
}

body.nav-collapsed .primary-menu .menu-item-has-children.submenu-open > .sub-menu {
	display: block;
}

body.nav-collapsed .primary-menu .sub-menu a {
	color: var(--wt-slate-600);
}

@media (max-width: 560px) {
	.hero {
		padding-top: 76px;
	}

	.hero__kicker {
		display: inline-flex;
		font-size: 0.68rem;
		line-height: 1.45;
	}

	.button {
		min-height: 50px;
	}
}

/* v2.2 — White header and footer */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.topbar {
	border-bottom-color: #edf2f7;
	color: var(--wt-slate-600);
}

.topbar a:hover,
.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--wt-blue-600);
}

.header-main {
	border-bottom-color: transparent;
}

.primary-menu a,
.header-phone {
	color: var(--wt-slate-900);
}

.header-phone span {
	color: var(--wt-slate-600);
}

.header-phone:hover {
	color: var(--wt-blue-600);
}

.menu-toggle {
	border-color: var(--wt-slate-300);
	color: var(--wt-slate-900);
}

.site-footer {
	background: #ffffff;
	border-top: 1px solid #e2e8f0;
	color: var(--wt-slate-600);
}

.footer-tagline {
	color: var(--wt-blue-600);
}

.footer-title {
	color: var(--wt-slate-900);
}

.footer-links a,
.footer-contact a {
	color: var(--wt-slate-600);
}

.footer-links a:hover,
.footer-contact a:hover {
	color: var(--wt-blue-600);
}

.footer-contact strong {
	color: var(--wt-slate-700);
}

.footer-bottom {
	border-top-color: #e2e8f0;
}

@media (max-width: 1280px) {
	.primary-navigation {
		background: #ffffff;
		border-color: #e2e8f0;
		box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
	}

	.primary-menu a {
		color: var(--wt-slate-900);
		border-bottom-color: #edf2f7;
	}

	.primary-menu .sub-menu {
		display: none;
	}

	.primary-menu .menu-item-has-children.submenu-open > .sub-menu {
		display: block;
	}

	.primary-menu .sub-menu a {
		color: var(--wt-slate-600);
	}
}