/* Deployed stylesheet for public; copied from project root styles.css at build time. */
/* For manual deploys, keep this file in public so the site can load CSS. */

:root {
				--bg: #0b1020;
				--card: #0f1530cc;
				--muted: #94a3b8;
				--text: #e6eefc;
				--primary: #2d7df4;
				--primary-600: #1e6bf0;
				--primary-700: #135de6;
				--accent: #00d4ff;
				--success: #22c55e;
				--warning: #f59e0b;
				--danger: #ef4444;
				--shadow: 0 10px 30px rgba(0, 16, 56, 0.25);
				--radius: 16px;
				--radius-sm: 12px;
				--radius-lg: 28px;
				--glass: backdrop-filter: blur(12px);
				--container: 1200px;
				--grid-gap: 24px;
				--border: #1a2757;
				--border-light: #182043;
			}

			/* Light theme variables */
			:root[data-theme="light"] {
				--bg: #f8fafc;
				--card: #ffffff;
				--muted: #64748b;
				--text: #1e293b;
				--primary: #2d7df4;
				--primary-600: #1e6bf0;
				--primary-700: #135de6;
				--accent: #00d4ff;
				--shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
				--border: #e2e8f0;
				--border-light: #cbd5e1;
			}

			* {
				box-sizing: border-box;
			}

			html,
			body {
				height: 100%;
				scroll-behavior: smooth;
				background: var(--bg);
				color: var(--text);
				font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
					Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji,
					Segoe UI Symbol, "Noto Color Emoji", sans-serif;
				line-height: 1.6;
	margin: 0; /* Remove default browser margin to eliminate top gap above shell-topbar */
			}

			/* Dark theme background */
			html[data-theme="dark"],
			html[data-theme="dark"] body {
				background: #0b1020;
			}

			/* Light theme styles */
			html[data-theme="light"],
			html[data-theme="light"] body {
				background: #f1f5f9;
			}

			html[data-theme="light"] .header {
				background: rgba(255, 255, 255, 0.8);
				border-bottom: 1px solid var(--border);
			}

			html[data-theme="light"] .nav-links a {
				color: #475569;
			}

			html[data-theme="light"] .nav-links a:hover {
				color: #1e293b;
				background: #f1f5f9;
			}

			html[data-theme="light"] .btn-outline {
				color: #475569;
				background: #f8fafc;
				border: 1px solid var(--border);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
			}

			html[data-theme="light"] .feature {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .card {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .card:hover {
				border-color: #94a3b8;
			}

			html[data-theme="light"] .panel {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .discount-card {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .testimonials {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .t-card {
				background: #f8fafc;
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .input,
			html[data-theme="light"] .textarea,
			html[data-theme="light"] .select {
				background: #f8fafc;
				border: 1px solid var(--border);
				color: var(--text);
			}

			html[data-theme="light"] .contact-item {
				background: #f8fafc;
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .chip {
				background: #f1f5f9;
				border: 1px solid var(--border);
				color: #475569;
			}

			/* WhatsApp contact chips (improved contrast & clarity) */
			.chip-wa { 
				background: linear-gradient(135deg,#0d5ee6 0%,#2d7df4 40%,#00b4d8 100%);
				color:#fff !important;
				font-weight:600;
				letter-spacing:.25px;
				box-shadow:0 2px 4px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08) inset;
				display:inline-flex;
				align-items:center;
				gap:6px;
				padding:8px 14px;
				border-radius:999px;
				border:1px solid rgba(255,255,255,.2);
				text-decoration:none;
				font-size:.83rem;
				transition:background .25s, transform .2s;
			}
			.chip-wa:hover { background:linear-gradient(135deg,#2d7df4,#0d5ee6); transform:translateY(-2px); }
			.chip-wa:active { transform:translateY(0); }
			.chip-wa .wa-num { font-weight:800; }
			.chip-wa .wa-label { opacity:.9; }
			html[data-theme='light'] .chip-wa { background:linear-gradient(135deg,#1d72f0,#4dabf7); color:#fff; border:1px solid rgba(0,0,0,.05); }

			html[data-theme="light"] .cta-band {
				background: linear-gradient(
						to right,
						rgba(219, 234, 254, 0.8),
						rgba(224, 242, 254, 0.6)
					),
					#f8fafc;
				border: 1px solid var(--border);
			}

			html[data-theme="light"] footer {
				border-top: 1px solid var(--border);
				background: #f8fafc;
			}

			html[data-theme="light"] .foot-col a {
				color: #475569;
			}

			html[data-theme="light"] .foot-col a:hover {
				color: #1e293b;
			}

			html[data-theme="light"] .mobile-menu {
				background: var(--card);
				border: 1px solid var(--border);
			}

			html[data-theme="light"] .mobile-menu a {
				color: var(--text);
			}

			html[data-theme="light"] .mobile-menu a:hover {
				background: #f1f5f9;
			}

			html[data-theme="light"] .separator {
				background: var(--border);
			}

			html[data-theme="light"] .hero p {
				color: #475569;
			}

			html[data-theme="light"] .stat {
				background: #f1f5f9;
				border: 1px solid var(--border);
				color: #475569;
			}

			html[data-theme="light"] .stat strong {
				color: #1e293b;
			}

			html[data-theme="light"] .eyebrow {
				background: #e2e8f0;
				border: 1px solid #cbd5e1;
				color: #475569;
			}

			html[data-theme="light"] .hero-badge {
				background: rgba(255, 255, 255, 0.7);
				border: 1px solid var(--border);
				color: #475569;
			}

			html[data-theme="light"] .field label {
				color: #334155;
			}

			a {
				color: inherit;
				text-decoration: none;
			}

			img {
				max-width: 100%;
				height: auto;
				display: block;
			}

			.container {
				width: 100%;
				max-width: var(--container);
				margin: 0 auto;
				padding: 0 20px;
			}

			/* Header */
			.header {
				position: sticky;
				top: 0;
				z-index: 50;
				background: linear-gradient(180deg, rgba(5, 8, 20, 0.85), rgba(5, 8, 20, 0.4)),
					#0b1020;
				border-bottom: 1px solid var(--border-light);
				backdrop-filter: blur(10px);
			}

			html[data-theme="light"] .header {
				background: rgba(255, 255, 255, 0.8);
			}

			.nav {
				display: grid;
				grid-template-columns: auto 1fr auto;
				align-items: center;
				gap: 20px;
				padding: 14px 0;
			}

			.brand {
				display: flex;
				align-items: center;
				gap: 12px;
				font-weight: 800;
				letter-spacing: 0.2px;
			}

			.brand .logo {
				width: auto;
				height: 52px;
				filter: drop-shadow(0 8px 20px rgba(45, 125, 244, 0.5));
			}
      
			/* Hide light logo by default (dark theme) */
			.brand .logo-light {
				display: none;
			}
      
			/* Show light logo in light theme */
			html[data-theme="light"] .brand .logo-light {
				display: block;
			}
      
			/* Hide dark logo in light theme */
			html[data-theme="light"] .brand .logo-dark {
				display: none;
			}
      
			/* Footer logo styles */
			.foot-col .logo {
				width: auto;
				height: 52px;
			}
      
			.foot-col .logo-light {
				display: none;
			}
      
			html[data-theme="light"] .foot-col .logo-light {
				display: block;
			}
      
			html[data-theme="light"] .foot-col .logo-dark {
				display: none;
			}

			.nav-links {
				display: none;
				gap: 18px;
				justify-content: center;
				font-weight: 600;
				color: #c9d7ff;
			}

			.nav-links a {
				padding: 10px 12px;
				border-radius: 10px;
				transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
			}

			.nav-links a:hover {
				color: #ffffff;
				background: #0f1838;
				transform: translateY(-1px);
			}

			.nav-cta {
				display: flex;
				gap: 10px;
				margin-left: auto;
			}

			.theme-toggle-container {
				display: flex;
				align-items: center;
				gap: 8px;
			}

			.theme-label {
				font-size: 0.9rem;
				color: var(--muted);
			}

			.theme-toggle {
				background: #0b1331;
				border: 1px solid #203169;
				border-radius: 12px;
				width: 46px;
				height: 24px;
				position: relative;
				cursor: pointer;
				display: flex;
				align-items: center;
				padding: 0 2px;
			}

			html[data-theme="light"] .theme-toggle {
				background: #e2e8f0;
				border: 1px solid #cbd5e1;
			}

			.theme-toggle::before {
				content: "";
				width: 18px;
				height: 18px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				transition: transform 0.3s ease;
				transform: translateX(0);
			}

			html[data-theme="light"] .theme-toggle::before {
				transform: translateX(20px);
				background: #1e293b;
			}

			.btn {
				appearance: none;
				border: none;
				cursor: pointer;
				padding: 12px 18px;
				border-radius: 14px;
				font-weight: 700;
				letter-spacing: 0.2px;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				transition: transform 0.15s ease, box-shadow 0.15s ease, background
						0.2s ease, color 0.2s ease;
				white-space: nowrap;
			}

			.btn:hover {
				transform: translateY(-1px);
			}

			.btn:active {
				transform: translateY(0);
			}

			.btn-outline {
				color: #dbe7ff;
				background: #0b1331;
				border: 1px solid #203169;
				box-shadow: 0 4px 14px rgba(17, 36, 100, 0.25);
			}

			.btn-primary {
				color: #fff;
				background: linear-gradient(135deg, var(--primary), var(--primary-700));
				box-shadow: 0 8px 22px rgba(45, 125, 244, 0.4);
			}

			/* Notification button states */
			#notificationBtn.enabled {
				background: var(--success);
				border-color: var(--success);
				color: white;
			}

			#notificationBtn.blocked {
				background: var(--danger);
				border-color: var(--danger);
				color: white;
				cursor: not-allowed;
			}

			.menu-btn {
				display: none;
			}
      
			@media (max-width: 720px) {
				.menu-btn {
					display: inline-flex;
					padding: 8px 12px;
					font-size: 0.9rem;
				}
        
				.brand .logo {
					height: 80px; /* Increase this value as needed */
				}

				/* Hide scroll bars on mobile for cleaner look */
				html, body {
					-webkit-overflow-scrolling: touch;
				}
        
				/* Hide scroll bar for webkit browsers (Chrome, Safari, Edge) */
				::-webkit-scrollbar {
					display: none;
				}
        
				/* Hide scroll bar for Firefox */
				html {
					scrollbar-width: none;
				}
			}

			/* Hero */
			.hero {
				position: relative;
				padding: 84px 0 40px;
				overflow: hidden;
				isolation: isolate;
				background: radial-gradient(800px 400px at 20% 10%, rgba(45, 125, 244, 0.15), transparent 70%),
					radial-gradient(700px 400px at 80% -10%, rgba(0, 212, 255, 0.1), transparent 70%),
					#0b1020;
			}

			html[data-theme="light"] .hero {
				background: radial-gradient(800px 400px at 20% 10%, rgba(45, 125, 244, 0.15), transparent 70%),
					radial-gradient(700px 400px at 80% -10%, rgba(0, 212, 255, 0.1), transparent 70%),
					#f1f5f9;
			}

			.hero-grid {
				display: grid;
				grid-template-columns: 1.1fr 0.9fr;
				gap: 36px;
				align-items: center;
			}

			.eyebrow {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				padding: 8px 12px;
				border-radius: 999px;
				background: linear-gradient(180deg, #0e1a3f, #0b1431);
				border: 1px solid #1f2b5e;
				color: #cfe0ff;
				font-weight: 700;
				font-size: 0.85rem;
				letter-spacing: 0.25px;
				white-space: nowrap;
			}

			.eyebrow .dot {
				width: 8px;
				height: 8px;
				background: #22c55e;
				border-radius: 50%;
				box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.15);
			}

			.hero h1 {
				margin: 14px 0 12px;
				font-family: "Plus Jakarta Sans", Inter, sans-serif;
				font-size: clamp(2.2rem, 3vw + 1rem, 3.6rem);
				line-height: 1.08;
				letter-spacing: -0.5px;
			}

			.gradient {
				background: linear-gradient(90deg, #bfe3ff, #ffffff);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

			html[data-theme="light"] .gradient {
				background: linear-gradient(90deg, #2d7df4, #135de6);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

			.hero p {
				color: #c9d7ff;
				font-size: 1.05rem;
				max-width: 680px;
			}

			html[data-theme="light"] .hero p {
				color: #475569;
			}

			.hero-cta {
				margin-top: 18px;
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
			}

			.hero-stats {
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				gap: 12px;
				margin-top: 26px;
			}

			.stat {
				padding: 14px 16px;
				border-radius: 14px;
				background: linear-gradient(180deg, #0e1633, #0a122a);
				border: 1px solid #1a2757;
				color: #cfe0ff;
				text-align: center;
			}

			html[data-theme="light"] .stat {
				background: #f1f5f9;
				border: 1px solid var(--border);
				color: #475569;
			}

			.stat strong {
				display: block;
				font-size: 1.2rem;
				color: #fff;
			}

			html[data-theme="light"] .stat strong {
				color: #1e293b;
			}

			.hero-media {
				position: relative;
				border-radius: var(--radius-lg);
				overflow: hidden;
				border: 1px solid #1a2757;
				box-shadow: var(--shadow);
				transform: translateZ(0);
			}

			html[data-theme="light"] .hero-media {
				border: 1px solid var(--border);
			}

			.hero-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				aspect-ratio: 4/3;
				filter: saturate(1.05) contrast(1.02);
				transform: scale(1.02);
			}

			.hero-badge {
				position: absolute;
				bottom: 14px;
				left: 14px;
				padding: 10px 12px;
				border-radius: 12px;
				background: rgba(5, 12, 32, 0.7);
				border: 1px solid #203169;
				color: #d2e1ff;
				backdrop-filter: blur(6px);
				display: flex;
				align-items: center;
				gap: 10px;
				white-space: nowrap;
			}

			html[data-theme="light"] .hero-badge {
				background: rgba(255, 255, 255, 0.7);
				border: 1px solid var(--border);
				color: #475569;
			}

			.hero-badge .circle {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: var(--accent);
				box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.15);
			}

			/* Section base */
			section {
				padding: 70px 0;
				background: #0b1020;
			}

			html[data-theme="light"] section {
				background: #f1f5f9;
				border-bottom: 1px solid #e2e8f0;
			}

			.section-head {
				margin-bottom: 18px;
				display: grid;
				gap: 8px;
			}

			.section-eyebrow {
				color: #9fb7ff;
				font-weight: 800;
				letter-spacing: 0.3px;
				text-transform: uppercase;
				font-size: 0.85rem;
			}

			html[data-theme="light"] .section-eyebrow {
				color: #64748b;
			}

			.section-title {
				font-family: "Plus Jakarta Sans", Inter, sans-serif;
				font-weight: 800;
				font-size: clamp(1.6rem, 1.2vw + 1rem, 2.1rem);
			}

			.muted {
				color: var(--muted);
			}

			/* Features strip */
			.features {
				display: grid;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: var(--grid-gap);
				padding: 20px;
			}

			.feature {
				border-radius: var(--radius);
				padding: 16px 16px;
				border: 1px solid #1a2757;
				background: linear-gradient(180deg, #0e1633, #0a122a);
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 12px;
				align-items: center;
			}

			html[data-theme="light"] .feature {
				background: var(--card);
				border: 1px solid var(--border);
			}

			.icon {
				display: grid;
				place-items: center;
				width: 42px;
				height: 42px;
				border-radius: 12px;
				background: linear-gradient(
					135deg,
					rgba(45, 125, 244, 0.15),
					rgba(0, 212, 255, 0.08)
				);
				border: 1px solid #1e2e61;
				color: #bfe3ff;
			}

			html[data-theme="light"] .icon {
				background: linear-gradient(
					135deg,
					rgba(45, 125, 244, 0.1),
					rgba(0, 212, 255, 0.05)
				);
				border: 1px solid #cbd5e1;
				color: #2d7df4;
			}

			.feature h4 {
				margin: 0;
				font-size: 1rem;
			}

			html[data-theme="light"] .feature h4 {
				color: #1e293b;
			}

			.feature p {
				margin: 0;
				font-size: 0.9rem;
				color: #b6c6ee;
			}

			html[data-theme="light"] .feature p {
				color: #64748b;
			}

			/* Services */
			.cards-grid {
				margin-top: 18px;
				display: grid;
				grid-template-columns: repeat(3, minmax(0, 1fr));
				gap: var(--grid-gap);
			}
      
			.services-cta {
				display: flex;
				justify-content: center;
				margin-top: 30px;
			}
      
			.card {
				position: relative;
				border-radius: var(--radius);
				overflow: hidden;
				border: 1px solid #1a2757;
				background: linear-gradient(180deg, #0f1530, #0a122a);
				transition: transform 0.25s ease, box-shadow 0.25s ease,
					border-color 0.2s ease;
			}
      
			html[data-theme="light"] .card {
				border: 1px solid var(--border);
				background: var(--card);
			}
      
			.card:hover {
				transform: translateY(-4px);
				box-shadow: 0 16px 40px rgba(10, 30, 90, 0.35);
				border-color: #25408b;
			}
      
			html[data-theme="light"] .card:hover {
				box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
				border-color: #94a3b8;
			}
      
			.card-media {
				position: relative;
				aspect-ratio: 16/10;
				overflow: hidden;
			}
      
			.card-media img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.6s ease;
			}
      
			.card:hover .card-media img {
				transform: scale(1.06);
			}
      
			.card-body {
				padding: 16px;
				display: grid;
				gap: 8px;
			}
      
			.card-title {
				display: flex;
				align-items: center;
				gap: 10px;
				font-weight: 800;
			}
      
			html[data-theme="light"] .card-title {
				color: #1e293b;
			}
      
			.card p {
				margin: 0;
				color: #b9c9f1;
				font-size: 0.98rem;
			}
      
			html[data-theme="light"] .card p {
				color: #64748b;
			}
      
			/* Chip positioning for services cards only */
			.card .chip {
				position: absolute;
				top: 12px;
				right: 12px;
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 6px 10px;
				border-radius: 999px;
				border: 1px solid #1c2a5e;
				background: #0b1431;
				color: #cfe0ff;
				font-size: 0.85rem;
				font-weight: 700;
				z-index: 2;
			}
      
			html[data-theme="light"] .card .chip {
				border: 1px solid var(--border);
				background: #f1f5f9;
				color: #475569;
			}

			/* Pricing cards */
			#pricing .cards-grid {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
      
			#pricing .card {
				background: linear-gradient(180deg, #1a2757, #0f1530);
				border: 1px solid #25408b;
				transition: all 0.3s ease;
			}
      
			#pricing .card:hover {
				transform: translateY(-5px);
				box-shadow: 0 15px 30px rgba(45, 125, 244, 0.3);
				border-color: #2d7df4;
			}
      
			html[data-theme="light"] #pricing .card {
				background: linear-gradient(180deg, #ffffff, #f8fafc);
				border: 1px solid #cbd5e1;
			}
      
			html[data-theme="light"] #pricing .card:hover {
				box-shadow: 0 15px 30px rgba(45, 125, 244, 0.15);
				border-color: #94a3b8;
			}
      
			#pricing .card .card-title {
				color: #2d7df4;
				font-size: 1.2rem;
			}
      
			html[data-theme="light"] #pricing .card .card-title {
				color: #1e6bf0;
			}
      
			#pricing .card .card-media {
				border-bottom: 1px solid rgba(45, 125, 244, 0.2);
			}
      
			#pricing .card p {
				color: #c9d7ff;
				font-size: 0.95rem;
			}
      
			html[data-theme="light"] #pricing .card p {
				color: #64748b;
			}
      
			#pricing .card .btn {
				margin-top: 15px;
				width: 100%;
				text-align: center;
				justify-content: center;
				background: linear-gradient(135deg, #2d7df4, #1e6bf0);
				border: none;
				color: white;
				font-weight: 600;
				padding: 12px 16px;
				border-radius: 12px;
				box-shadow: 0 4px 12px rgba(45, 125, 244, 0.3);
				transition: all 0.3s ease;
			}
      
			#pricing .card .btn:hover {
				background: linear-gradient(135deg, #1e6bf0, #135de6);
				box-shadow: 0 6px 16px rgba(45, 125, 244, 0.4);
				transform: translateY(-2px);
			}
      
			html[data-theme="light"] #pricing .card .btn {
				background: linear-gradient(135deg, #2d7df4, #1e6bf0);
				box-shadow: 0 4px 12px rgba(45, 125, 244, 0.2);
			}
      
			html[data-theme="light"] #pricing .card .btn:hover {
				box-shadow: 0 6px 16px rgba(45, 125, 244, 0.3);
			}
      
			/* Mobile responsive pricing cards */
			@media (max-width: 720px) {
				#pricing .card .card-title {
					font-size: 1.1rem;
				}
        
				#pricing .card p {
					font-size: 0.9rem;
				}
        
				#pricing .card .btn {
					padding: 10px 14px;
					font-size: 0.95rem;
				}
			}

			/* Process */
			.process {
				display: grid;
				grid-template-columns: 1.2fr 0.8fr;
				gap: var(--grid-gap);
				align-items: center;
			}

			.process-cta-mobile {
				display: none;
				margin: 20px 0;
				text-align: center;
			}

			@media (max-width: 1024px) {
				.process-cta-mobile {
					display: block;
				}
			}

			.timeline {
				display: grid;
				gap: 16px;
			}

			.step {
				display: grid;
				grid-template-columns: 44px 1fr;
				gap: 14px;
				align-items: start;
			}

			.step .num {
				display: grid;
				place-items: center;
				width: 44px;
				height: 44px;
				border-radius: 12px;
				background: linear-gradient(135deg, #1542a7, #2d7df4);
				color: #fff;
				font-weight: 800;
				border: 1px solid #315fc0;
				box-shadow: 0 8px 22px rgba(45, 125, 244, 0.35);
			}

			html[data-theme="light"] .step .num {
				background: linear-gradient(135deg, #dbe7ff, #2d7df4);
				color: #1e293b;
				border: 1px solid #94a3b8;
			}

			/* Discounts */
			.discounts {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--grid-gap);
			}

			.discount-card {
				border-radius: var(--radius);
				border: 1px solid #1a2757;
				background: linear-gradient(180deg, #0e1633, #0a122a);
				padding: 18px;
				display: grid;
				grid-template-columns: auto 1fr auto;
				gap: 14px;
				align-items: center;
			}

			html[data-theme="light"] .discount-card {
				border: 1px solid var(--border);
				background: var(--card);
			}

			.discount-card strong {
				font-size: 1.1rem;
			}

			html[data-theme="light"] .discount-card strong {
				color: #1e293b;
			}

			.badge {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				padding: 8px 10px;
				border-radius: 12px;
				background: #102053;
				border: 1px solid #203169;
				color: #cfe0ff;
				font-weight: 700;
			}

			html[data-theme="light"] .badge {
				background: #e2e8f0;
				border: 1px solid var(--border);
				color: #475569;
			}

			/* About / Mission / Vision */
			.split {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--grid-gap);
			}

			.panel {
				border-radius: var(--radius);
				border: 1px solid #1a2757;
				background: linear-gradient(180deg, #0e1633, #0a122a);
				padding: 24px;
			}

			html[data-theme="light"] .panel {
				border: 1px solid var(--border);
				background: var(--card);
			}

			/* Testimonials (auto slider) */
			.testimonials {
				position: relative;
				overflow: hidden;
				border-radius: var(--radius);
				border: 1px solid #1a2757;
				background: linear-gradient(180deg, #0e1633, #0a122a);
			}

			html[data-theme="light"] .testimonials {
				border: 1px solid var(--border);
				background: var(--card);
			}

			.track {
				display: flex;
				gap: 18px;
				padding: 18px;
				will-change: transform;
			}

			.t-card {
				min-width: clamp(280px, 33%, 420px);
				border: 1px solid #203169;
				border-radius: 16px;
				background: #0d1636;
				padding: 16px;
			}

			html[data-theme="light"] .t-card {
				border: 1px solid var(--border);
				background: #f8fafc;
			}

			.t-card .who {
				display: flex;
				align-items: center;
				gap: 12px;
				margin-bottom: 10px;
			}

			.avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				border: 1px solid #315fc0;
			}

			html[data-theme="light"] .avatar {
				border: 1px solid #cbd5e1;
			}

			/* Contact */
			.contact {
				display: grid;
				grid-template-columns: 1.1fr 0.9fr;
				gap: var(--grid-gap);
				align-items: start;
			}

			.contact .panel form {
				display: grid;
				gap: 12px;
			}

			.field {
				display: grid;
				gap: 6px;
			}

			.field label {
				font-weight: 700;
				color: #d6e6ff;
				font-size: 0.95rem;
			}

			html[data-theme="light"] .field label {
				color: #334155;
			}

			.input,
			.textarea,
			.select {
				width: 100%;
				padding: 12px 14px;
				border-radius: 12px;
				border: 1px solid #203169;
				background: #0b1431;
				color: #e6eefc;
				outline: none;
				transition: border-color 0.2s ease, box-shadow 0.2s ease;
			}

			html[data-theme="light"] .input,
			html[data-theme="light"] .textarea,
			html[data-theme="light"] .select {
				background: #f8fafc;
				border: 1px solid var(--border);
				color: var(--text);
			}

			.textarea {
				min-height: 110px;
				resize: vertical;
			}

			.input:focus,
			.textarea:focus,
			.select:focus {
				border-color: #2d7df4;
				box-shadow: 0 0 0 6px rgba(45, 125, 244, 0.15);
			}

			html[data-theme="light"] .input:focus,
			html[data-theme="light"] .textarea:focus,
			html[data-theme="light"] .select:focus {
				border-color: #2d7df4;
				box-shadow: 0 0 0 6px rgba(45, 125, 244, 0.15);
			}

			.contact-list {
				display: grid;
				gap: 12px;
				margin-top: 8px;
			}

			.contact-item {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 12px;
				align-items: center;
				padding: 12px;
				border-radius: 12px;
				border: 1px solid #203169;
				background: #0b1431;
			}

			html[data-theme="light"] .contact-item {
				border: 1px solid var(--border);
				background: #f8fafc;
			}

			/* CTA band */
			.cta-band {
				margin-top: 40px;
				border-radius: var(--radius-lg);
				border: 1px solid #1a2757;
				background: linear-gradient(
						to right,
						rgba(13, 94, 230, 0.35),
						rgba(0, 212, 255, 0.18)
					),
					linear-gradient(180deg, #0e1633, #0a122a);
				padding: 40px;
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 30px;
				align-items: center;
				position: relative;
				overflow: hidden;
			}

			.cta-band::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: 
					radial-gradient(circle at 20% 30%, rgba(45, 125, 244, 0.1) 0%, transparent 40%),
					radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 40%);
				z-index: 0;
			}

			.cta-band > * {
				position: relative;
				z-index: 1;
			}

			html[data-theme="light"] .cta-band {
				border: 1px solid var(--border);
				background: linear-gradient(
						to right,
						rgba(219, 234, 254, 0.8),
						rgba(224, 242, 254, 0.6)
					),
					#f8fafc;
			}

			html[data-theme="light"] .cta-band::before {
				background: 
					radial-gradient(circle at 20% 30%, rgba(45, 125, 244, 0.05) 0%, transparent 40%),
					radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.05) 0%, transparent 40%);
			}

			/* Footer */
			footer {
				margin-top: 40px;
				border-top: 1px solid #17214a;
				padding: 28px 0 40px;
				color: #b0c5ff;
				background: linear-gradient(180deg, #0e1633, #0a122a);
			}

			html[data-theme="light"] footer {
				border-top: 1px solid var(--border);
				background: #f8fafc;
				color: #64748b;
			}

			.footer-grid {
				display: grid;
				grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
				gap: var(--grid-gap);
			}

			.foot-col h5 {
				margin: 0 0 10px;
				color: #e9f2ff;
				font-family: "Plus Jakarta Sans", Inter, sans-serif;
			}

			html[data-theme="light"] .foot-col h5 {
				color: #1e293b;
			}

			.foot-col a {
				color: #c4d6ff;
			}

			html[data-theme="light"] .foot-col a {
				color: #475569;
			}

			.foot-col a:hover {
				color: #fff;
			}

			html[data-theme="light"] .foot-col a:hover {
				color: #1e293b;
			}

			.credits {
				margin-top: 18px;
				font-size: 0.9rem;
				color: #94a3b8;
			}

			html[data-theme="light"] .credits {
				color: #94a3b8;
			}

			/* Scroll reveal */
			.reveal {
				opacity: 0;
				transform: translateY(16px) scale(0.98);
				transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
			}
			.reveal.in {
				opacity: 1;
				transform: translateY(0) scale(1);
			}

			/* Floating action */
			.float-cta {
				position: fixed;
				right: 16px;
				bottom: 16px;
				z-index: 60;
				display: grid;
				gap: 10px;
			}

			.fab {
				position: relative;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				padding: 12px 14px;
				border-radius: 999px;
				background: linear-gradient(135deg, #1e6bf0, #2d7df4);
				color: #fff;
				font-weight: 800;
				border: 1px solid #315fc0;
				box-shadow: 0 12px 26px rgba(45, 125, 244, 0.5);
			}

			.fab.whatsapp {
				background: linear-gradient(135deg, #22c55e, #16a34a);
				border-color: #1f8f4d;
				box-shadow: 0 12px 26px rgba(34, 197, 94, 0.5);
			}

			.to-top {
				display: inline-grid;
				place-items: center;
				width: 46px;
				height: 46px;
				border-radius: 50%;
				background: #0b1431;
				border: 1px solid #203169;
				color: #cfe0ff;
			}

			html[data-theme="light"] .to-top {
				background: #f1f5f9;
				border: 1px solid var(--border);
				color: #64748b;
			}

			/* Mobile */
			@media (max-width: 1024px) {
				.hero-grid,
				.process,
				.contact {
					grid-template-columns: 1fr;
				}
				.features {
					grid-template-columns: repeat(2, 1fr);
				}
				.cards-grid {
					grid-template-columns: repeat(2, 1fr);
				}
				.discounts,
				.split {
					grid-template-columns: 1fr;
				}
				.footer-grid {
					grid-template-columns: repeat(2, 1fr);
				}

				/* Dashboard mobile improvements */
				.dash-wrapper {
					grid-template-columns: 1fr !important;
					gap: 16px !important;
				}

				.dash-card {
					padding: 16px !important;
				}

				/* Better touch targets for mobile */
				.chip-btn, .btn {
					min-height: 44px !important;
					padding: 12px 16px !important;
					font-size: 16px !important;
				}

				/* Improve form inputs for mobile */
				.input, .textarea, select {
					font-size: 16px !important;
					padding: 12px !important;
					min-height: 44px !important;
				}

				/* Better spacing for mobile items */
				.mini-item {
					padding: 12px !important;
					margin-bottom: 8px !important;
					border-radius: 8px !important;
					background: var(--card) !important;
					border: 1px solid var(--border) !important;
				}

				/* Improve select dropdowns */
				select {
					-webkit-appearance: none !important;
					appearance: none !important;
					background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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") !important;
					background-repeat: no-repeat !important;
					background-position: right 12px center !important;
					background-size: 16px !important;
					padding-right: 40px !important;
				}
			}

			@media (max-width: 720px) {
				.nav {
					grid-template-columns: 1fr auto 1fr;
					padding: 10px 0;
				}
				.nav-links {
					display: none !important;
				}
				.menu-btn {
					display: inline-flex;
					justify-self: end;
				}
				.cards-grid {
					grid-template-columns: 1fr;
				}
				.features {
					grid-template-columns: 1fr;
				}
				.footer-grid {
					grid-template-columns: 1fr;
				}
				.hero {
					padding-top: 68px;
				}
        
				/* Center the logo on mobile */
				.brand {
					justify-content: center;
					margin: 0 auto;
					grid-column: 2;
				}
        
				/* Hide buttons on mobile */
				.nav-cta {
					display: none;
				}
        
				/* Ensure eyebrow text stays on one line */
				.eyebrow {
					font-size: 0.75rem;
					padding: 6px 10px;
				}
        
				/* Ensure hero badge text stays on one line */
				.hero-badge {
					font-size: 0.75rem;
					padding: 8px 10px;
				}
        
				.cta-band {
					grid-template-columns: 1fr;
					text-align: center;
				}
        
				/* Pricing section specific mobile adjustments */
				#pricing .cards-grid {
					grid-template-columns: 1fr;
				}
			}

			/* Mobile menu */
			.mobile-menu {
				position: fixed;
				inset: 64px 12px 12px 12px;
				border-radius: 16px;
				background: linear-gradient(180deg, #0e1633, #0a122a);
				border: 1px solid #1a2757;
				padding: 16px;
				z-index: 70;
				display: none;
			}

			html[data-theme="light"] .mobile-menu {
				background: var(--card);
				border: 1px solid var(--border);
			}

			.mobile-menu.open {
				display: block;
				animation: pop 0.2s ease-out;
			}

			@keyframes pop {
				from {
					opacity: 0;
					transform: translateY(8px) scale(0.98);
				}
				to {
					opacity: 1;
					transform: translateY(0) scale(1);
				}
			}

			.mobile-menu a {
				display: block;
				padding: 12px;
				border-radius: 10px;
				color: #e6eefc;
			}

			html[data-theme="light"] .mobile-menu a {
				color: var(--text);
			}

			.mobile-menu a:hover {
				background: #0f1838;
			}

			html[data-theme="light"] .mobile-menu a:hover {
				background: #f1f5f9;
			}

			/* Mobile Bottom Navigation */
			.mobile-bottom-nav {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: var(--card);
				border-top: 1px solid var(--border);
				padding: 8px 16px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				z-index: 100;
				box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
			}

			.mb-nav-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 4px;
				padding: 8px 12px;
				border: none;
				background: none;
				color: var(--muted);
				font-size: 12px;
				border-radius: 8px;
				transition: all 0.2s ease;
				min-height: 56px;
				min-width: 56px;
				justify-content: center;
			}

			.mb-nav-btn:hover,
			.mb-nav-btn.active {
				color: var(--primary);
				background: rgba(45, 125, 244, 0.1);
			}

			.mb-nav-btn svg {
				width: 20px;
				height: 20px;
				fill: none;
				stroke: currentColor;
				stroke-width: 2;
				stroke-linecap: round;
				stroke-linejoin: round;
			}

			.mb-nav-btn.active svg {
				stroke: var(--primary);
			}

			/* Dashboard mobile improvements */
			@media (max-width: 768px) {
				.dash-sidebar {
					display: none !important;
				}

				.dash-wrapper {
					grid-template-columns: 1fr !important;
					gap: 16px !important;
					padding: 16px !important;
				}

				.dash-card {
					border-radius: 12px !important;
					margin-bottom: 16px !important;
				}

				/* Better touch targets */
				.dash-nav-btn {
					min-height: 48px !important;
					font-size: 16px !important;
					margin-bottom: 8px !important;
				}

				/* Improve form layout for mobile */
				.quick-order-form {
					grid-template-columns: 1fr !important;
					gap: 16px !important;
				}

				/* Better mobile summary */
				.mobile-summary-bar {
					display: flex !important;
					position: fixed;
					bottom: 80px;
					left: 0;
					right: 0;
					background: var(--card);
					border-top: 1px solid var(--border);
					padding: 12px 16px;
					box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
				}
			}

			/* Hide mobile bottom nav on desktop */
			@media (min-width: 769px) {
				.mobile-bottom-nav {
					display: none;
				}
			}

			/* Show mobile bottom nav on mobile */
			@media (max-width: 768px) {
				.mobile-bottom-nav {
					display: flex;
				}

				/* Add padding to body to account for fixed bottom nav */
				body {
					padding-bottom: 80px;
				}

				/* Adjust dashboard layout for mobile */
				.dash-wrapper {
					padding-bottom: 20px;
				}
			}

			.separator {
				height: 1px;
				background: #17214a;
				margin: 10px 0;
			}

			html[data-theme="light"] .separator {
				background: var(--border);
			}
      
			/* Marketing Modal */
			.modal-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.7);
				backdrop-filter: blur(4px);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1000;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
			}
      
			.modal-overlay.active {
				opacity: 1;
				visibility: visible;
			}
      
			.modal {
				background: var(--card);
				border-radius: var(--radius-lg);
				border: 1px solid var(--border);
				max-width: 500px;
				width: 90%;
				position: relative;
				transform: translateY(20px);
				transition: transform 0.4s ease;
				box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
			}
      
			.modal-overlay.active .modal {
				transform: translateY(0);
			}
      
			html[data-theme="light"] .modal {
				background: var(--card);
				border: 1px solid var(--border);
			}
      
			.modal-close {
				position: absolute;
				top: 6px;
				right: 6px;
				background: none;
				border: none;
				font-size: 28px;
				cursor: pointer;
				color: var(--muted);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
			}
      
			.modal-close:hover {
				background: var(--border-light);
				color: var(--text);
			}
      
			html[data-theme="light"] .modal-close:hover {
				background: var(--border);
			}
      
			.modal-content {
				padding: 30px;
			}
      
			.modal-header {
				text-align: center;
				padding-top: 15px;
				margin-bottom: 20px;
			}
      
			.modal-header h2 {
				margin: 0 0 10px;
				font-size: 1.8rem;
				font-family: "Plus Jakarta Sans", Inter, sans-serif;
			}
      
			.modal-header p {
				margin: 0;
				color: var(--muted);
				font-size: 1.1rem;
			}
      
			.highlight {
				background: linear-gradient(90deg, #22c55e, #16a34a);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}
      
			.benefits {
				list-style: none;
				padding: 0;
				margin: 20px 0;
			}
      
			.benefits li {
				padding: 10px 0;
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 1.05rem;
			}
      
			/* Mobile responsive benefits text */
			@media (max-width: 720px) {
				.benefits li {
					font-size: 1rem;
				}
			}
      
			.benefits li:before {
				content: "✓";
				margin-right: 10px;
				color: var(--success);
				font-weight: bold;
			}
      
			.cta-section {
				text-align: center;
				margin-top: 20px;
			}
      
			.modal-btn {
				width: 100%;
				padding: 16px;
				font-size: 1.1rem;
				justify-content: center;
			}
      
			.small-text {
				margin: 12px 0 0;
				font-size: 0.85rem;
				color: var(--muted);
			}
      
			/* Responsive modal */
			@media (max-width: 720px) {
				.modal-content {
					padding: 20px;
				}
        
				.modal-header h2 {
					font-size: 1.5rem;
				}
        
				.benefits li {
					font-size: 0.95rem;
				}
			}
      
			/* Pricing Modal - Separate styling from marketing modal */
			#pricingModal .modal {
				max-width: 90%;
				width: 90%;
				max-width: 1000px;
			}
      
			#pricingModal .modal-content {
				padding: 20px 30px;
			}
      
			#pricingModal .modal-header {
				padding: 20px 30px 0;
				border-bottom: 1px solid var(--border);
				text-align: left;
			}
      
			#pricingModal .modal-header h2 {
				display: flex;
				align-items: center;
				gap: 10px;
				margin: 0 0 15px;
				font-size: 1.8rem;
			}
      
			/* Pricing Table Styles */
			.table-container {
				max-height: 60vh;
				overflow-y: auto;
				margin: 15px 0;
				border: 1px solid var(--border);
				border-radius: var(--radius-sm);
			}
      
			.price-table {
				width: 100%;
				border-collapse: collapse;
				margin: 0;
				min-width: 600px;
			}
      
			.price-table th {
				background: var(--border);
				padding: 12px 10px;
				text-align: left;
				font-weight: 600;
				position: sticky;
				top: 0;
			}
      
			.price-table td {
				padding: 10px;
				border-bottom: 1px solid var(--border-light);
			}
      
			.price-table tr:last-child td {
				border-bottom: none;
			}
      
			.price-table tr:hover td {
				background: rgba(45, 125, 244, 0.05);
			}
      
			html[data-theme="light"] .price-table tr:hover td {
				background: rgba(45, 125, 244, 0.1);
			}
      
			/* Mobile responsive pricing table */
			@media (max-width: 720px) {
				#pricingModal .modal {
					width: 95%;
					max-width: 95%;
				}
        
				#pricingModal .modal-content {
					padding: 15px 20px;
				}
        
				#pricingModal .modal-header h2 {
					font-size: 1.5rem;
				}
        
				.price-table th,
				.price-table td {
					padding: 8px 6px;
					font-size: 0.9rem;
				}
        
				.table-container {
					max-height: 50vh;
				}
			}