/* Disable tap highlight on mobile browsers */
* {
	-webkit-tap-highlight-color: transparent;
}

/* Custom OHMe CSS Variables */
:root {
	/* OHMe Brand Colors */
	--color-ohme-primary: #FF6B35;
	--color-ohme-secondary: #F79E1B;
	--color-ohme-dark: #E55A2B;
	--color-ohme-logo: #ef6c00;

	/* Override primary colors with OHMe brand */
	--color-primary: var(--color-ohme-primary);
	--color-primary-hover: var(--color-ohme-dark);
	--color-primary-active: var(--color-ohme-dark);

	--color-alexa: #29b6f6;
	--color-sonos: #D8A158;
}


:root {
	/* Colors */
	--color-background: rgba(255, 255, 255, 1);
	--color-surface: rgb(252, 252, 252);
	--color-surface-environmental: rgb(253, 255, 254);
	--color-text: rgb(57, 57, 57);
	--color-text-secondary: rgb(109, 109, 109);
	--color-secondary: rgba(94, 82, 64, 0.12);
	--color-secondary-hover: rgba(94, 82, 64, 0.2);
	--color-secondary-active: rgba(94, 82, 64, 0.25);
	--color-border: rgba(94, 82, 64, 0.2);
	--color-btn-primary-text: rgba(252, 252, 249, 1);
	--color-card-border: rgba(94, 82, 64, 0.12);
	--color-card-border-inner: rgba(94, 82, 64, 0.12);
	--color-error: rgba(192, 21, 47, 1);
	--color-success: rgba(33, 128, 141, 1);
	--color-warning: rgba(168, 75, 47, 1);
	--color-info: rgba(98, 108, 113, 1);
	--color-focus-ring: rgba(33, 128, 141, 0.4);
	--color-select-caret: rgba(19, 52, 59, 0.8);
	--color-background-overlay: rgba(255, 255, 255, 0.5);
	--color-background-photo-credit: rgba(255, 255, 255, 0.3);
	--color-environmental-commitment: rgb(33, 128, 141);

	--color-default-primary: #ef6c00;
	--color-default-secondary: #ff9800;
	--color-default-text: #4e2a00;
	--color-default-shadow: #ffcc8040;

	/* Device control colors */
	--color-light-primary: #ffba3b;
	--color-light-secondary: #ff8b07;
	--color-light-text: #4e3b00;
	--color-light-shadow: #ffeb3b3a;

	--color-load-primary: #56bc7d;
	--color-load-secondary: #2d6242;
	--color-load-text: #183322;
	--color-load-shadow: #56bc7d3a;

	--color-irrigation-primary: #2196f3;
	--color-irrigation-secondary: #1976d2;
	--color-irrigation-text: #003483;
	--color-irrigation-shadow: #2196f33a;

	--color-opening-primary: #9557c1;
	--color-opening-secondary: #732082;
	--color-opening-text: #28002f;
	--color-opening-shadow: #9557c13a;

	--color-thermostat-primary: #ff4444;
	--color-thermostat-secondary: #d32f2f;
	--color-thermostat-text: #510000;
	--color-thermostat-shadow: #ff44443a;

	--color-security-primary: #2ecf6b;
	--color-security-secondary: #178d44;
	--color-security-text: #09391b;
	--color-security-shadow: #2ecf6b3a;

	--color-voice-primary: #ff2b75;
	--color-voice-secondary: #c00083;
	--color-voice-text: #340023;
	--color-voice-shadow: #ff2b753a;

	/* Common style patterns */
	--focus-ring: 0 0 0 3px var(--color-focus-ring);
	--focus-outline: 2px solid var(--color-primary);
	--status-bg-opacity: 0.15;
	--status-border-opacity: 0.25;
	--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	/* RGB versions for opacity control */
	--color-success-rgb: 33, 128, 141;
	--color-error-rgb: 192, 21, 47;
	--color-warning-rgb: 168, 75, 47;
	--color-info-rgb: 98, 108, 113;

	/* Typography */
	--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
		Monaco, Consolas, monospace;
	--font-size-xs: 11px;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 18px;
	--font-size-2xl: 20px;
	--font-size-3xl: 24px;
	--font-size-4xl: 30px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 550;
	--font-weight-bold: 600;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--letter-spacing-tight: -0.01em;

	/* Spacing */
	--space-0: 0;
	--space-1: 1px;
	--space-2: 2px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-48: 48px;

	/* Border Radius */
	--radius-sm: 6px;
	--radius-base: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
		0 2px 4px -1px rgba(0, 0, 0, 0.02);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
		0 4px 6px -2px rgba(0, 0, 0, 0.02);
	--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -1px 0 rgba(0, 0, 0, 0.03);

	/* Animation */
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layout */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-xxl: 1536px;
	--container-xxxl: 1920px;

	--modal-image-height: 300px;

}

