html {
	scroll-behavior: smooth;
}

/* Theme-toggle color fade, applied as a zero-specificity baseline so it
   never overrides an element's own transition (e.g. .btn-premium's custom
   hover timing) — it only fills the gap for elements that don't declare
   one. Without this, only elements that happen to carry an explicit
   `transition-colors`/`transition-all` utility fade between light/dark;
   everything else (many nested content blocks with a `dark:bg-...`
   variant, e.g. project-card content panels) snaps instantly, which reads
   as borders/edges flashing and briefly-visible light-mode backgrounds
   peeking through dark ones (or vice versa) around the elements that do
   fade smoothly. */
:where(*, *::before, *::after) {
	transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, fill 0.5s ease, stroke 0.5s ease;
}

html.dark {
	background-color: #05070B;
}

html:not(.dark) {
	background-color: #F4F5F7;
}

/* Offset for anchor scrolling under the fixed header */
section {
	scroll-margin-top: 90px;
}

/* The FOUC-fix (body opacity: 0 / tailwind-ready) intentionally lives as an
   inline <style> in each page's <head> so it applies before external CSS loads. */

.glass {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(139, 92, 246, 0.15);
	box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.dark .glass {
	background: rgba(9, 9, 11, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.05);
	box-shadow: none;
}

/* Separate from .glass to avoid flicker on the fixed header while scrolling */
.glass-header {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-color: rgba(139, 92, 246, 0.1) !important;
}

.dark .glass-header {
	background: rgba(9, 9, 11, 0.85);
	border-color: rgba(255, 255, 255, 0.05) !important;
}

.bg-grid {
	background-size: 50px 50px;
	background-image:
		linear-gradient(to right, rgba(139, 92, 246, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(139, 92, 246, 0.04) 1px, transparent 1px);
}

.dark .bg-grid {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #F4F5F7;
}

.dark ::-webkit-scrollbar-track {
	background: #05070B;
}

::-webkit-scrollbar-thumb {
	background: #E2E8F0;
	border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
	background: #111622;
}

::-webkit-scrollbar-thumb:hover {
	background: #8B5CF6;
}

.btn-premium {
	position: relative;
	overflow: hidden;
	background: #8B5CF6;
	color: #ffffff;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.2);
}

.btn-premium::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(120deg,
			transparent,
			rgba(255, 255, 255, 0.4),
			transparent);
	transition: all 0.6s;
}

.btn-premium:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 24px 0 rgba(139, 92, 246, 0.45);
	background: #A78BFA;
}

.btn-premium:hover::before {
	left: 100%;
}

.btn-premium-outline {
	position: relative;
	overflow: hidden;
	border: 2px solid #8B5CF6;
	color: #05070B;
	background: transparent;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dark .btn-premium-outline {
	color: #ffffff;
}

.btn-premium-outline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background: #8B5CF6;
	z-index: -1;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-premium-outline:hover {
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px 0 rgba(139, 92, 246, 0.3);
}

.btn-premium-outline:hover::after {
	height: 100%;
}

#mobile-nav {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s;
	will-change: transform, opacity;
}

/* radial-gradient glows instead of heavy CSS blur filters, which tank iOS Safari performance */
.gpu-glow-top {
	background: radial-gradient(50% 50% at 50% 50%, rgba(249, 115, 22, 0.25) 0%, transparent 100%);
}

.dark .gpu-glow-top {
	background: radial-gradient(50% 50% at 50% 50%, rgba(249, 115, 22, 0.15) 0%, transparent 100%);
}

.gpu-glow-mid {
	background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, 0.18) 0%, transparent 100%);
}

.dark .gpu-glow-mid {
	background: transparent;
}

.gpu-glow-bottom {
	background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 100%);
}

.dark .gpu-glow-bottom {
	background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 100%);
}

.gpu-glow-hero {
	background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, 0.2) 0%, transparent 100%);
}

.gpu-glow-footer {
	background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
}

