/* ==========================================================================
   Z11 — Google Antigravity design system (dark + light)
   Loaded last, so it wins over the parent theme and Elementor CSS.
   Toggle: <html data-theme="dark|light"> set before first paint.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

:root,
[data-theme="light"] {
	color-scheme: light;

	--ag-bg: #ffffff;
	--ag-bg-alt: #f8f9fa;
	--ag-surface: #ffffff;
	--ag-surface-container: #f8f9fa;
	--ag-surface-container-high: #f1f3f4;
	--ag-surface-low: rgba(32, 33, 36, 0.04);

	--ag-ink: #202124;
	--ag-ink-muted: #5f6368;
	--ag-ink-subtle: #80868b;
	--ag-ink-inverse: #ffffff;

	--ag-outline: #dadce0;
	--ag-outline-variant: rgba(32, 33, 36, 0.07);

	--ag-primary: #1a73e8;
	--ag-primary-hover: #1557b0;
	--ag-primary-soft: rgba(26, 115, 232, 0.09);
	--ag-on-primary: #ffffff;
	--ag-accent-blue: #3186ff;
	--ag-accent-violet: #7c4dff;
	--ag-accent-teal: #12b5a5;
	--ag-accent-amber: #f9ab00;

	--ag-glass: rgba(255, 255, 255, 0.72);
	--ag-glass-border: rgba(32, 33, 36, 0.08);
	--ag-glass-highlight: rgba(255, 255, 255, 0.9);
	--ag-code-bg: #f8f9fa;
	--ag-code-border: #dadce0;

	--ag-shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.12);
	--ag-shadow-card: 0 1px 2px rgba(60, 64, 67, 0.1), 0 12px 32px rgba(60, 64, 67, 0.07);
	--ag-shadow-panel: 0 24px 64px rgba(32, 33, 36, 0.1);

	--ag-glow-blue: rgba(49, 134, 255, 0.16);
	--ag-glow-violet: rgba(124, 77, 255, 0.12);
	--ag-grid-line: rgba(32, 33, 36, 0.045);

	--ag-radius-xs: 12px;
	--ag-radius-sm: 16px;
	--ag-radius-md: 20px;
	--ag-radius-lg: 24px;
	--ag-radius-xl: 32px;
	--ag-radius-pill: 999px;

	--ag-font: "Google Sans Flex", "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ag-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, monospace;

	--ag-gutter: clamp(20px, 5vw, 64px);
	--ag-section-y: clamp(72px, 9vw, 140px);
	--ag-ease: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
	color-scheme: dark;

	--ag-bg: #0b0b0f;
	--ag-bg-alt: #0e0e14;
	--ag-surface: #131217;
	--ag-surface-container: #1a1a21;
	--ag-surface-container-high: #23232c;
	--ag-surface-low: rgba(255, 255, 255, 0.04);

	--ag-ink: #f1f3f4;
	--ag-ink-muted: #9aa0a6;
	--ag-ink-subtle: #7a7f87;
	--ag-ink-inverse: #0b0b0f;

	--ag-outline: #2e2e38;
	--ag-outline-variant: rgba(255, 255, 255, 0.08);

	--ag-primary: #3186ff;
	--ag-primary-hover: #6ea8fe;
	--ag-primary-soft: rgba(49, 134, 255, 0.14);
	--ag-on-primary: #06080d;
	--ag-accent-blue: #3186ff;
	--ag-accent-violet: #a78bfa;
	--ag-accent-teal: #45d0bd;
	--ag-accent-amber: #fbbc04;

	--ag-glass: rgba(255, 255, 255, 0.045);
	--ag-glass-border: rgba(255, 255, 255, 0.09);
	--ag-glass-highlight: rgba(255, 255, 255, 0.14);
	--ag-code-bg: #101015;
	--ag-code-border: #2a2a34;

	--ag-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--ag-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 44px rgba(0, 0, 0, 0.45);
	--ag-shadow-panel: 0 32px 80px rgba(0, 0, 0, 0.6);

	--ag-glow-blue: rgba(49, 134, 255, 0.22);
	--ag-glow-violet: rgba(124, 77, 255, 0.18);
	--ag-grid-line: rgba(255, 255, 255, 0.04);

	--ag-glass-border-top: rgba(255, 255, 255, 0.16);
}

/* ------------------------------------------------------------ 2. BASE SKIN */

html {
	background: var(--ag-bg);
	scroll-behavior: smooth;
}