/* MARK: Dark mode colors */

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
	--color-background: rgb(33, 33, 33);
	--color-surface: rgb(39, 39, 39);
	--color-surface-environmental: rgba(38, 40, 40, 1);
	--color-text: rgb(244, 244, 244);
	--color-text-secondary: rgba(168, 168, 168, 0.7);
	--color-secondary: rgba(119, 124, 124, 0.15);
	--color-secondary-hover: rgba(119, 124, 124, 0.25);
	--color-secondary-active: rgba(119, 124, 124, 0.3);
	--color-border: rgba(119, 124, 124, 0.3);
	--color-error: rgba(255, 84, 89, 1);
	--color-success: rgba(50, 184, 198, 1);
	--color-warning: rgba(230, 129, 97, 1);
	--color-info: rgba(167, 169, 169, 1);
	--color-focus-ring: rgba(50, 184, 198, 0.4);
	--color-btn-primary-text: rgba(19, 52, 59, 1);
	--color-card-border: rgba(119, 124, 124, 0.15);
	--color-card-border-inner: rgba(119, 124, 124, 0.15);
	--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	--color-border-secondary: rgba(119, 124, 124, 0.2);
	--color-select-caret: rgba(245, 245, 245, 0.8);
	--color-background-overlay: rgba(0, 0, 0, 0.5);
	--color-background-photo-credit: rgba(0, 0, 0, 0.3);
	--color-environmental-commitment: rgba(50, 184, 198, 1);

	/* Common style patterns - updated for dark mode */
	--focus-ring: 0 0 0 3px var(--color-focus-ring);
	--focus-outline: 2px solid var(--color-primary);
	--status-bg-opacity: 0.15;
	--status-border-opacity: 0.25;
	--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	/* RGB versions for dark mode */
	--color-success-rgb: 50, 184, 198;
	--color-error-rgb: 255, 84, 89;
	--color-warning-rgb: 230, 129, 97;
	--color-info-rgb: 167, 169, 169;

	--color-default-primary: #2a1a00;
	--color-default-secondary: #1e1300;
	--color-default-text: #ffb347;
	--color-default-shadow: #ffb34733;

	/* Device control colors */
	--color-light-primary: #4e3b00;
	--color-light-secondary: #3b2a00;
	--color-light-text: #ffd466;
	--color-light-shadow: #ffd46633;

	--color-load-primary: #183322;
	--color-load-secondary: #10281a;
	--color-load-text: #7ddda3;
	--color-load-shadow: #7ddda333;

	--color-irrigation-primary: #003483;
	--color-irrigation-secondary: #002963;
	--color-irrigation-text: #62b8ff;
	--color-irrigation-shadow: #62b8ff33;

	--color-opening-primary: #28002f;
	--color-opening-secondary: #1b001f;
	--color-opening-text: #b67ad9;
	--color-opening-shadow: #b67ad933;

	--color-thermostat-primary: #510000;
	--color-thermostat-secondary: #3a0000;
	--color-thermostat-text: #ff7777;
	--color-thermostat-shadow: #ff777733;

	--color-security-primary: #09391b;
	--color-security-secondary: #062c13;
	--color-security-text: #53f29e;
	--color-security-shadow: #53f29e33;

	--color-voice-primary: #340023;
	--color-voice-secondary: #240018;
	--color-voice-text: #ff5f9f;
	--color-voice-shadow: #ff5f9f33;
}

/* MARK: Light mode colors */
[data-color-scheme="light"] {
	--color-background: rgba(255, 255, 255, 1);
	--color-surface: rgb(252, 252, 252);
	--color-surface-environmental: rgb(246, 250, 249);
	--color-text: rgba(19, 52, 59, 1);
	--color-text-secondary: rgba(98, 108, 113, 1);
	--color-secondary: rgba(94, 82, 64, 0.12);
	--color-secondary-hover: rgba(94, 82, 64, 0.2);
	--color-secondary-active: rgba(94, 82, 64, 0.25);
	--color-border: rgba(94, 82, 64, 0.2);
	--color-btn-primary-text: rgba(252, 252, 249, 1);
	--color-card-border: rgba(94, 82, 64, 0.12);
	--color-card-border-inner: rgba(94, 82, 64, 0.12);
	--color-error: rgba(192, 21, 47, 1);
	--color-success: rgba(33, 128, 141, 1);
	--color-warning: rgba(168, 75, 47, 1);
	--color-info: rgba(98, 108, 113, 1);
	--color-focus-ring: rgba(33, 128, 141, 0.4);
	--color-background-overlay: rgba(255, 255, 255, 0.5);
	--color-background-photo-credit: rgba(255, 255, 255, 0.3);
	--color-environmental-commitment: rgba(33, 128, 141, 1);

	/* RGB versions for light mode */
	--color-success-rgb: 33, 128, 141;
	--color-error-rgb: 192, 21, 47;
	--color-warning-rgb: 168, 75, 47;
	--color-info-rgb: 98, 108, 113;

	/* Device control colors */
	--color-light-primary: #fff4d0;
	--color-light-secondary: #ffe5a1;
	--color-light-text: #4e3b00;
	--color-light-shadow: #4e3b0033;

	--color-load-primary: #d9f5e4;
	--color-load-secondary: #b0e6c6;
	--color-load-text: #183322;
	--color-load-shadow: #18332233;

	--color-irrigation-primary: #d0e9ff;
	--color-irrigation-secondary: #a6cfff;
	--color-irrigation-text: #003483;
	--color-irrigation-shadow: #00348333;

	--color-opening-primary: #f1dcfb;
	--color-opening-secondary: #dcb5f4;
	--color-opening-text: #28002f;
	--color-opening-shadow: #28002f33;

	--color-thermostat-primary: #ffe5e5;
	--color-thermostat-secondary: #ffc1c1;
	--color-thermostat-text: #510000;
	--color-thermostat-shadow: #51000033;

	--color-security-primary: #dcfce9;
	--color-security-secondary: #bbf5d4;
	--color-security-text: #09391b;
	--color-security-shadow: #09391b33;

	--color-voice-primary: #ffe3ed;
	--color-voice-secondary: #ffc0da;
	--color-voice-text: #340023;
	--color-voice-shadow: #34002333;
}

