:root {
			--primary-color: #f31659;
			--secondary-color: #7813ec;
			--hover-color: #ffffff;
			--black: #000000;

			/* site-demo theme tokens: primary -> brand, secondary -> accent */
			--fc-primary: var(--primary-color);
			--fc-primary-50: color-mix(in srgb, var(--primary-color) 8%, #ffffff);
			--fc-primary-100: color-mix(in srgb, var(--primary-color) 16%, #ffffff);
			--fc-primary-200: color-mix(in srgb, var(--primary-color) 32%, #ffffff);
			--fc-primary-400: color-mix(in srgb, var(--primary-color) 60%, #ffffff);
			--fc-primary-600: var(--primary-color);
			--fc-primary-700: color-mix(in srgb, var(--primary-color) 80%, #000000);
			--fc-primary-900: color-mix(in srgb, var(--primary-color) 55%, #000000);
			--fc-primary-950: color-mix(in srgb, var(--primary-color) 35%, #000000);

			--fc-accent: var(--secondary-color);
			--fc-accent-50: color-mix(in srgb, var(--secondary-color) 8%, #ffffff);
			--fc-accent-300: color-mix(in srgb, var(--secondary-color) 60%, #ffffff);
			--fc-accent-600: color-mix(in srgb, var(--secondary-color) 80%, #000000);

			--fc-violet-400: color-mix(in srgb, var(--primary-color) 55%, var(--secondary-color));
			--fc-violet-600: color-mix(in srgb, var(--primary-color) 45%, var(--secondary-color));
			--fc-violet-700: color-mix(in srgb, var(--primary-color) 40%, var(--secondary-color));

			--fc-shadow-hover: 0 4px 10px rgba(10, 19, 34, 0.06), 0 30px 60px -26px color-mix(in srgb, var(--primary-color) 32%, transparent);
			--fc-shadow-lift: 0 24px 60px -22px color-mix(in srgb, var(--primary-color) 35%, transparent);
			--fc-shadow-glow: 0 20px 50px -20px color-mix(in srgb, var(--primary-color) 55%, transparent);
			--fc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-color) 35%, transparent);

			--fc-gradient-brand: linear-gradient(120deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color) 60%, var(--secondary-color)) 46%, var(--secondary-color) 118%);
			--fc-gradient-brand-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, color-mix(in srgb, var(--primary-color) 46%, var(--secondary-color) 8%) 50%, color-mix(in srgb, var(--secondary-color) 10%, transparent) 100%);
			--fc-gradient-hairline: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary-color) 45%, transparent) 50%, transparent 100%);
			--fc-gradient-ink: linear-gradient(150deg, #0a1322 0%, color-mix(in srgb, var(--primary-color) 25%, #0a1322) 42%, color-mix(in srgb, var(--primary-color) 60%, #0a1322) 100%);
			--fc-gradient-ink-deep: linear-gradient(160deg, #0a1322 0%, color-mix(in srgb, var(--primary-color) 25%, #0a1322) 45%, color-mix(in srgb, var(--primary-color) 60%, #0a1322) 100%);
			--fc-gradient-hero: linear-gradient(135deg, #0a1322 0%, color-mix(in srgb, var(--primary-color) 30%, #0a1322) 45%, color-mix(in srgb, var(--primary-color) 70%, #0a1322) 115%);
			}

			/* Override compiled Tailwind + hardcoded brand accents so every button,
			   icon, link, navbar state and hover/focus layer follows primary and
			   secondary. Neutral text/icons (ink, white) stay static. */
			::selection {
			background-color: var(--primary-color) !important;
			color: #ffffff !important;
			}
			.eyebrow {
			color: var(--fc-primary-700) !important;
			}
			.eyebrow::before {
			background-image: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			}
			.tw-text-accent-300 {
			color: var(--fc-accent-300) !important;
			}
			.tw-text-primary-600 {
			color: var(--fc-primary-600) !important;
			}
			.accordion-c .accordion-button:focus {
			box-shadow: var(--fc-focus-ring);
			}
			.gradient-border::before {
			background-image: var(--fc-gradient-brand);
			}
			.hero-mesh {
			background-image: radial-gradient(58% 58% at 12% 16%, color-mix(in srgb, var(--primary-color) 55%, transparent) 0%, transparent 62%),
				radial-gradient(48% 52% at 88% 20%, color-mix(in srgb, var(--fc-violet-600) 42%, transparent) 0%, transparent 66%),
				radial-gradient(55% 60% at 62% 108%, color-mix(in srgb, var(--secondary-color) 42%, transparent) 0%, transparent 62%);
			}
			.hero-orb-a {
			background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 80%, transparent) 0%, transparent 70%);
			}
			.hero-orb-b {
			background: radial-gradient(circle, color-mix(in srgb, var(--secondary-color) 65%, transparent) 0%, transparent 70%);
			}
			.hero-orb-c {
			background: radial-gradient(circle, color-mix(in srgb, var(--fc-violet-600) 50%, transparent) 0%, transparent 70%);
			}
			.hero-glow-a {
			background: color-mix(in srgb, var(--primary-color) 45%, transparent);
			}
			.hero-glow-b {
			background: color-mix(in srgb, var(--secondary-color) 35%, transparent);
			}
			.section-glow::before {
			background-image: radial-gradient(45% 60% at 88% 0%, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, transparent 70%),
				radial-gradient(40% 55% at 2% 100%, color-mix(in srgb, var(--secondary-color) 10%, transparent) 0%, transparent 70%);
			}
			.section-head .section-title::after {
			background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary-color) 55%, transparent) 50%, transparent 100%);
			}
			.section-head-light .section-title::after {
			background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--secondary-color) 60%, transparent) 50%, transparent 100%);
			}
			.cta-mesh {
			background-image: radial-gradient(42% 62% at 6% 0%, color-mix(in srgb, var(--primary-color) 55%, transparent) 0%, transparent 68%),
				radial-gradient(38% 55% at 98% 100%, color-mix(in srgb, var(--secondary-color) 42%, transparent) 0%, transparent 70%),
				radial-gradient(32% 46% at 62% -12%, color-mix(in srgb, var(--fc-violet-600) 50%, transparent) 0%, transparent 70%);
			}
			.cta-hairline {
			background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary-color) 85%, transparent) 28%, color-mix(in srgb, var(--secondary-color) 85%, transparent) 72%, transparent 100%);
			}
			.cta-orb-a {
			background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 70%, transparent) 0%, transparent 70%);
			}
			.cta-orb-b {
			background: radial-gradient(circle, color-mix(in srgb, var(--secondary-color) 60%, transparent) 0%, transparent 70%);
			}
			.site-footer::before {
			background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary-color) 70%, transparent) 35%, color-mix(in srgb, var(--secondary-color) 70%, transparent) 65%, transparent 100%);
			}
			.site-footer::after {
			background-image: radial-gradient(55% 100% at 12% 0%, color-mix(in srgb, var(--primary-color) 32%, transparent) 0%, transparent 72%),
				radial-gradient(45% 100% at 88% 0%, color-mix(in srgb, var(--secondary-color) 22%, transparent) 0%, transparent 72%);
			}

			/* Component skins defined in compiled Tailwind with hardcoded colors. */
			.btn-brand {
			background-image: var(--fc-gradient-brand) !important;
			box-shadow: var(--fc-shadow-lift);
			}
			.btn-brand:hover {
			box-shadow: var(--fc-shadow-glow);
			}
			.btn-brand:focus-visible {
			--tw-ring-color: var(--fc-primary-400) !important;
			}
			.btn-brand-outline {
			border-color: var(--fc-primary-200) !important;
			color: var(--fc-primary-700) !important;
			}
			.btn-brand-outline:hover {
			border-color: var(--fc-primary-400) !important;
			background-color: var(--fc-primary-50) !important;
			}
			.btn-brand-outline:focus-visible {
			--tw-ring-color: var(--fc-primary-200) !important;
			}
			.btn-brand-ghost:hover {
			box-shadow: var(--fc-shadow-glow);
			}
			.icon-badge {
			background-image: var(--fc-gradient-brand) !important;
			box-shadow: var(--fc-shadow-glow);
			color: #ffffff !important;
			}
			.icon-badge-accent {
			border-color: var(--fc-accent-50) !important;
			background-color: var(--fc-accent-50) !important;
			color: var(--fc-accent-600) !important;
			}
			.chip {
			border-color: var(--fc-primary-200) !important;
			background-color: color-mix(in srgb, var(--primary-color) 8%, transparent) !important;
			color: var(--fc-primary-700) !important;
			}
			.timeline-dot {
			background-image: var(--fc-gradient-brand) !important;
			box-shadow: var(--fc-shadow-glow);
			}
			.timeline-year {
			color: var(--primary-color) !important;
			}
			.cta-step-num {
			background-image: var(--fc-gradient-brand) !important;
			box-shadow: var(--fc-shadow-lift);
			}
			.link-arrow {
			color: var(--primary-color) !important;
			}
			.link-arrow:hover {
			color: var(--fc-primary-900) !important;
			}
			.float-top {
			background-image: var(--fc-gradient-brand) !important;
			box-shadow: var(--fc-shadow-lift);
			}
			.float-top:hover {
			box-shadow: var(--fc-shadow-glow);
			}
			
			.header {
			background-color: var(--primary-color) !important;
			}
			.header .sitename, 
			.header .logo h1, 
			.header a {
			color: var(--black) !important;
			}
			.header .btn-getstarted {
			background-color: var(--secondary-color) !important;
			border: 1px solid var(--secondary-color) !important;
			color: #fff !important;
			}
			.header .btn-getstarted:hover {
			background-color: var(--hover-color) !important;
			color: var(--black) !important;
			border: 1px solid var(--black) !important;
			}
			.header .logo span {
			color: var(--secondary-color);
			}
			.about .icon-box:hover h4 a {
    		color: var(--secondary-color);
			}
			.contact-info-item:hover {
			box-shadow: 0 0 11px color-mix(in srgb, var(--secondary-color) 30%, transparent) !important;
			}
			.hero .btn-get-started:hover{
			background: color-mix(in srgb, var(--secondary-color), transparent 20%);
			}
			.about-us-card:hover {
    		box-shadow: 0 0 11px color-mix(in srgb, var(--secondary-color) 30%, transparent) !important;
			}
			.navmenu a {
			color: var(--black) !important;
			}
			.navmenu .active > a {
			color: var(--secondary-color) !important;
			}
			.dropdown-item:hover {
			background-color: var(--secondary-color) !important;
			color: var(--black) !important;
			}
			.pricing .buy-btn:hover{
			background-color: var(--secondary-color) !important;
			border-color: var(--secondary-color) !important;
			}
			.mobile-nav-toggle {
			color: var(--secondary-color) !important;
			}
			.text-primary {
			color: var(--secondary-color) !important;
	        }
			#myTab .nav-link:hover {
			background-color: var(--secondary-color) !important;
			color: var(--black) !important;
			}
			.stats i {
			color: var(--secondary-color);
			}
			.tabs .tab-pane ul i {
			color: var(--secondary-color);
			}
			.testimonials .swiper-pagination .swiper-pagination-bullet-active
			{
			background-color: var(--secondary-color);
			}
			.about .content .about-btn {
    		border: 2px solid var(--secondary-color);
			}
			.about .content .about-btn:hover {
			background: var(--secondary-color);
			}
			.clients .swiper-pagination .swiper-pagination-bullet-active {
			background-color: var(--secondary-color);
			}
			.pricing h4 {
			font-size: 48px;
			color: var(--secondary-color);
			}
			.pricing .featured .pricing-item {
			background: var(--secondary-color);
			}
			.pricing .featured .buy-btn {
			background: var(--secondary-color);
			color: var(--contrast-color);
			}
			.faq .faq-container .faq-active h3 {
			color: var(--secondary-color);
			}
			.faq .faq-container .faq-item h3:hover {
			color: var(--secondary-color);
			}
			.team .team-member .social a:hover {
			background: var(--secondary-color);
			}
			.faq .faq-container .faq-active {
			background-color: 
			color-mix(in srgb, var(--secondary-color), transparent 97%);
			border-color: 
			color-mix(in srgb, var(--secondary-color), transparent 80%);
			}
			.section-title h2:after{
			background: var(--secondary-color) !important;
			}
			.portfolio .portfolio-filters li.filter-active {
            color: var(--secondary-color);
			}
			.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active {
            color: var(--secondary-color);
			}
			.portfolio .portfolio-content .portfolio-info h4{
			background-color: var(--secondary-color) !important;
			}
			.text-danger {
			color: var(--secondary-color) !important;
			}
			.primary-btn, .btn-primary, .btn-getstarted {
			background-color: var(--secondary-color) !important;
			border: 1px solid var(--secondary-color) !important;
			color: #fff !important;
			}
			.team .team-member .social a {
			color: var(--secondary-color) !important;
			}
			.primary-btn:hover, 
			.btn-primary:hover, 
			.btn-getstarted:hover {
			background-color: color-mix(in srgb, var(--secondary-color), transparent 20%) !important;
			color: var(--black) !important;
			border: 1px solid var(--black) !important;
			}
			.services .service-item .icon{
			color: var(--secondary-color) !important;
			}
			.tabs .nav-link.active {
			background: var(--secondary-color) !important;
			color: var(--black) !important;
			border-color: var(--secondary-color) !important;
			}
			.tabs .nav-link:hover {
			color: var(--secondary-color);
			border-color: var(--secondary-color);
			}
			.scroll-top:hover {
			background-color: color-mix(in srgb, var(--secondary-color), transparent 20%);
			color-mix(in srgb, var(--secondary-color), transparent 20%);
			color: var(--black);
			}
			.scroll-top{
			background-color: var(--secondary-color);
			}
			.hero .btn-get-started{
			background: var(--secondary-color);
			color: var(--black);
			}
			.hero .btn-watch-video i{
			color: var(--secondary-color);
			}
			.hero .btn-watch-video:hover i {
			color: color-mix(in srgb, var(--secondary-color), transparent 20%);
			}
			.hero .btn-watch-video:hover {
			color: var(--secondary-color);
			}
			.contact .info-item i {
			color: var(--secondary-color);	
			border: 2px dottedcolor-mix(in srgb, var(--secondary-color), transparent 40%);
			}
			.contact .php-email-form button[type=submit]:hover {
			background: 
			color-mix(in srgb, var(--secondary-color), transparent 20%);
			}
			.contact .php-email-form button[type=submit] {
			color: var(--black);
			background: var(--secondary-color);
			}
			.footer a:hover {
			color: var(--secondary-color) !important;
			}
			.footer .sitename {
			color: var(--secondary-color) !important;
			}
			.footer .social-links a {
			background-color: var(--secondary-color) !important;
			color: #fff !important;
			}
			.footer .social-links a:hover {
			background-color: var(--hover-color) !important;
			color: var(--black) !important;
			}
			.footer .footer-newsletter .newsletter-form input[type=submit] {
			background-color: var(--secondary-color) !important;
			border: none !important;
			color: #fff !important;
			}
			.footer-newsletter input[type='submit']:hover {
			background-color: var(--hover-color) !important;
			color: var(--black) !important;
			border: 1px solid var(--black) !important;
			}
			.footer .copyright {
			border-top: 1px solid rgba(255,255,255,0.1);
			color: #ddd !important;
			}