body {
	background: var(--ag-bg) !important;
	color: var(--ag-ink) !important;
	font-family: var(--ag-font) !important;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
.body-container,
.site-content,
#page-content,
.main-content {
	background: var(--ag-bg) !important;
	color: var(--ag-ink) !important;
}

::selection {
	background: var(--ag-primary);
	color: var(--ag-on-primary);
}

:focus-visible {
	outline: 2px solid var(--ag-primary) !important;
	outline-offset: 3px;
	border-radius: 6px;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--ag-outline);
	border-radius: var(--ag-radius-pill);
	border: 2px solid transparent;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--ag-ink-subtle);
	background-clip: padding-box;
}

/* Transition guard: only while switching, never on first paint. */
html.z11-switching body,
html.z11-switching body * {
	transition: background-color 0.28s var(--ag-ease), color 0.28s var(--ag-ease),
		border-color 0.28s var(--ag-ease), box-shadow 0.28s var(--ag-ease) !important;
}

/* -------------------------------------------------------- 3. TYPOGRAPHY */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
	font-family: var(--ag-font) !important;
	color: var(--ag-ink) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	line-height: 1.12;
}

h1, .elementor-heading h1 { font-size: clamp(38px, 6vw, 76px) !important; }
h2, .elementor-heading h2 { font-size: clamp(30px, 4.2vw, 52px) !important; }
h3, .elementor-heading h3 { font-size: clamp(23px, 2.6vw, 32px) !important; }
h4, .elementor-heading h4 { font-size: clamp(19px, 1.9vw, 24px) !important; }

p, li, span, div, td, th, label, input, textarea, select, button,
.elementor-widget-text-editor,
.elementor-text-editor,
.aiero-btn,
.elementor-button {
	font-family: var(--ag-font) !important;
}

p, .elementor-widget-text-editor p {
	color: var(--ag-ink-muted) !important;
	line-height: 1.7;
}

a {
	color: var(--ag-primary);
	transition: color 0.2s var(--ag-ease), opacity 0.2s var(--ag-ease);
}

a:hover {
	color: var(--ag-primary-hover);
}

/* Mono kicker / label — the Antigravity signature */
.z11-kicker,
.elementor-widget-heading .heading-extra,
.elementor-heading .elementor-heading-title + .heading-extra {
	font-family: var(--ag-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	color: var(--ag-ink-subtle) !important;
}

/* --------------------------------------------------------- 4. GLASS/PILL */

.z11-glass,
.elementor-widget-container.z11-glass {
	background: var(--ag-glass) !important;
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border: 1px solid var(--ag-glass-border);
	border-radius: var(--ag-radius-lg);
	box-shadow: var(--ag-shadow-card);
	position: relative;
	overflow: hidden;
}

.z11-glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, var(--ag-glass-highlight), transparent 42%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ------------------------------------------------------------ 5. BUTTONS */

a.button,
button.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.aiero-btn,
.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.solid-btn,
.btn,
.mt-cta,
a.mt-cta,
a.elementor-button,
.elementor-button-wrapper a,
#respond .form-submit input[type="submit"] {
	border-radius: var(--ag-radius-pill) !important;
	font-family: var(--ag-font) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	padding: 14px 28px !important;
	min-height: 48px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent !important;
	background: var(--ag-primary) !important;
	color: var(--ag-on-primary) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 8px 24px var(--ag-primary-soft);
	transition: transform 0.2s var(--ag-ease), background-color 0.2s var(--ag-ease),
		box-shadow 0.2s var(--ag-ease), color 0.2s var(--ag-ease);
	white-space: nowrap;
}

a.button:hover,
button.button:hover,
input[type="submit"]:hover,
.aiero-btn:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.elementor-button-wrapper a:hover {
	background: var(--ag-primary-hover) !important;
	color: var(--ag-on-primary) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 16px 40px var(--ag-primary-soft);
}

/* Secondary / outline variant */
a.button.mt-cta-secondary,
.elementor-button.is-secondary,
.woocommerce .button.secondary,
.z11-btn-ghost {
	background: transparent !important;
	color: var(--ag-ink) !important;
	border-color: var(--ag-outline) !important;
	box-shadow: none;
	backdrop-filter: blur(8px);
}

a.button.mt-cta-secondary:hover,
.elementor-button.is-secondary:hover,
.woocommerce .button.secondary:hover,
.z11-btn-ghost:hover {
	background: var(--ag-surface-low) !important;
	color: var(--ag-ink) !important;
	border-color: var(--ag-ink-subtle) !important;
}