/* Iubenda Styling */
/*#iubenda_policy,
#iubenda_policy * {
	color: var(--color-text) !important;
	background-color: transparent !important;
}

#iubenda_policy details.box_primary h3 {
    background-color: var(--color-surface) !important;
}

#iubenda_policy details.box_primary h3::after {
    border-right-color: var(--color-text-secondary) !important;
}

#iubenda_policy div.details_body {
    background-color: var(--color-surface) !important;
}*/

/* MARK: Base styles */
html {
	font-size: var(--font-size-base);
	font-family: var(--font-family-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	color: var(--color-text);
	letter-spacing: var(--letter-spacing-tight);
}

h1 {
	font-size: var(--font-size-4xl);
}

h2 {
	font-size: var(--font-size-3xl);
}

h3 {
	font-size: var(--font-size-2xl);
}

h4 {
	font-size: var(--font-size-xl);
}

h5 {
	font-size: var(--font-size-lg);
}

h6 {
	font-size: var(--font-size-md);
}

p {
	margin: 0 0 var(--space-16) 0;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

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

code,
pre {
	font-family: var(--font-family-mono);
	font-size: calc(var(--font-size-base) * 0.95);
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
}

code {
	padding: var(--space-1) var(--space-4);
}

pre {
	padding: var(--space-16);
	margin: var(--space-16) 0;
	overflow: auto;
	border: 1px solid var(--color-border);
}

pre code {
	background: none;
	padding: 0;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-base);
	font-size: var(--font-size-base);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: all var(--duration-normal) var(--ease-standard);
	border: none;
	text-decoration: none;
	position: relative;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.btn--primary {
	background: var(--color-primary);

}

.btn--primary:hover {
	background: var(--color-primary-hover);
	color: var(--color-btn-primary-text);
}

.btn--primary:active {
	background: var(--color-primary-active);
}

.btn--secondary {
	background: var(--color-secondary);
	color: var(--color-text);
}

.btn--secondary:hover {
	background: var(--color-secondary-hover);
}

.btn--secondary:active {
	background: var(--color-secondary-active);
}

.btn--outline {
	background: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.btn--outline:hover {
	background: var(--color-secondary);
}

.btn--blur {
	background: var(--color-secondary);
	color: var(--color-text);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.btn--sm {
	padding: var(--space-4) var(--space-12);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-sm);
}

.btn--lg {
	padding: var(--space-10) var(--space-20);
	font-size: var(--font-size-lg);
	border-radius: var(--radius-md);
}

.btn--full-width {
	width: 100%;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Form elements */
.form-control {
	display: block;
	width: 100%;
	padding: var(--space-8) var(--space-12);
	font-size: var(--font-size-md);
	line-height: 1.5;
	color: var(--color-text);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-base);
	transition: border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
}

select.form-control {
	padding: var(--space-8) var(--space-12);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: var(--select-caret-light);
	background-repeat: no-repeat;
	background-position: right var(--space-12) center;
	background-size: 16px;
	padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
[data-color-scheme="dark"] {
	select.form-control {
		background-image: var(--select-caret-dark);
	}
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
	background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
	background-image: var(--select-caret-light);
}

.form-control:focus {
	border-color: var(--color-primary);
	outline: var(--focus-outline);
}

.form-label {
	display: block;
	margin-bottom: var(--space-8);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

.form-group {
	margin-bottom: var(--space-16);
}

/* Card component */
.card {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
	box-shadow: var(--shadow-md);
}

.card__body {
	padding: var(--space-16);
}

.card__header,
.card__footer {
	padding: var(--space-16);
	border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
	display: inline-flex;
	align-items: center;
	padding: var(--space-6) var(--space-12);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
}

.status--success {
	background-color: rgba(var(--color-success-rgb, 33, 128, 141),
			var(--status-bg-opacity));
	color: var(--color-success);
	border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
	background-color: rgba(var(--color-error-rgb, 192, 21, 47),
			var(--status-bg-opacity));
	color: var(--color-error);
	border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
	background-color: rgba(var(--color-warning-rgb, 168, 75, 47),
			var(--status-bg-opacity));
	color: var(--color-warning);
	border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
	background-color: rgba(var(--color-info-rgb, 98, 108, 113),
			var(--status-bg-opacity));
	color: var(--color-info);
	border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* MARK: Container layout */
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--space-16);
	padding-left: var(--space-16);
}

@media (min-width: 640px) {
	.container {
		max-width: var(--container-sm);
	}
}

@media (min-width: 768px) {
	.container {
		max-width: var(--container-md);
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--container-lg);
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: var(--container-xl);
	}
}

@media (min-width: 1536px) {
	.container {
		max-width: var(--container-xxl);
	}
}

/*@media (min-width: 1920px) {
	.container {
		max-width: var(--container-xxxl);
	}
}*/

/* Utility classes */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.gap-4 {
	gap: var(--space-4);
}

.gap-8 {
	gap: var(--space-8);
}

.gap-16 {
	gap: var(--space-16);
}

.m-0 {
	margin: 0;
}

.mt-8 {
	margin-top: var(--space-8);
}

.mb-8 {
	margin-bottom: var(--space-8);
}

.mx-8 {
	margin-left: var(--space-8);
	margin-right: var(--space-8);
}

.my-8 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}

.p-0 {
	padding: 0;
}

.py-8 {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.px-8 {
	padding-left: var(--space-8);
	padding-right: var(--space-8);
}

.py-16 {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.px-16 {
	padding-left: var(--space-16);
	padding-right: var(--space-16);
}

.block {
	display: block;
}

.hidden {
	display: none;
}

/* Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

:focus-visible {
	outline: var(--focus-outline);
	outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
	border: 1px solid var(--color-border-secondary);
}

@font-face {
	font-family: 'FKGroteskNeue';
	src: url('fonts/FKGroteskNeue.woff2') format('woff2');
}

/* MARK: Page Routing System */
.page {
	display: none;
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-standard);
}

.page.active {
	display: block;
	opacity: 1;
}

.page.transitioning {
	opacity: 0;
}

/* Header Styles */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255, 255, 253, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--duration-normal) var(--ease-standard);
}

[data-color-scheme="dark"] .header {
	background: rgba(38, 40, 40, 0.8);
}

[data-color-scheme="dark"] {
	.header {
		background: rgba(38, 40, 40, 0.8);
	}
}

.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-16) 0;
	min-height: 80px;
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl);
	color: var(--color-text);
}

