/* Styles for Dark Mode Toggle Button */
.dm-toggle-btn-482fa3aa {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99999;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #12121f;
	border: 1px solid rgba(255, 255, 255, 0.15);
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(6, 148, 148, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	outline: none;
	padding: 0;
}

.dm-toggle-btn-482fa3aa:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(34, 224, 200, 0.3);
	border-color: #22e0c8;
}

.dm-toggle-btn-482fa3aa .dm-toggle-icon-sun-482fa3aa {
	display: none;
	font-size: 22px;
}

.dm-toggle-btn-482fa3aa .dm-toggle-icon-moon-482fa3aa {
	display: block;
	font-size: 22px;
}

/* Toggle icon states based on body class */
body.dark-mode-active-482fa3aa .dm-toggle-btn-482fa3aa {
	background-color: #f4f4fb;
	border-color: #069494;
}

body.dark-mode-active-482fa3aa .dm-toggle-btn-482fa3aa .dm-toggle-icon-sun-482fa3aa {
	display: block;
}

body.dark-mode-active-482fa3aa .dm-toggle-btn-482fa3aa .dm-toggle-icon-moon-482fa3aa {
	display: none;
}

/* --- Dark Mode Design System Token CSS Overrides --- */

body.dark-mode-active-482fa3aa {
	/* Style Guide Tokens */
	--bg: #07070d;
	--bg-2: #0d0d18;
	--panel: #12121f;
	--panel-2: #161627;
	--ink: #f4f4fb;
	--muted: #a2a2c0;
	--muted-2: #71718f;
	--line: rgba(244, 244, 251, 0.1);
	--line-2: rgba(244, 244, 251, 0.15);
	
	/* Brand Accent Tokens */
	--teal: #069494;
	--cyan: #22e0c8;
	--aqua: #7dfff0;
	--teal-deep: #1f5c56;
	
	/* Gradient & Structure */
	--grad: linear-gradient(115deg, #069494 0%, #22e0c8 55%, #7dfff0 100%);
	--radius: 22px;

	background-color: var(--bg) !important;
	color: var(--ink) !important;
}

/* Global Elementor Layout & Variable Overrides */
body.dark-mode-active-482fa3aa {
	--e-global-color-primary: var(--ink) !important;
	--e-global-color-text: var(--muted) !important;
	--e-global-color-accent: var(--cyan) !important;
	--e-global-color-secondary: var(--cyan) !important;
}

/* Apply main canvas background */
body.dark-mode-active-482fa3aa .e-con,
body.dark-mode-active-482fa3aa .elementor-section {
	background-color: var(--bg) !important;
	background-image: none !important;
	border-color: var(--line) !important;
}

/* Alternating or nested containers/sections */
body.dark-mode-active-482fa3aa .e-con:nth-child(even),
body.dark-mode-active-482fa3aa .elementor-section:nth-child(even) {
	background-color: var(--bg-2) !important;
}

/* High Contrast accessible cards & panels */
body.dark-mode-active-482fa3aa .e-con .e-con,
body.dark-mode-active-482fa3aa .elementor-widget-container .elementor-icon-box-wrapper,
body.dark-mode-active-482fa3aa [style*="background-color: rgb(248, 250, 252)"],
body.dark-mode-active-482fa3aa [style*="background-color: #f8fafc"],
body.dark-mode-active-482fa3aa [style*="background-color: rgb(255, 255, 255)"] {
	background-color: var(--panel) !important;
	border: 1px solid var(--line-2) !important;
	border-radius: var(--radius) !important;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease !important;
}

/* Card hover elevations from motion guide */
body.dark-mode-active-482fa3aa .e-con .e-con:hover,
body.dark-mode-active-482fa3aa .elementor-widget-container .elementor-icon-box-wrapper:hover {
	background-color: var(--panel-2) !important;
	transform: translateY(-5px) !important;
	border-color: var(--cyan) !important;
}

/* Accessible High Contrast Typography */
body.dark-mode-active-482fa3aa h1,
body.dark-mode-active-482fa3aa h2,
body.dark-mode-active-482fa3aa h3,
body.dark-mode-active-482fa3aa h4,
body.dark-mode-active-482fa3aa h5,
body.dark-mode-active-482fa3aa h6,
body.dark-mode-active-482fa3aa .elementor-heading-title {
	color: var(--ink) !important;
}

body.dark-mode-active-482fa3aa p,
body.dark-mode-active-482fa3aa span,
body.dark-mode-active-482fa3aa li,
body.dark-mode-active-482fa3aa .elementor-text-editor {
	color: var(--muted) !important;
}

/* HIGH-CONTRAST ACCESSIBLE BUTTONS OVERRIDES */

/* Base transitions and pill shape */
body.dark-mode-active-482fa3aa .elementor-button,
body.dark-mode-active-482fa3aa .elementor-button-link {
	border-radius: 100px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	transition: all 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}

/* Primary Filled Buttons (Get access, Start free) */
body.dark-mode-active-482fa3aa .elementor-button:not(.elementor-button-link),
body.dark-mode-active-482fa3aa .elementor-button.elementor-size-sm,
body.dark-mode-active-482fa3aa .elementor-button.elementor-size-md,
body.dark-mode-active-482fa3aa .elementor-button:not([style*="border"]),
body.dark-mode-active-482fa3aa .elementor-button:not([class*="outline"]) {
	background: var(--grad) !important;
	color: #07070d !important; /* contrast ink over light gradient */
	box-shadow: 0 10px 30px rgba(6, 148, 148, 0.2) !important; /* Softened/muted glow */
	border: none !important;
}

body.dark-mode-active-482fa3aa .elementor-button:not(.elementor-button-link):hover,
body.dark-mode-active-482fa3aa .elementor-button.elementor-size-sm:hover,
body.dark-mode-active-482fa3aa .elementor-button.elementor-size-md:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 30px rgba(6, 148, 148, 0.32) !important;
	color: #07070d !important;
}

/* Secondary Outline Buttons (Work with us, Book a call) */
body.dark-mode-active-482fa3aa .elementor-button-link[style*="border"],
body.dark-mode-active-482fa3aa .elementor-button[style*="border"],
body.dark-mode-active-482fa3aa .elementor-button.elementor-button-link[class*="outline"],
body.dark-mode-active-482fa3aa .elementor-button[class*="secondary"] {
	background: transparent !important;
	color: var(--ink) !important; /* Clean white text */
	border: 1px solid rgba(244, 244, 251, 0.15) !important; /* Extremely thin elegant border */
	box-shadow: none !important;
}

body.dark-mode-active-482fa3aa .elementor-button-link[style*="border"]:hover,
body.dark-mode-active-482fa3aa .elementor-button[style*="border"]:hover,
body.dark-mode-active-482fa3aa .elementor-button.elementor-button-link[class*="outline"]:hover {
	background: rgba(244, 244, 251, 0.05) !important;
	border-color: rgba(244, 244, 251, 0.3) !important;
	color: var(--ink) !important;
	transform: translateY(-2px) !important;
}

/* Subtle border adjustments */
body.dark-mode-active-482fa3aa .elementor-widget-container {
	border-color: var(--line) !important;
}