/* Inverse CTA on dark panels (Antigravity download section) */
.z11-inverse-cta a.button,
.elementor-section.z11-inverse .elementor-button-wrapper a {
	background: var(--ag-ink) !important;
	color: var(--ag-bg) !important;
}

.elementor-section.z11-inverse .elementor-heading-title,
.elementor-section.z11-inverse h1,
.elementor-section.z11-inverse h2,
.elementor-section.z11-inverse h3,
.elementor-section.z11-inverse p,
.elementor-section.z11-inverse .elementor-widget-text-editor {
	color: var(--ag-bg) !important;
}

/* ------------------------------------------------------------- 6. HEADER */

.site-header,
.sticky-header,
.header-sticky,
.mobile-header,
.mobile-sticky-header,
.header-wrapper,
.slide-sidebar,
.slide-sidebar-content {
	background: var(--ag-bg) !important;
	color: var(--ag-ink) !important;
}

.site-header.header-transparent,
.sticky-header.header-transparent {
	background: transparent !important;
}

.site-header .menu > li > a,
.header-nav .menu > li > a,
.nav-menu .menu > li > a,
.mobile-header .menu > li > a,
.slide-sidebar .menu > li > a {
	color: var(--ag-ink) !important;
	font-weight: 500;
	font-size: 15px;
	opacity: 0.85;
	transition: opacity 0.2s var(--ag-ease), color 0.2s var(--ag-ease);
}

.site-header .menu > li > a:hover,
.header-nav .menu > li > a:hover,
.nav-menu .menu > li > a:hover,
.mobile-header .menu > li > a:hover,
.slide-sidebar .menu > li > a:hover {
	color: var(--ag-ink) !important;
	opacity: 1;
}

.site-header .menu > li.current-menu-item > a,
.site-header .menu > li.current_page_item > a,
.site-header .menu > li.current-menu-ancestor > a {
	color: var(--ag-primary) !important;
	opacity: 1;
}

.site-header .menu,
.header-nav .menu,
.mobile-header .menu,
.slide-sidebar .menu {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-header .menu > li > a {
	padding: 10px 16px;
	border-radius: var(--ag-radius-pill);
}

.site-header .menu > li.current-menu-item > a,
.site-header .menu > li.current_page_item > a {
	background: var(--ag-surface-low);
}

.header-actions,
.site-header .header-actions,
.header-search,
.slide-sidebar-close {
	color: var(--ag-ink) !important;
}

.slide-sidebar {
	background: var(--ag-surface) !important;
	border-left: 1px solid var(--ag-outline-variant);
}

.slide-sidebar-gradient {
	display: none;
}

.z11-logo img {
	height: auto;
	max-height: 40px;
	width: auto;
	transition: opacity 0.2s var(--ag-ease);
}

/* ------------------------------------------------------------ 7. TOGGLE */

.z11-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	margin-left: 12px;
	border-radius: var(--ag-radius-pill);
	background: var(--ag-surface-low);
	border: 1px solid var(--ag-outline-variant);
	backdrop-filter: blur(12px);
	position: relative;
	vertical-align: middle;
}

.z11-theme-toggle button {
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	width: 34px;
	height: 34px;
	border-radius: var(--ag-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ag-ink-subtle);
	transition: background-color 0.24s var(--ag-ease), color 0.24s var(--ag-ease),
		box-shadow 0.24s var(--ag-ease);
	padding: 0;
	line-height: 1;
}

.z11-theme-toggle button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.z11-theme-toggle button:hover {
	color: var(--ag-ink);
}

.z11-theme-toggle button[aria-pressed="true"] {
	background: var(--ag-surface);
	color: var(--ag-ink);
	box-shadow: var(--ag-shadow-sm);
}

[data-theme="dark"] .z11-theme-toggle button[aria-pressed="true"] {
	background: var(--ag-surface-container-high);
}

/* Floating fallback (when the menu is unavailable) */
.z11-theme-toggle-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999;
	box-shadow: var(--ag-shadow-panel);
}

/* -------------------------------------------------------- 8. FOOTER/MAIN */

.site-footer,
.footer-wrapper,
.footer-columns,
.copyright-text {
	background: var(--ag-bg) !important;
	color: var(--ag-ink) !important;
}

.site-footer a,
.footer-wrapper a {
	color: var(--ag-ink-muted) !important;
}