.logo svg {
	height: 40px;
	width: auto;
	border-radius: var(--radius-base);
}

.logo-text {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-tight);
}

.nav {
	display: flex;
	gap: var(--space-32);
}

.nav-link {
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	transition: color var(--duration-fast) var(--ease-standard);
	position: relative;
}

.nav-link.environmental.active {
	color: var(--color-environmental-commitment);
}

.nav-link.environmental:hover {
	color: var(--color-environmental-commitment);
}

.nav-link:hover {
	color: var(--color-primary);
}

.nav-link.active {
	color: var(--color-primary);
}

.nav-link.active::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: 50%;
}

.nav-link.environmental.active::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	background: var(--color-environmental-commitment);
	border-radius: 50%;
}

.header-controls {
	display: flex;
	align-items: center;
	gap: var(--space-16);
}

.lang-switcher {
	display: flex;
	align-items: center;
	padding: var(--space-8) var(--space-12);
	background: var(--color-secondary);
	border: none;
	border-radius: var(--radius-base);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-standard);
	justify-content: center;
	width: 40px;
	height: 40px;
}

.lang-switcher:hover {
	background: var(--color-secondary-hover);
}

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--color-secondary);
	border: none;
	border-radius: var(--radius-base);
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-standard);
	position: relative;
}

.theme-toggle:hover {
	background: var(--color-secondary-hover);
}

.theme-icon {
	position: absolute;
	transition: all var(--duration-normal) var(--ease-standard);
}

.sun-icon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.moon-icon {
	opacity: 0;
	transform: rotate(180deg) scale(0.8);
}

[data-color-scheme="dark"] .sun-icon {
	opacity: 0;
	transform: rotate(180deg) scale(0.8);
}

[data-color-scheme="dark"] .moon-icon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--space-8);
}

.hamburger-line {
	width: 24px;
	height: 2px;
	background-color: var(--color-text);
	margin: 3px 0;
	transition: all var(--duration-normal) var(--ease-standard);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(10px);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: all var(--duration-normal) var(--ease-standard);
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-content {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
	width: 90%;
	max-width: 400px;
	position: relative;
	transform: scale(0.9);
	transition: transform var(--duration-normal) var(--ease-standard);
}

.mobile-menu-overlay.active .mobile-menu-content {
	transform: scale(1);
}

.mobile-menu-close {
	position: absolute;
	top: var(--space-16);
	right: var(--space-16);
	background: none;
	border: none;
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: var(--space-8);
	border-radius: var(--radius-sm);
	transition: all var(--duration-fast) var(--ease-standard);
}

.mobile-menu-close:hover {
	background: var(--color-secondary);
	color: var(--color-text);
}

.mobile-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	margin-top: var(--space-16);
}

.mobile-nav-link {
	color: var(--color-text);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	text-align: center;
	padding: var(--space-16);
	border-radius: var(--radius-base);
	transition: all var(--duration-fast) var(--ease-standard);
}

