/* ── Design Tokens ─────────────────────────────── */
		:root {
			color-scheme: dark;
			--bg:        #07111f;
			--bg-2:      #0b1c33;
			--bg-card:   rgba(10, 22, 40, 0.72);
			--text:      #eef4ff;
			--muted:     #a8b6cc;
			--accent:    #66d9ff;
			--accent-2:  #8b7bff;
			--border:    rgba(255, 255, 255, 0.10);
			--shadow:    0 24px 80px rgba(0, 0, 0, 0.45);
			--radius-lg: 20px;
			--radius-xl: 28px;
			--max-w:     1200px;
		}

		/* ── Reset ─────────────────────────────────────── */
		*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
		html { scroll-behavior: smooth; }
		body {
			font-family: 'Inter', "Segoe UI", system-ui, -apple-system, sans-serif;
			color: var(--text);
			background: var(--bg);
			overflow-x: hidden;
			line-height: 1.6;
		}
		a { color: inherit; text-decoration: none; }
		img { max-width: 100%; display: block; }
		ul { list-style: none; }

		/* ── Scrollbar ─────────────────────────────────── */
		::-webkit-scrollbar { width: 6px; }
		::-webkit-scrollbar-track { background: var(--bg); }
		::-webkit-scrollbar-thumb { background: var(--accent-2); border-radius: 3px; }

		/* ── Global BG Gradient ────────────────────────── */
		body::before {
			content: "";
			position: fixed;
			inset: 0;
			pointer-events: none;
			background:
				radial-gradient(ellipse 80% 60% at 10% 0%,  rgba(102, 217, 255, 0.13) 0%, transparent 55%),
				radial-gradient(ellipse 70% 50% at 90% 0%,  rgba(139, 123, 255, 0.15) 0%, transparent 50%),
				radial-gradient(ellipse 60% 40% at 50% 100%, rgba(139, 123, 255, 0.08) 0%, transparent 55%);
			z-index: 0;
		}

		/* ── Noise Grid Overlay ────────────────────────── */
		.noise {
			position: fixed;
			inset: 0;
			pointer-events: none;
			z-index: 0;
			opacity: 0.03;
			background-image:
				linear-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
				linear-gradient(90deg, rgba(255,255,255,0.4) 1px, transparent 1px);
			background-size: 40px 40px;
		}

		/* ── Container ─────────────────────────────────── */
		.container {
			position: relative;
			z-index: 1;
			max-width: var(--max-w);
			margin: 0 auto;
			padding: 0 24px;
		}

		/* ── Buttons ───────────────────────────────────── */
		.btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			border: 0;
			border-radius: 999px;
			padding: 14px 28px;
			font-family: inherit;
			font-size: 0.95rem;
			font-weight: 600;
			cursor: pointer;
			text-decoration: none;
			transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
		}
		.btn:hover { transform: translateY(-2px); }
		.btn-primary {
			color: #06101c;
			background: linear-gradient(135deg, var(--accent) 0%, #c4f3ff 100%);
			box-shadow: 0 10px 28px rgba(102, 217, 255, 0.30);
		}
		.btn-primary:hover { box-shadow: 0 14px 36px rgba(102, 217, 255, 0.45); }
		.btn-secondary {
			color: var(--text);
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid var(--border);
		}
		.btn-secondary:hover { background: rgba(255, 255, 255, 0.09); }
		.btn-outline {
			color: var(--accent);
			background: transparent;
			border: 1px solid rgba(102, 217, 255, 0.35);
		}
		.btn-outline:hover { background: rgba(102, 217, 255, 0.08); }

		/* ── Section helpers ───────────────────────────── */
		.section { position: relative; z-index: 1; padding: 96px 0; }
		.section-tag {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 14px;
			border-radius: 999px;
			border: 1px solid rgba(102, 217, 255, 0.25);
			background: rgba(102, 217, 255, 0.06);
			color: var(--accent);
			font-size: 0.78rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			margin-bottom: 16px;
		}
		.section-heading {
			font-size: clamp(1.8rem, 4vw, 2.8rem);
			font-weight: 800;
			line-height: 1.15;
			letter-spacing: -0.03em;
		}
		.section-sub {
			color: var(--muted);
			font-size: clamp(0.95rem, 1.8vw, 1.1rem);
			line-height: 1.75;
			max-width: 600px;
		}
		.text-center { text-align: center; }
		.gradient-text {
			background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		/* ════════════════════════════════════════════════
		   1. HEADER / NAV
		════════════════════════════════════════════════ */
		#header {
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100%;
			padding: 0;
			border-bottom: 1px solid transparent;
			transition: background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease;
		}
		#header.scrolled {
			background: rgba(7, 17, 31, 0.88);
			backdrop-filter: blur(20px);
			border-color: var(--border);
		}
		.nav-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 72px;
		}

		/* Logo */
		.logo {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 1.2rem;
			font-weight: 800;
			letter-spacing: -0.03em;
			color: var(--text);
		}
		.logo-icon {
			width: 36px;
			height: 36px;
			flex-shrink: 0;
		}

		/* Nav links */
		.nav-links {
			display: flex;
			align-items: center;
			gap: 32px;
		}
		.nav-links a {
			font-size: 0.9rem;
			font-weight: 500;
			color: var(--muted);
			transition: color 180ms;
		}
		.nav-links a:hover { color: var(--text); }

		/* Nav CTA */
		.nav-cta { display: flex; align-items: center; gap: 12px; }

		/* Hamburger */
		.hamburger {
			display: none;
			flex-direction: column;
			gap: 5px;
			cursor: pointer;
			padding: 4px;
			background: none;
			border: none;
		}
		.hamburger span {
			display: block;
			width: 24px;
			height: 2px;
			background: var(--text);
			border-radius: 2px;
			transition: transform 300ms, opacity 300ms;
		}
		.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
		.hamburger.open span:nth-child(2) { opacity: 0; }
		.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

		/* Mobile drawer */
		.mobile-menu {
			display: none;
			flex-direction: column;
			gap: 16px;
			padding: 20px 24px 28px;
			background: rgba(7, 17, 31, 0.97);
			border-bottom: 1px solid var(--border);
		}
		.mobile-menu.open { display: flex; }
		.mobile-menu a {
			font-size: 1rem;
			font-weight: 500;
			color: var(--muted);
			padding: 8px 0;
			border-bottom: 1px solid var(--border);
			transition: color 180ms;
		}
		.mobile-menu a:last-child { border-bottom: 0; }
		.mobile-menu a:hover { color: var(--text); }

		/* ════════════════════════════════════════════════
		   2. HERO
		════════════════════════════════════════════════ */
		#hero {
			position: relative;
			z-index: 1;
			padding: 120px 0 100px;
			text-align: center;
			overflow: hidden;
		}

		.hero-aurora {
			position: absolute;
			inset: 0;
			pointer-events: none;
			background:
				radial-gradient(ellipse 90% 70% at 50% -10%, rgba(139, 123, 255, 0.28) 0%, transparent 60%),
				radial-gradient(ellipse 60% 50% at 20%  80%, rgba(102, 217, 255, 0.15) 0%, transparent 55%),
				radial-gradient(ellipse 50% 40% at 80%  90%, rgba(139, 123, 255, 0.12) 0%, transparent 50%);
		}

		.hero-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 7px 16px;
			border-radius: 999px;
			border: 1px solid rgba(102, 217, 255, 0.28);
			background: rgba(102, 217, 255, 0.07);
			color: var(--accent);
			font-size: 0.83rem;
			font-weight: 600;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			margin-bottom: 28px;
		}
		.hero-badge .pulse-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--accent);
			animation: pulse 1.8s infinite;
		}

		.hero-title {
			font-size: clamp(2.8rem, 9vw, 7rem);
			font-weight: 800;
			line-height: 0.96;
			letter-spacing: -0.05em;
			margin-bottom: 24px;
		}

		.hero-sub {
			max-width: 640px;
			margin: 0 auto 40px;
			color: var(--muted);
			font-size: clamp(1rem, 2.2vw, 1.2rem);
			line-height: 1.75;
		}

		.hero-actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 14px;
		}

		/* Floating orbs */
		.orb {
			position: absolute;
			border-radius: 50%;
			pointer-events: none;
			animation: float 12s ease-in-out infinite;
		}
		.orb-1 {
			width: 320px; height: 320px;
			top: -80px; left: -100px;
			background: radial-gradient(circle, rgba(102, 217, 255, 0.18), transparent 70%);
			filter: blur(2px);
		}
		.orb-2 {
			width: 400px; height: 400px;
			bottom: -120px; right: -120px;
			animation-delay: -4s;
			background: radial-gradient(circle, rgba(139, 123, 255, 0.18), transparent 70%);
			filter: blur(2px);
		}
		.orb-3 {
			width: 200px; height: 200px;
			top: 30%; left: 60%;
			animation-delay: -8s;
			background: radial-gradient(circle, rgba(102, 217, 255, 0.10), transparent 70%);
			filter: blur(1px);
		}

		/* ════════════════════════════════════════════════
		   3. PRODUCTS
		════════════════════════════════════════════════ */
		#products {
			background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
		}
		.products-header {
			text-align: center;
			margin-bottom: 56px;
		}
		.products-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
		}
		.product-card {
			position: relative;
			padding: 32px 28px;
			border: 1px solid var(--border);
			border-radius: var(--radius-xl);
			background: var(--bg-card);
			backdrop-filter: blur(14px);
			overflow: hidden;
			transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
		}
		.product-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
			border-color: rgba(102, 217, 255, 0.22);
		}
		.product-card::before {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(140deg, rgba(102, 217, 255, 0.06) 0%, transparent 55%);
			pointer-events: none;
		}
		.product-icon {
			width: 52px;
			height: 52px;
			border-radius: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 18px;
			font-size: 1.5rem;
		}
		.product-card h3 {
			font-size: 1.15rem;
			font-weight: 700;
			margin-bottom: 10px;
			letter-spacing: -0.02em;
		}
		.product-card p {
			color: var(--muted);
			font-size: 0.9rem;
			line-height: 1.7;
			margin-bottom: 22px;
		}
		.product-tag {
			display: inline-block;
			padding: 3px 10px;
			border-radius: 999px;
			font-size: 0.72rem;
			font-weight: 600;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			margin-bottom: 20px;
		}
		.product-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 0.88rem;
			font-weight: 600;
			color: var(--accent);
			transition: gap 180ms;
		}
		.product-link:hover { gap: 10px; }
		.products-cta {
			text-align: center;
			margin-top: 52px;
		}

		/* Product icon color variants */
		.icon-blue   { background: rgba(102, 217, 255, 0.12); color: var(--accent); }
		.icon-purple { background: rgba(139, 123, 255, 0.12); color: var(--accent-2); }
		.icon-green  { background: rgba(80, 220, 160, 0.12);  color: #50dca0; }
		.icon-orange { background: rgba(255, 165, 80, 0.12);  color: #ffa550; }
		.icon-pink   { background: rgba(255, 100, 160, 0.12); color: #ff64a0; }
		.icon-teal   { background: rgba(60, 210, 200, 0.12);  color: #3cd2c8; }

		.tag-blue   { background: rgba(102, 217, 255, 0.10); color: var(--accent); }
		.tag-purple { background: rgba(139, 123, 255, 0.10); color: var(--accent-2); }
		.tag-green  { background: rgba(80, 220, 160, 0.10);  color: #50dca0; }
		.tag-orange { background: rgba(255, 165, 80, 0.10);  color: #ffa550; }
		.tag-pink   { background: rgba(255, 100, 160, 0.10); color: #ff64a0; }
		.tag-teal   { background: rgba(60, 210, 200, 0.10);  color: #3cd2c8; }

		/* ════════════════════════════════════════════════
		   4. WHY CYBROS
		════════════════════════════════════════════════ */
		#why {
			text-align: center;
		}
		.why-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			margin-top: 56px;
		}
		.why-card {
			padding: 32px 24px;
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			background: var(--bg-card);
			backdrop-filter: blur(12px);
			transition: border-color 240ms, transform 240ms;
		}
		.why-card:hover {
			border-color: rgba(139, 123, 255, 0.25);
			transform: translateY(-4px);
		}
		.why-icon {
			font-size: 2rem;
			margin-bottom: 16px;
		}
		.why-card h3 {
			font-size: 1.1rem;
			font-weight: 700;
			margin-bottom: 10px;
			letter-spacing: -0.02em;
		}
		.why-card p {
			color: var(--muted);
			font-size: 0.9rem;
			line-height: 1.72;
		}

		/* ════════════════════════════════════════════════
		   5. FAQ
		════════════════════════════════════════════════ */
		#faq {
			background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
		}
		.faq-header {
			text-align: center;
			margin-bottom: 48px;
		}
		.faq-list {
			max-width: 780px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.faq-item {
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			background: var(--bg-card);
			overflow: hidden;
			transition: border-color 240ms;
		}
		.faq-item.open { border-color: rgba(102, 217, 255, 0.22); }
		.faq-question {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			padding: 20px 24px;
			background: none;
			border: none;
			color: var(--text);
			font-family: inherit;
			font-size: 1rem;
			font-weight: 600;
			text-align: left;
			cursor: pointer;
			transition: color 180ms;
		}
		.faq-question:hover { color: var(--accent); }
		.faq-chevron {
			flex-shrink: 0;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			border: 1px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: transform 300ms, background 240ms, border-color 240ms;
		}
		.faq-item.open .faq-chevron {
			transform: rotate(180deg);
			background: rgba(102, 217, 255, 0.10);
			border-color: rgba(102, 217, 255, 0.30);
		}
		.faq-chevron svg { width: 10px; height: 10px; }
		.faq-answer {
			display: none;
			padding: 0 24px 20px;
			color: var(--muted);
			font-size: 0.93rem;
			line-height: 1.78;
		}
		.faq-item.open .faq-answer { display: block; }

		/* ════════════════════════════════════════════════
		   6. FOOTER
		════════════════════════════════════════════════ */
		#footer {
			position: relative;
			z-index: 1;
			padding: 56px 24px 36px;
			border-top: 1px solid var(--border);
			text-align: center;
		}
		.footer-logo {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-size: 1.15rem;
			font-weight: 800;
			letter-spacing: -0.03em;
			margin-bottom: 24px;
			color: var(--text);
		}
		.footer-logo .logo-icon { width: 32px; height: 32px; }
		.footer-logo span { color: var(--accent); }
		.social-links {
			display: flex;
			justify-content: center;
			gap: 14px;
			margin-bottom: 28px;
		}
		.social-link {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid var(--border);
			background: rgba(255, 255, 255, 0.04);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--muted);
			transition: color 180ms, border-color 180ms, background 180ms, transform 180ms;
		}
		.social-link:hover {
			color: var(--text);
			border-color: rgba(102, 217, 255, 0.35);
			background: rgba(102, 217, 255, 0.07);
			transform: translateY(-2px);
		}
		.social-link svg { width: 18px; height: 18px; }
		.footer-copy {
			color: rgba(168, 182, 204, 0.6);
			font-size: 0.85rem;
		}

		/* ── Divider ───────────────────────────────────── */
		.divider {
			height: 1px;
			background: linear-gradient(90deg, transparent, var(--border), transparent);
			margin: 0;
		}

		/* ── Animations ────────────────────────────────── */
		@keyframes pulse {
			0%   { box-shadow: 0 0 0 0   rgba(102, 217, 255, 0.55); }
			70%  { box-shadow: 0 0 0 12px rgba(102, 217, 255, 0); }
			100% { box-shadow: 0 0 0 0   rgba(102, 217, 255, 0); }
		}
		@keyframes float {
			0%, 100% { transform: translateY(0)    translateX(0); }
			50%       { transform: translateY(-18px) translateX(12px); }
		}

		/* ── Responsive ────────────────────────────────── */
		@media (max-width: 900px) {
			.products-grid { grid-template-columns: repeat(2, 1fr); }
			.why-grid      { grid-template-columns: repeat(2, 1fr); }
			.nav-links, .nav-cta .btn-secondary { display: none; }
			.hamburger { display: flex; }
		}
		@media (max-width: 600px) {
			.section { padding: 72px 0; }
			#hero { padding: 88px 0 72px; }
			.products-grid { grid-template-columns: 1fr; }
			.why-grid      { grid-template-columns: 1fr; }
			.hero-actions  { flex-direction: column; align-items: stretch; }
			.hero-actions .btn { width: 100%; justify-content: center; }
			.logo-text { display: none; }
		}