.site-footer a:hover,
.footer-wrapper a:hover {
	color: var(--ag-ink) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.footer-wrapper h1, .footer-wrapper h2, .footer-wrapper h3,
.footer-wrapper h4, .footer-wrapper h5, .footer-wrapper h6 {
	color: var(--ag-ink) !important;
}

.footer-title, .footer-heading, .widget-title {
	font-family: var(--ag-mono) !important;
	font-size: 12px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	color: var(--ag-ink-subtle) !important;
}

/* --------------------------------------------------------- 9. ELEMENTOR */

.elementor-section,
.e-con,
.elementor-widget-container {
	font-family: var(--ag-font) !important;
}

.elementor-section {
	background-color: transparent;
}

.elementor-widget-image img,
.elementor-image img,
a.elementor-image img {
	border-radius: var(--ag-radius-lg) !important;
	box-shadow: var(--ag-shadow-card);
}

.elementor-widget-divider {
	opacity: 1 !important;
}

.elementor-widget-divider .elementor-divider-icon,
.elementor-widget-divider .elementor-divider-fail {
	color: var(--ag-outline) !important;
}

.elementor-widget-progress-bar .elementor-progress-title {
	font-family: var(--ag-mono) !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ag-ink-subtle) !important;
}

/* Cards across post types + services + projects + case studies + team */
.aiero-card,
.elementor-post__card,
.related-products .product,
.woocommerce-loop-product__content,
.service-card,
.project-card,
.case-study-card,
.team-member {
	background: var(--ag-surface) !important;
	border: 1px solid var(--ag-outline-variant) !important;
	border-radius: var(--ag-radius-lg) !important;
	box-shadow: var(--ag-shadow-card);
	overflow: hidden;
	transition: transform 0.28s var(--ag-ease), box-shadow 0.28s var(--ag-ease),
		border-color 0.28s var(--ag-ease);
}

.aiero-card:hover,
.elementor-post__card:hover,
.service-card:hover,
.project-card:hover,
.case-study-card:hover,
.related-products .product:hover,
.woocommerce-loop-product__content:hover {
	transform: translateY(-4px);
	box-shadow: var(--ag-shadow-panel);
	border-color: var(--ag-primary) !important;
}

.aiero-card .card-title,
.elementor-post__card .elementor-post__title,
.woocommerce-loop-product__title {
	color: var(--ag-ink) !important;
	font-weight: 500;
}

/* Tabs / accordions / toggles */
.elementor-tab-title,
.accordion-title,
.z11-accordion-title,
.elementor-toggle-title,
.woocommerce-product-details__title {
	color: var(--ag-ink) !important;
	font-weight: 500;
}

.elementor-tab-title a,
.accordion-title,
.elementor-toggle-title {
	font-family: var(--ag-font) !important;
}

/* Icon boxes / feature lists */
.elementor-icon-box-title,
.elementor-icon-list-text {
	color: var(--ag-ink) !important;
}

.elementor-icon-box-wrapper .elementor-icon {
	color: var(--ag-primary) !important;
}

/* Testimonial / quote */
blockquote,
.elementor-blockquote,
.testimonial-content {
	border-radius: var(--ag-radius-lg) !important;
	border-left: 3px solid var(--ag-primary) !important;
	background: var(--ag-surface-container) !important;
	color: var(--ag-ink) !important;
}

/* Quote / divider widgets */
.elementor-quote-blockquote,
.elementor-testimonial-content {
	color: var(--ag-ink) !important;
}

/* Code-ish blocks (Antigravity snippet look) */
.z11-code,
pre,
code,
.elementor-widget-code-editor {
	font-family: var(--ag-mono) !important;
	background: var(--ag-code-bg) !important;
	color: var(--ag-ink) !important;
	border: 1px solid var(--ag-code-border);
	border-radius: var(--ag-radius-sm);
}

/* ------------------------------------------------------------ 10. FORMS */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.nf-form input,
.search-form input,
.comment-form input,
.comment-form textarea {
	background: var(--ag-surface-container) !important;
	color: var(--ag-ink) !important;
	border: 1px solid var(--ag-outline) !important;
	border-radius: var(--ag-radius-sm) !important;
	font-family: var(--ag-font) !important;
	font-size: 15px !important;
	padding: 13px 16px !important;
	min-height: 48px;
	transition: border-color 0.2s var(--ag-ease), box-shadow 0.2s var(--ag-ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ag-primary) !important;
	box-shadow: 0 0 0 4px var(--ag-primary-soft) !important;
	outline: none !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--ag-ink-subtle) !important;
	opacity: 1;
}

label,
.wpcf7 label,
.elementor-field-label {
	color: var(--ag-ink-muted) !important;
	font-size: 14px;
}