.mobile-nav-link:hover {
	background: var(--color-secondary);
	color: var(--color-primary);
}

/* Page Hero Styles */
.page-hero {
	padding: 140px 0 80px;
	background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 100%);
	text-align: center;
}

.page-hero.environmental {
	background: linear-gradient(135deg, var(--color-surface-environmental) 0%, color-mix(in srgb, var(--color-environmental-commitment) 10%, transparent) 100%);
}

.page-hero-content {
	max-width: 800px;
	margin: 0 auto;
}

.page-title {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-24);
	line-height: 1.1;
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* Home Page Styles */
.hero {
	padding: 140px 0 80px;
	background: linear-gradient(135deg, var(--color-background) 0%, rgba(255, 107, 53, 0.03) 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.hero {
	position: relative;
	overflow: hidden;
}

.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background-image: url("img/hero_background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;
}

.hero-background {
	background-attachment: fixed;
}

@media (pointer: coarse) {
	.hero-background {
		background-attachment: scroll;
	}
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-background-overlay);
	z-index: 1;
	backdrop-filter: blur(3px);
}

.hero-content {
	position: relative;
	z-index: 2;
}

.photo-credit {
	position: absolute;
	bottom: var(--space-16);
	right: var(--space-16);
	font-size: var(--font-size-xs);
	color: var(--color-text);
	z-index: 3;
	background: var(--color-background-photo-credit);
	padding: var(--space-4) var(--space-8);
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-48);
	align-items: center;
}

.hero-text {
	max-width: 500px;
}

.hero-title {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-24);
	line-height: 1.1;
	background: var(--color-text);
	/*background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);*/
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-subtitle {
	font-size: var(--font-size-xl);
	/*color: var(--color-text-secondary);*/
	color: var(--color-text);
	margin-bottom: var(--space-32);
	line-height: 1.6;
}

.hero-buttons {
	display: flex;
	gap: var(--space-16);
	flex-wrap: wrap;
}

.hero-device {
	display: flex;
	justify-content: center;
	align-items: center;
}

.device-mockup {
	width: 100%;
	aspect-ratio: 4 / 3.2;
	max-width: 500px;
	background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
	border-radius: 40px;
	padding: 8px;
	box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	animation: deviceFloat 4s ease-in-out infinite;
}

[data-color-scheme="dark"] .device-mockup {
	background: linear-gradient(145deg, #3a3a3a, #2e2e2e);
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.3)
}

.device-screen {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	bottom: 8px;
	background: var(--color-surface);
	border-radius: 32px;
	padding: var(--space-16);
	overflow: hidden;
}

.device-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-12);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

.device-status {
	display: flex;
	gap: var(--space-4);
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
}

.device-main h3 {
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.device-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-16);
}

/* Device Views */
.device-view {
	display: none;
}

.device-view.active {
	display: block;
}

/* Room Grid */
.device-rooms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: var(--space-12);
	align-items: center;
}

.device-nav-icon {
	width: 20px;
	height: 20px;
	color: var(--color-text)
}

.device-nav-icon:hover {
	transform: scale(1.1);
}

.room-item.weather {
	position: relative;
	overflow: hidden;
	/* importante per ritagliare l'immagine */
	z-index: 0;
	/* fa sì che i contenuti rimangano sopra l'immagine */
}

.room-item.weather::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('img/sky_sunset.jpg');
	background-size: cover;
	background-position: center;
	filter: blur(1px);
	z-index: -2;
	/* behind everything */
}

.room-item.weather::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-background-overlay);
	z-index: -1;
	/* after the image */
}

.room-item.main {
	position: relative;
	overflow: hidden;
	/* importante per ritagliare l'immagine */
	z-index: 0;
	/* fa sì che i contenuti rimangano sopra l'immagine */
}

.room-item.main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('img/plant.jpg');
	background-size: cover;
	background-position: center;
	filter: blur(1px);
	z-index: -2;
	/* behind everything */
}

.room-item.main::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-background-overlay);
	z-index: -1;
	/* after the image */
}

.room-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-16);
	background: var(--color-secondary);
	border-radius: var(--radius-lg);
	transition: all var(--duration-normal) var(--ease-standard);
	cursor: pointer;
	text-align: center;
}

.room-item:hover {
	background: var(--color-secondary-hover);
	transform: translateY(-2px);
}

.room-item:hover .room-icon {
	transform: scale(1.1);
}

.room-icon {
	width: 32px;
	height: 32px;
}

.room-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.device-interact-text {
	background: var(--color-secondary);
	color: var(--color-text);
	font-size: 10px;
	position: absolute;
	bottom: 20px;
	border-radius: var(--radius-sm);
	left: 50%;
	transform: translateX(-50%);
	padding: 6px;
}

/* Controls View */
.controls-header {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-secondary);
	border: none;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-standard);
}

.back-btn:hover {
	background: var(--color-secondary-hover);
	transform: translateX(-2px);
}

.controls-header h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
	margin: 0;
}