@keyframes pulseGlow {

	0%,
	100% {
		opacity: 0.35;
		transform: scale(1) translateZ(0);
	}

	50% {
		opacity: 0.7;
		transform: scale(1.08) translateZ(0);
	}
}

.animate-glow-pulse-slow {
	animation: pulseGlow 10s ease-in-out infinite;
}

.animate-glow-pulse-slower {
	animation: pulseGlow 14s ease-in-out infinite;
}

.portfolio-swiper,
.portfolio-swiper.swiper-3d {
	padding: 40px 0 80px 0 !important;
	overflow: visible !important;
	perspective: 1200px !important;
	-webkit-perspective: 1200px !important;
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

.portfolio-swiper .swiper-wrapper {
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

.swiper-slide {
	width: 310px;
	height: auto !important;
	display: flex !important;
	flex-direction: column;
	opacity: 0.35;
	transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	transform-style: preserve-3d !important;
	-webkit-transform-style: preserve-3d !important;
}

@media (min-width: 640px) {
	.swiper-slide {
		width: 460px;
	}
}

@media (min-width: 1024px) {
	.swiper-slide {
		width: 580px;
	}
}

.swiper-slide-active {
	opacity: 1 !important;
	z-index: 10 !important;
}

.swiper-pagination-bullet-active {
	background: #8B5CF6 !important;
	width: 32px !important;
	border-radius: 99px !important;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet {
	background: #A78BFA;
	opacity: 0.4;
}

input,
textarea {
	-webkit-tap-highlight-color: transparent;
	outline: none !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	border-color: rgba(0, 0, 0, 0.12) !important;
	color: #0F172A !important;
}

.dark input,
.dark textarea {
	background-color: rgba(5, 7, 11, 0.4) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #FFFFFF !important;
}

input:focus,
textarea:focus {
	outline: none !important;
	border-color: #8B5CF6 !important;
	background-color: rgba(139, 92, 246, 0.12) !important;
	color: #05070B !important;
	box-shadow: none !important;
}

.dark input:focus,
.dark textarea:focus {
	background-color: rgba(139, 92, 246, 0.05) !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

.sticky-filter-bar {
	position: -webkit-sticky;
	position: sticky;
	top: 84px;
	z-index: 40;
	background-color: transparent;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	transition: top 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.sticky-filter-bar.is-stuck {
	background-color: rgba(244, 245, 247, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(228, 228, 231, 0.8);
	border-bottom: 1px solid rgba(228, 228, 231, 0.8);
}

@media (min-width: 768px) {
	.sticky-filter-bar {
		top: 92px;
	}
}

.dark .sticky-filter-bar.is-stuck {
	background-color: rgba(5, 7, 11, 0.85);
	border-top: 1px solid rgba(24, 24, 27, 0.8);
	border-bottom: 1px solid rgba(24, 24, 27, 0.8);
}

/* Keeps the sticky bar flush under the header, which shrinks on scroll */
#main-header.glass-header~.sticky-filter-bar {
	top: 68px;
}

@media (min-width: 768px) {
	#main-header.glass-header~.sticky-filter-bar {
		top: 76px;
	}
}

.cms-tab-btn {
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.cms-tab-btn.is-active {
	background-color: #8B5CF6 !important;
	color: #ffffff !important;
	border-color: #8B5CF6 !important;
	box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.35) !important;
	transform: translateY(-2px);
}

.dark .cms-tab-btn.is-active {
	background-color: #8B5CF6 !important;
	color: #ffffff !important;
}

.cms-panel {
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.cms-panel.hidden-panel {
	display: none;
	opacity: 0;
	transform: translateY(12px);
}

.cms-panel.active-panel {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.service-opt.is-active i,
.service-opt.is-active svg,
.cms-tab-btn.is-active i,
.cms-tab-btn.is-active svg,
.filter-btn.is-active i,
.filter-btn.is-active svg,
[aria-selected="true"] i,
[aria-selected="true"] svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
}