/* -------------------------------------------------------- 11. WOOCOMMERCE */

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-notice,
.wc-block-components-notice-banner {
	background: var(--ag-surface-container) !important;
	border: 1px solid var(--ag-outline-variant) !important;
	border-radius: var(--ag-radius-md) !important;
	color: var(--ag-ink) !important;
}

.woocommerce div.product form.cart .variation,
.woocommerce .cart-collaterals,
.woocommerce-checkout-review-order,
.woocommerce table.shop_table,
.woocommerce form .form-row {
	border-color: var(--ag-outline-variant) !important;
}

.woocommerce table.shop_table th {
	background: var(--ag-surface-container) !important;
	color: var(--ag-ink) !important;
	font-family: var(--ag-mono) !important;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	border-color: var(--ag-outline-variant) !important;
	color: var(--ag-ink-muted) !important;
}

.woocommerce .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--ag-ink-muted) !important;
}

.woocommerce .quantity input.qty {
	border-radius: var(--ag-radius-sm) !important;
	border: 1px solid var(--ag-outline) !important;
}

.price,
.woocommerce-Price-amount {
	color: var(--ag-ink) !important;
}

.woocommerce-product-gallery__image img {
	border-radius: var(--ag-radius-lg) !important;
}

/* Woo blocks / cart totals headings */
.woocommerce .woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb {
	color: var(--ag-ink-subtle) !important;
	font-size: 13px;
}

/* ------------------------------------------------------------- 12. BLOG */

.entry-title, .post-title, .page-title, .blog-title {
	color: var(--ag-ink) !important;
}

.entry-content, .post-content, .single-post-content {
	color: var(--ag-ink-muted) !important;
	line-height: 1.8;
}

.entry-meta, .post-meta, .page-meta {
	font-family: var(--ag-mono) !important;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ag-ink-subtle) !important;
}

.post-navigation .nav-links a,
.posts-navigation .nav-links a {
	border: 1px solid var(--ag-outline) !important;
	border-radius: var(--ag-radius-pill) !important;
	color: var(--ag-ink) !important;
	padding: 10px 20px;
}

.pagination .page-numbers,
.page-numbers {
	border-radius: var(--ag-radius-pill) !important;
	border: 1px solid var(--ag-outline-variant) !important;
	background: transparent !important;
	color: var(--ag-ink-muted) !important;
}

.page-numbers.current {
	background: var(--ag-primary) !important;
	color: var(--ag-on-primary) !important;
	border-color: var(--ag-primary) !important;
}

/* --------------------------------------------------------- 13. UTILITIES */

/* Antigravity atmosphere: soft multi-hue glow + faint grid, opt-in per section */
.z11-atmosphere {
	position: relative;
	isolation: isolate;
}

.z11-atmosphere::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 90%;
	z-index: -1;
	background:
		radial-gradient(38% 46% at 18% 22%, var(--ag-glow-blue), transparent 70%),
		radial-gradient(34% 42% at 78% 14%, var(--ag-glow-violet), transparent 70%),
		radial-gradient(30% 36% at 52% 78%, var(--ag-glow-blue), transparent 72%);
	filter: blur(12px);
	pointer-events: none;
}

.z11-atmosphere::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(var(--ag-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ag-grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
	pointer-events: none;
}

/* Rounded "download section" panel */
.z11-panel {
	background: var(--ag-surface-container) !important;
	border: 1px solid var(--ag-outline-variant);
	border-radius: var(--ag-radius-xl) !important;
	box-shadow: var(--ag-shadow-card);
}

[data-theme="dark"] .z11-panel {
	background: var(--ag-surface) !important;
}

/* Particle canvas */
.z11-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.75;
}

.z11-particles-host {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Hero content always sits above the atmosphere layers */
.z11-atmosphere > .elementor-container,
.z11-atmosphere > .container,
.z11-atmosphere > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* Divider tone */
hr, .elementor-divider-separator, .theme-divider {
	border-color: var(--ag-outline-variant) !important;
	opacity: 1;
}

/* Pagination / load-more */
.load-more, .aiero-load-more, .elementor-load-more button {
	border-radius: var(--ag-radius-pill) !important;
	border: 1px solid var(--ag-outline) !important;
	background: transparent !important;
	color: var(--ag-ink) !important;
	padding: 14px 30px !important;
}

/* ------------------------------------------------------------ 14. MOTION */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.z11-particles { display: none; }
}

@media (max-width: 1024px) {
	.z11-atmosphere::after { display: none; }
}

/* --------------------------------------------------------- 15. NO-JS/UA */

.no-js .z11-theme-toggle { display: none; }