.control-item {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-16);
	background: var(--color-secondary);
	border-radius: var(--radius-lg);
	transition: all var(--duration-normal) var(--ease-standard);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.control-item:hover::before {
	transform: scaleY(1);
}

.control-item:hover {
	background: var(--color-secondary-hover);
	transform: scale(1.02);
}

.control-item.active {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-btn-primary-text);
	transform: scale(1.02);
	/*box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);*/
}

.light.active {
	background: linear-gradient(135deg, var(--color-light-primary), var(--color-light-secondary));
	/*box-shadow: 0 4px 12px var(--color-light-shadow);*/
	color: var(--color-light-text);
}

.load.active {
	background: linear-gradient(135deg, var(--color-load-primary), var(--color-load-secondary));
	/*box-shadow: 0 4px 12px var(--color-load-shadow);*/
	color: var(--color-load-text);
}

.irrigation.active {
	background: linear-gradient(135deg, var(--color-irrigation-primary), var(--color-irrigation-secondary));
	/*box-shadow: 0 4px 12px var(--color-irrigation-shadow);*/
	color: var(--color-irrigation-text);
}

.opening.active {
	background: linear-gradient(135deg, var(--color-opening-primary), var(--color-opening-secondary));
	/*box-shadow: 0 4px 12px var(--color-opening-shadow);*/
	color: var(--color-opening-text);
}

.thermostat.active {
	background: linear-gradient(135deg, var(--color-thermostat-primary), var(--color-thermostat-secondary));
	/*box-shadow: 0 4px 12px var(--color-thermostat-shadow);*/
	color: var(--color-thermostat-text);
}

.control-item.active::before {
	background: rgba(255, 255, 255, 0.3);
	transform: scaleY(1);
}

.control-item svg {
	transition: color var(--duration-normal) var(--ease-standard);
}

.control-item span {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-base);
}

.control-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Sections */
.section-header {
	text-align: center;
	margin-bottom: var(--space-32);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.section-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
}

.section-subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-text-secondary);
}

/* Features Section */
.features {
	padding: 100px 0;
	background: var(--color-surface);
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-24);
}

.feature-card {
	background: var(--color-background);
	border: 1px solid var(--color-card-border);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
	text-align: center;
	transition: all var(--duration-normal) var(--ease-standard);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}

.small-icon {
	width: 24px;
	height: 24px;
}

.feature-icon {
	width: 40px;
	height: 40px;
}

.feature-icon-container {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-24);
	color: white;
	transition: transform var(--duration-normal) var(--ease-standard);
}

.feature-card:hover .feature-icon-container {
	transform: scale(1.1) rotate(5deg);
}

.light-container {
	background: linear-gradient(135deg, var(--color-light-primary), var(--color-light-secondary));
	/*box-shadow: 0 4px 24px var(--color-light-shadow);*/
	color: var(--color-light-text);
}

.thermostat-container {
	background: linear-gradient(135deg, var(--color-thermostat-primary), var(--color-thermostat-secondary));
	/*box-shadow: 0 4px 24px var(--color-thermostat-shadow);*/
	color: var(--color-thermostat-text);
}

.security-container {
	background: linear-gradient(135deg, var(--color-security-primary), var(--color-security-secondary));
	/*box-shadow: 0 4px 24px var(--color-security-shadow);*/
	color: var(--color-security-text);
}

.irrigation-container {
	background: linear-gradient(135deg, var(--color-irrigation-primary), var(--color-irrigation-secondary));
	/*box-shadow: 0 4px 24px var(--color-irrigation-shadow);*/
	color: var(--color-irrigation-text);
}

.opening-container {
	background: linear-gradient(135deg, var(--color-opening-primary), var(--color-opening-secondary));
	/*box-shadow: 0 4px 24px var(--color-opening-shadow);*/
	color: var(--color-opening-text);
}

.voice-container {
	background: linear-gradient(135deg, var(--color-voice-primary), var(--color-voice-secondary));
	/*box-shadow: 0 4px 12px var(--color-voice-shadow);*/
	color: var(--color-voice-text);
}

.feature-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.feature-description {
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* Compatibility Section */
.compatibility {
	padding: 100px 0;
	background: var(--color-background);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.compatibility-background {
	position: absolute;
	inset: 0;
	background-image: url("img/hero_2_background.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	z-index: -2;
	pointer-events: none;
}

.compatibility-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-background-overlay);
	z-index: -1;
	backdrop-filter: blur(3px);
	pointer-events: none;
}

.compatibility-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-32);
	margin-top: var(--space-32);
}

.compatibility-item {
	text-align: center;
	padding: var(--space-24);
	background: color-mix(in srgb, var(--color-background) 30%, transparent);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	backdrop-filter: blur(4px);
	transition: all var(--duration-normal) var(--ease-standard);
	cursor: pointer;
}

.compatibility-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.compatibility-icon {
	width: 80%;
	height: 80%;
}

.compatibility-icon.full {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.compatibility-icon-container {
	width: 80px;
	height: 80px;
	background: var(--color-secondary);
	border-radius: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-16);
	color: var(--color-primary);
	transition: all var(--duration-normal) var(--ease-standard);
	border: 1px solid var(--color-card-border);
}

.compatibility-item:hover .compatibility-icon-container {
	background: var(--color-primary);
	color: white;
	transform: scale(1.1);
}

.compatibility-item h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

/* Download Section */
.download {
	padding: 100px 0;
	background: var(--color-surface);
}

.download-icon {
	width: 36px;
	height: 36px;
}


.download-buttons {
	display: flex;
	justify-content: center;
	gap: var(--space-24);
	flex-wrap: wrap;
	margin-top: var(--space-32);
}

.download-btn {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-16) var(--space-24);
	background: var(--color-background);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text);
	transition: all var(--duration-normal) var(--ease-standard);
	min-width: 200px;
}

.download-btn:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
}

.download-btn svg {
	color: var(--color-primary);
}

.download-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	display: block;
}

.download-store {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	display: block;
}

/* About Page Styles */
.about-company {
	padding: 80px 0;
	background: var(--color-background);
}

.company-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-32);
	align-items: start;
}

.company-story h2 {
	margin-bottom: var(--space-24);
}

.company-story p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-16);
}

.company-stats {
	background: var(--color-surface);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
}

.company-stats h2 {
	margin-bottom: var(--space-24);
	text-align: center;
}

.stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-24);
}

.stat-item {
	text-align: center;
	padding: var(--space-16);
	background: var(--color-background);
	border-radius: var(--radius-base);
	border: 1px solid var(--color-card-border);
}

.stat-number {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-8);
}

.stat-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
}

/* Timeline Section */
.timeline-section {
	padding: 80px 0;
	background: var(--color-surface);
}

.timeline {
	position: relative;
	max-width: 800px;
	margin: var(--space-32) auto 0;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 60px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-border);
}

.timeline-item {
	display: flex;
	margin-bottom: var(--space-32);
	position: relative;
}

.timeline-year {
	width: 120px;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-align: center;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-16);
	margin-right: var(--space-24);
	border: 2px solid var(--color-primary);
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.timeline-content {
	flex: 1;
	padding: var(--space-16) 0;
}

.timeline-content h4 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-8);
	color: var(--color-text);
}

.timeline-content p {
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.6;
}

/* Services Section */
.services-section {
	padding: 80px 0;
	background: var(--color-background);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-32);
	margin-top: var(--space-32);
}

.service-card {
	background: var(--color-surface);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	text-align: center;
	transition: all var(--duration-normal) var(--ease-standard);
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.service-icon-container {
	width: 80px;
	height: 80px;
	background: var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-24);
	color: white;
}

.service-card h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.service-card p {
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Contact Full Section */
.contact-full {
	padding: 80px 0;
	background: var(--color-surface);
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-24);
	margin-top: var(--space-32);
}

.contact-info-card {
	background: var(--color-background);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	text-align: center;
}

.contact-info-card h3 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-primary);
}

.contact-info-card p {
	color: var(--color-text-secondary);
	margin: var(--space-8) 0;
	line-height: 1.5;
}

.contact-info-card a {
	color: var(--color-primary);
	font-weight: var(--font-weight-medium);
}

/* Environmental Page Styles */
.environmental-intro {
	padding: 80px 0;
	background: var(--color-background);
}

.intro-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.intro-content h2 {
	margin-bottom: var(--space-24);
}

.intro-content p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

/* Environmental Benefits */
.page-title.environmental {
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-environmental-commitment) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.environmental-benefits {
	padding: 80px 0;
	background: var(--color-surface-environmental);
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-32);
	margin-top: var(--space-32);
}

.benefit-card {
	background: var(--color-background);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	text-align: center;
	transition: all var(--duration-normal) var(--ease-standard);
}

.benefit-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.benefit-icon {
	width: 80px;
	height: 80px;
	background: var(--color-environmental-commitment);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-24);
	color: white;
}

.benefit-card h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.benefit-card p {
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Smart Monitoring */
.smart-monitoring {
	padding: 80px 0;
	background: var(--color-background);
}

.monitoring-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-32);
	align-items: center;
}

.monitoring-text h2 {
	margin-bottom: var(--space-24);
}

.monitoring-text p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-24);
}

.monitoring-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.monitoring-features li {
	padding: var(--space-8) 0;
	padding-left: var(--space-24);
	position: relative;
	color: var(--color-text-secondary);
}

.monitoring-features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background: var(--color-environmental-commitment);
	border-radius: 50%;
}

.energy-dashboard {
	background: var(--color-surface-environmental);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	text-align: center;
}

.energy-dashboard h3 {
	margin-bottom: var(--space-24);
	color: var(--color-text);
}

.energy-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-16);
}

.metric {
	text-align: center;
	padding: var(--space-16);
	background: var(--color-background);
	border-radius: var(--radius-base);
	border: 1px solid var(--color-card-border);
}

.metric-value {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-environmental-commitment);
	margin-bottom: var(--space-8);
}

.metric-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-medium);
}

/* Air Quality */
.air-quality {
	padding: 80px 0;
	background: var(--color-surface-environmental);
}

.air-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-32);
	margin-top: var(--space-32);
}

.air-text p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.air-benefits {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.air-benefit {
	background: var(--color-background);
	padding: var(--space-24);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
}

.air-benefit h4 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-12);
	color: var(--color-environmental-commitment);
}

.air-benefit p {
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin: 0;
}

/* Sustainability projects */
.sustainability-projects {
	padding: 80px 0;
	background: var(--color-background);
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-32);
	margin-top: var(--space-32);
}

.project-card {
	background: var(--color-surface-environmental);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-card-border);
	text-align: center;
	transition: all var(--duration-normal) var(--ease-standard);
}

.project-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.project-year {
	display: inline-block;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-environmental-commitment);
	background: var(--color-background);
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-base);
	margin-bottom: var(--space-16);
	border: 1px solid var(--color-card-border);
}

.project-card h3 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.project-card p {
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* Footer */
.footer {
	background: var(--color-background);
	padding: 60px 0 var(--space-24);
	border-top: 1px solid var(--color-border);
}

.footer-content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--space-32);
	margin-bottom: var(--space-32);
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-xl);
	color: var(--color-text);
	margin-bottom: var(--space-16);
}

.footer-section h4 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-16);
	color: var(--color-text);
}

.contact-info p {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
	color: var(--color-text-secondary);
	line-height: 1.5;
}

.contact-info svg {
	color: var(--color-primary);
	margin-top: 2px;
	flex-shrink: 0;
}

.footer-links {
	list-style: none;
	padding: 0;
}

.footer-links li {
	margin-bottom: var(--space-8);
}

.footer-links a {
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-standard);
}

.footer-links a:hover {
	color: var(--color-primary);
}

.footer-bottom {
	text-align: center;
	padding-top: var(--space-24);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2000;
	backdrop-filter: blur(4px);
}

.modal.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-content {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	animation: modalSlideIn var(--duration-normal) var(--ease-standard);
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-24);
	border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
	margin: 0;
}

.modal-close {
	background: none;
	border: none;
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	transition: all var(--duration-fast) var(--ease-standard);
}

.modal-close:hover {
	background: var(--color-secondary);
	color: var(--color-text);
}

.modal-body {
	padding: var(--space-24);
}

.modal-body p {
	font-size: var(--font-size-lg);
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-16);
}

/* Animations */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease-out;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes deviceFloat {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes controlPulse {

	0%,
	90%,
	100% {
		transform: translateX(0);
	}

	5%,
	15% {
		transform: translateX(4px);
	}
}

/* Responsive Design */

@media (min-width: 1920px) {
	.device-mockup {
		width: 100%;
		aspect-ratio: 4 / 3.2;
		max-width: 600px;
	}
}

@media (max-width: 1024px) {

	.hero-content,
	.company-grid,
	.monitoring-content,
	.air-content {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.footer-content {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

@media (max-width: 768px) {

	/* Mobile Header */
	.nav-desktop {
		display: none;
	}

	.mobile-menu-btn {
		display: flex;
	}

	.header-content {
		padding: var(--space-12) 0;
		min-height: 70px;
	}

	/* Hamburger Animation */
	.mobile-menu-btn.active .hamburger-line:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.mobile-menu-btn.active .hamburger-line:nth-child(2) {
		opacity: 0;
	}

	.mobile-menu-btn.active .hamburger-line:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -6px);
	}

	/* Mobile sections */
	.hero,
	.page-hero {
		padding: 120px 0 60px;
		text-align: left;
	}

	.hero-buttons {
		justify-content: left;
	}

	.device-mockup {
		aspect-ratio: 9 / 18;
		max-width: 300px;
		min-width: 240px;
	}

	.device-rooms {
		gap: var(--space-12);
	}

	.room-item {
		padding-right: var(--space-12);
		padding-left: var(--space-12);
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}

	.room-icon {
		width: 32px;
		height: 32px;
	}

	.room-name {
		font-size: var(--font-size-sm);
		padding-top: var(--space-8);
	}

	.features-grid,
	.services-grid,
	.benefits-grid,
	.projects-grid {
		grid-template-columns: 1fr;
	}

	.compatibility-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-16);
	}

	.download-buttons {
		flex-direction: column;
		align-items: center;
	}

	.timeline::before {
		left: 30px;
	}

	.timeline-year {
		width: 60px;
		font-size: var(--font-size-lg);
		padding: var(--space-8);
		margin-right: var(--space-16);
		align-content: center;
	}

	.timeline-content {
		padding: var(--space-8) 0;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.energy-metrics {
		grid-template-columns: 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.footer-content {
		text-align: left;
	}

	.footer-section {
		margin-bottom: var(--space-32);
	}

	.contact-info p {
		justify-content: left;
		text-align: left;
	}

	.footer-links {
		text-align: left;
	}

	:root {
		--modal-image-height: 240px;
	}
}

@media (max-width: 480px) {

	.download-btn {
		min-width: auto;
		width: 100%;
		max-width: 300px;
	}

	.page-title {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}

	.hero-title {
		font-size: clamp(2rem, 8vw, 3rem);
	}
}

@media (max-width: 300px) {

	.compatibility-grid {
		grid-template-columns: 1fr;
	}
}