Загрузка...
Шаблон лендинга для SaaS-сервисов инфраструктуры. Адаптивный HTML/CSS дизайн для корпоративных сайтов. Идеально для IT-компаний.
<html lang="en" class="bg-[#050505] scroll-smooth scroll-pt-24"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS Enterprise Platform - Industrial Grid</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
/* Hard edges, no smoothing on scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Grid overlay pattern */
.bg-grid {
background-size: 40px 40px;
background-image: linear-gradient(to right, #27272a 1px, transparent 1px),
linear-gradient(to bottom, #27272a 1px, transparent 1px);
}
/* Smooth/slow animation helpers */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 6s linear infinite; }
</style>
<script>
// Configure Tailwind to include our custom 3D transform utilities
tailwind.config = {
theme: {
extend: {
// Add any custom theme extensions here if needed
}
},
plugins: [
function({ addUtilities }) {
const rotateXUtilities = {};
const rotateYUtilities = {};
const rotateZUtilities = {};
const rotateValues = [0, 5, 10, 15, 20, 30, 45, 75];
// Generate rotate-x utilities
rotateValues.forEach((value) => {
rotateXUtilities[`.rotate-x-${value}`] = {
'--tw-rotate-x': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateXUtilities[`.-rotate-x-${value}`] = {
'--tw-rotate-x': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-y utilities
rotateValues.forEach((value) => {
rotateYUtilities[`.rotate-y-${value}`] = {
'--tw-rotate-y': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateYUtilities[`.-rotate-y-${value}`] = {
'--tw-rotate-y': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-z utilities
rotateValues.forEach((value) => {
rotateZUtilities[`.rotate-z-${value}`] = {
'--tw-rotate-z': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateZUtilities[`.-rotate-z-${value}`] = {
'--tw-rotate-z': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Perspective utilities
const perspectiveUtilities = {
".perspective-none": { perspective: "none" },
".perspective-dramatic": { perspective: "100px" },
".perspective-near": { perspective: "300px" },
".perspective-normal": { perspective: "500px" },
".perspective-midrange": { perspective: "800px" },
".perspective-distant": { perspective: "1200px" },
};
// Transform style utilities
const transformStyleUtilities = {
".transform-style-preserve-3d": { "transform-style": "preserve-3d" },
".transform-style-flat": { "transform-style": "flat" },
};
addUtilities({
...rotateXUtilities,
...rotateYUtilities,
...rotateZUtilities,
...perspectiveUtilities,
...transformStyleUtilities,
});
}
]
};
</script>
<script src="https://www.aura.build/FxFilter.js"></script>
<style>
/* Premium Smooth Animation System */
@keyframes animationIn {
0% {
opacity: 0;
transform: translateY(40px) scale(0.98);
filter: blur(10px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
[data-anim] {
opacity: 0;
animation-name: animationIn;
animation-duration: 1.4s;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
animation-fill-mode: both;
animation-play-state: paused;
will-change: transform, opacity, filter;
}
[data-anim].animate {
animation-play-state: running;
}
</style>
<style>
@keyframes scroll-y{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}@keyframes slide-x{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.animate-scroll-y{animation:scroll-y 15s linear infinite}.animate-slide-x{animation:slide-x 2s linear infinite}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }
</style><link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }
</style><link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }
</style><link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">
.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }
</style> <style>
/* 3D Transform utilities */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }
</style></head>
<body class="text-zinc-400 min-h-screen flex flex-col selection:bg-orange-600 selection:text-white">
<!-- Fixed Grid Background (Subtle) -->
<div class="fixed inset-0 pointer-events-none z-0 opacity-[0.03] bg-grid"></div>
<!-- Header / Control Bar -->
<header class="relative z-50 h-16 border-b border-zinc-800 bg-[#050505]/95 backdrop-blur-sm flex items-center justify-between sticky top-0">
<!-- Left: Logo & Status -->
<div class="flex bg-[#050505] h-full border-zinc-800 border-r pr-8 pl-6 items-center">
<a href="/home" class="flex items-center group">
<span class="uppercase group-hover:text-orange-600 transition-all duration-300 cursor-pointer text-2xl font-semibold text-white tracking-tight ml-10" onclick="window.location.href='/home'" role="button">
Axion
</span>
</a>
<button id="tablet-menu-btn" class="hidden md:flex lg:hidden ml-6 w-10 h-10 border border-zinc-800 bg-zinc-900/30 items-center justify-center text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors focus:outline-none focus:ring-1 focus:ring-orange-600" aria-label="Toggle Tablet Navigation">
<iconify-icon icon="solar:hamburger-menu-linear" width="20"></iconify-icon>
</button>
<div class="hidden lg:flex items-center ml-6 px-3 py-1 border border-zinc-800 bg-zinc-900/30 backdrop-blur-sm rounded-sm gap-2">
<span class="text-[10px] font-mono text-zinc-600 leading-none">
[
</span>
<span class="relative flex h-1.5 w-1.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500"></span>
</span>
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-widest">
ENV: PRODUCTION
</span>
<span class="text-[10px] font-mono text-zinc-600 leading-none">
]
</span>
</div>
</div>
<!-- Center: Navigation Links -->
<nav class="hidden lg:flex items-center h-full flex-1 justify-center">
<div class="flex h-full items-center border-x border-zinc-800/50">
<a href="/system-core" class="flex items-center text-[10px] uppercase hover:text-white hover:bg-zinc-900/50 transition-colors group text-zinc-400 tracking-widest font-mono h-full border-zinc-800/50 border-r pr-6 pl-6 relative">
System Core
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-600 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
</a>
<a href="/deployments" class="flex items-center text-[10px] uppercase hover:text-white hover:bg-zinc-900/50 transition-colors group text-zinc-400 tracking-widest font-mono h-full border-zinc-800/50 border-r pr-6 pl-6 relative">
Deployments
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-600 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
</a>
<a href="/security" class="flex items-center text-[10px] uppercase hover:text-white hover:bg-zinc-900/50 transition-colors group text-zinc-400 tracking-widest font-mono h-full border-zinc-800/50 border-r pr-6 pl-6 relative">
Security
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-600 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
</a>
<a href="/pricing" class="flex items-center text-[10px] uppercase hover:text-white hover:bg-zinc-900/50 transition-colors group text-zinc-400 tracking-widest font-mono h-full border-zinc-800/50 border-r pr-6 pl-6 relative">
Pricing
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-600 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
</a>
<a href="/docs" class="flex items-center text-[10px] uppercase hover:text-white hover:bg-zinc-900/50 transition-colors group text-zinc-400 tracking-widest font-mono h-full pr-6 pl-6 relative">
Docs
<div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-600 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
</a>
</div>
</nav>
<!-- Right: Actions -->
<div class="hidden md:flex items-center h-full border-l border-zinc-800 bg-[#050505]">
<a href="#" class="flex items-center px-8 h-full text-[10px] font-mono uppercase tracking-widest text-zinc-400 hover:text-white transition-colors border-r border-zinc-800 hover:bg-zinc-900/30">
Sign In
</a>
<button class="h-full px-8 bg-orange-600 text-white text-[10px] font-mono uppercase tracking-widest hover:bg-orange-500 transition-all flex items-center gap-2 group shadow-[inset_0_0_20px_rgba(0,0,0,0.2)] font-medium" data-demo-trigger="true">
Request Demo
<iconify-icon icon="solar:arrow-right-linear" width="14" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
</div>
<!-- Mobile Toggle -->
<button id="mobile-menu-btn" class="md:hidden p-0 w-16 h-full text-zinc-400 hover:text-white border-l border-zinc-800 bg-[#050505] flex items-center justify-center transition-colors hover:bg-zinc-900">
<iconify-icon icon="solar:hamburger-menu-linear" width="24"></iconify-icon>
</button>
<div id="tablet-menu" class="hidden lg:hidden absolute top-full left-0 right-0 bg-[#050505] border-b border-zinc-800 z-40 flex-col shadow-2xl">
<div class="absolute inset-0 bg-grid opacity-[0.05] pointer-events-none"></div>
<div class="flex items-center justify-between px-8 py-3 border-b border-zinc-800 bg-zinc-900/20 relative z-10">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-widest">
Navigation_Module
</span>
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-widest">
PROD ONLINE
</span>
</div>
</div>
<div class="flex flex-col relative z-10">
<a href="#" class="group flex items-center px-8 py-4 border-b border-zinc-800 hover:bg-zinc-900 transition-colors">
<span class="text-[10px] font-mono text-zinc-600 group-hover:text-orange-600 w-8 transition-colors">
01.
</span>
<span class="text-xs font-mono font-medium text-zinc-300 group-hover:text-white uppercase tracking-wider">
System Core
</span>
</a>
<a href="#" class="group flex items-center px-8 py-4 border-b border-zinc-800 hover:bg-zinc-900 transition-colors">
<span class="text-[10px] font-mono text-zinc-600 group-hover:text-orange-600 w-8 transition-colors">
02.
</span>
<span class="text-xs font-mono font-medium text-zinc-300 group-hover:text-white uppercase tracking-wider">
Deployments
</span>
</a>
<a href="#" class="group flex items-center px-8 py-4 border-b border-zinc-800 hover:bg-zinc-900 transition-colors">
<span class="text-[10px] font-mono text-zinc-600 group-hover:text-orange-600 w-8 transition-colors">
03.
</span>
<span class="text-xs font-mono font-medium text-zinc-300 group-hover:text-white uppercase tracking-wider">
Security
</span>
</a>
<a href="#" class="group flex items-center px-8 py-4 border-b border-zinc-800 hover:bg-zinc-900 transition-colors">
<span class="text-[10px] font-mono text-zinc-600 group-hover:text-orange-600 w-8 transition-colors">
04.
</span>
<span class="text-xs font-mono font-medium text-zinc-300 group-hover:text-white uppercase tracking-wider">
Pricing
</span>
</a>
<a href="#" class="group flex items-center px-8 py-4 border-b border-zinc-800 hover:bg-zinc-900 transition-colors">
<span class="text-[10px] font-mono text-zinc-600 group-hover:text-orange-600 w-8 transition-colors">
05.
</span>
<span class="text-xs font-mono font-medium text-zinc-300 group-hover:text-white uppercase tracking-wider">
Docs
</span>
</a>
</div>
</div>
</header>
<div id="mobile-menu" class="fixed inset-x-0 top-16 bottom-0 z-40 bg-[#050505] transform translate-x-full transition-transform duration-300 md:hidden flex flex-col border-t border-zinc-800 overflow-y-auto">
<div class="flex flex-col p-6 space-y-4">
<button class="w-full py-4 bg-orange-600 text-white text-xs font-mono uppercase tracking-widest hover:bg-orange-500 flex items-center justify-center gap-2 transition-all shadow-lg shadow-orange-900/20 font-medium" data-demo-trigger="true">
Request Demo
<iconify-icon icon="solar:arrow-right-linear" width="16"></iconify-icon>
</button>
<div class="flex flex-col border border-zinc-800 bg-zinc-900/20">
<a href="#" class="flex items-center justify-between p-4 border-b border-zinc-800 text-xs font-mono uppercase tracking-widest text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors group">
System Core
<iconify-icon icon="solar:arrow-right-linear" class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-600" width="14"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-between p-4 border-b border-zinc-800 text-xs font-mono uppercase tracking-widest text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors group">
Deployments
<iconify-icon icon="solar:arrow-right-linear" class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-600" width="14"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-between p-4 border-b border-zinc-800 text-xs font-mono uppercase tracking-widest text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors group">
Security
<iconify-icon icon="solar:arrow-right-linear" class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-600" width="14"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-between p-4 border-b border-zinc-800 text-xs font-mono uppercase tracking-widest text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors group">
Pricing
<iconify-icon icon="solar:arrow-right-linear" class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-600" width="14"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-between p-4 text-xs font-mono uppercase tracking-widest text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors group">
Docs
<iconify-icon icon="solar:arrow-right-linear" class="opacity-0 group-hover:opacity-100 transition-opacity text-orange-600" width="14"></iconify-icon>
</a>
</div>
<a href="#" class="block py-4 text-xs font-mono uppercase tracking-widest text-zinc-500 hover:text-white text-center border border-zinc-800 hover:border-zinc-600 transition-colors">
Sign In
</a>
</div>
<div class="mt-auto p-6 border-t border-zinc-800">
<div class="flex items-center gap-2 text-[10px] font-mono text-zinc-600 uppercase">
<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
System Operational
</div>
</div>
</div>
<!-- Main Content Grid -->
<main class="relative z-10 flex-1 flex flex-col md:flex-row">
<!-- Left Sidebar / Vertical Track -->
<aside class="hidden md:flex flex-col w-16 border-r border-zinc-800 bg-[#050505] shrink-0 relative z-40">
<div class="sticky top-16 h-[calc(100vh-4rem)] flex flex-col items-center py-12 w-full">
<!-- Vertical Track -->
<div class="absolute top-0 bottom-0 left-1/2 w-px bg-zinc-900 -translate-x-1/2 z-0"></div>
<!-- Nav Items -->
<nav class="flex flex-col gap-10 relative z-10 w-full items-center">
<a href="#hero" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 border-orange-600 text-orange-600 bg-zinc-900">
01
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
Hero
</div>
</a>
<a href="#features" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 text-zinc-600 border-zinc-800">
02
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
Features
</div>
</a>
<a href="#deployments" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 text-zinc-600 border-zinc-800">
03
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
Deployments
</div>
</a>
<a href="#flow" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 text-zinc-600 border-zinc-800">
04
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
System_Flow
</div>
</a>
<a href="#validation" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 text-zinc-600 border-zinc-800">
05
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
Validation
</div>
</a>
<a href="#access" class="nav-link group relative flex items-center justify-center w-6 h-6 bg-[#050505] border text-[9px] font-mono hover:text-white hover:border-orange-600 transition-all duration-300 text-zinc-600 border-zinc-800">
06
<div class="absolute left-full ml-4 px-2 py-1 bg-zinc-900 border border-zinc-800 text-white text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-xl">
Pricing
</div>
</a>
</nav>
<!-- Bottom Decor -->
<div class="mt-auto mb-12 flex flex-col items-center gap-4">
<div class="w-px h-12 bg-gradient-to-b from-zinc-800 to-transparent"></div>
<div class="text-[8px] font-mono text-zinc-700 -rotate-90 whitespace-nowrap tracking-widest uppercase">
Nav_Module_v4
</div>
</div>
</div>
</aside>
<!-- Content Area -->
<div class="flex-1 flex flex-col min-w-0 relative z-0">
<!-- Hero Grid Row -->
<div id="hero" class="relative w-full min-h-[750px] flex items-center border-b border-zinc-800 overflow-hidden bg-[#050505]">
<!-- Background Layer (Full Width) -->
<div class="absolute inset-0 z-0">
<!-- Unicorn Studio Script Container -->
<div class="aura-background-component w-full h-full absolute inset-0">
<div data-us-project="hRFfUymDGOHwtFe7evR2" class="absolute w-full h-full left-0 top-0"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div>
<!-- Soft Dark Gradient Overlay for Contrast -->
<div class="absolute inset-0 bg-gradient-to-r from-[#050505] via-[#050505]/25 to-[#050505]/20 z-10 pointer-events-none"></div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#050505] z-10 pointer-events-none"></div>
</div>
<!-- Content Container -->
<div class="container lg:px-12 grid grid-cols-1 lg:grid-cols-2 md:pt-32 md:pb-44 z-20 h-full mr-auto ml-auto pt-24 pr-6 pb-32 pl-6 relative gap-x-12 gap-y-12 items-center">
<!-- Left Content Column -->
<div class="flex flex-col justify-center max-w-2xl" data-anim-group="hero-left">
<!-- Status Indicator -->
<div class="flex items-center gap-3 mb-8 animate" data-anim="fade-up">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span class="text-[10px] uppercase text-zinc-400 tracking-widest font-mono">
CORE ENGINE: ACTIVE
<span class="text-zinc-600 mx-2">//</span>
PLATFORM ONLINE
</span>
</div>
<!-- Headline -->
<h1 class="text-5xl md:text-7xl lg:text-7xl font-medium text-white uppercase tracking-tight leading-[0.9] mb-8 animate" data-anim="fade-up">
Autonomous Infrastructure
<span class="text-zinc-600">Platform</span>
</h1>
<!-- Subheading -->
<p class="md:text-lg leading-relaxed animate text-base text-zinc-500 font-mono max-w-md border-orange-600 border-l-2 mb-10 pl-4" data-anim="fade-up">
Operate distributed systems through a unified control layer
built for scalability, reliability, and real-time automation.
</p>
<!-- Value Highlights -->
<div class="flex flex-col gap-3 mb-10">
<div class="flex items-center gap-3 animate" data-anim="fade-up" style="animation-delay: 0s;">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
<span class="uppercase text-xs text-zinc-300 tracking-wide font-mono">
Global distributed control plane
</span>
</div>
<div class="flex items-center gap-3 animate" data-anim="fade-up" style="animation-delay: 0.1s;">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
<span class="uppercase text-xs text-zinc-300 tracking-wide font-mono">
Autonomous agent orchestration
</span>
</div>
<div class="flex items-center gap-3 animate" data-anim="fade-up" style="animation-delay: 0.2s;">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
<span class="uppercase text-xs text-zinc-300 tracking-wide font-mono">
Sub-10ms runtime execution
</span>
</div>
</div>
<!-- CTA Cluster -->
<div class="flex flex-col sm:flex-row gap-4 mb-8 animate" data-anim="fade-up">
<button class="group bg-orange-600 hover:bg-orange-500 text-white text-xs font-mono uppercase tracking-widest px-8 py-4 transition-all flex items-center justify-center gap-3 font-medium shadow-[0_0_20px_rgba(234,88,12,0.3)] hover:shadow-[0_0_30px_rgba(234,88,12,0.5)]">
Initialize Build
<iconify-icon icon="solar:arrow-right-linear" width="16" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<button class="group bg-transparent border border-zinc-700 hover:border-white text-zinc-400 hover:text-white text-xs font-mono uppercase tracking-widest px-8 py-4 transition-all flex items-center justify-center gap-3 font-medium">
View Documentation
<iconify-icon icon="solar:document-text-linear" width="16"></iconify-icon>
</button>
</div>
<!-- Micro Trust -->
<div class="flex items-center gap-4 text-[10px] font-mono text-zinc-600 uppercase tracking-wide pl-1 animate" data-anim="fade-up">
<span class="">Production ready</span>
<span class="w-1 h-1 bg-zinc-800 rounded-full"></span>
<span class="">Instant Environment Provisioning</span>
</div>
</div>
<!-- Right Column: Active System Cards -->
<div class="hidden lg:flex flex-col items-end justify-center relative h-full pointer-events-none select-none">
<div class="relative w-full max-w-lg bg-[#09090b] border border-zinc-800 rounded-sm shadow-2xl overflow-hidden flex flex-col mt-12 mr-8 select-none animate" data-anim="card-in" style="animation-delay: 0.2s; box-shadow: 0 0 50px -12px rgba(0,0,0,0.5);">
<div class="h-9 border-b border-zinc-800 bg-[#050505] flex items-center justify-between px-4 shrink-0">
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
AXION CONTROL INTERFACE
</span>
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
<span class="text-[10px] font-mono text-zinc-500">
ONLINE
</span>
</div>
</div>
<div class="h-[400px] flex flex-col relative bg-[#050505]">
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px] pointer-events-none"></div>
<div class="grid grid-cols-2 border-b border-zinc-800 h-28 relative z-10 bg-zinc-900/5">
<div class="border-r border-zinc-800 p-5 flex flex-col justify-between">
<div>
<div class="text-[9px] font-mono text-zinc-500 uppercase mb-1">
Throughput
</div>
<div class="text-xl text-white font-mono tracking-tight">
842.5 GB/s
</div>
</div>
<div>
<div class="text-[9px] font-mono text-zinc-500 uppercase mb-1">
Active Nodes
</div>
<div class="flex items-center gap-2">
<span class="text-xl text-white font-mono tracking-tight">
1,204
</span>
<span class="text-[10px] text-green-500 font-mono bg-green-500/10 px-1 rounded">
+12
</span>
</div>
</div>
</div>
<div class="relative flex items-center justify-center overflow-hidden p-4">
<div class="relative w-full h-full flex items-center justify-center">
<div class="absolute inset-0 flex items-center justify-center opacity-30">
<div class="w-20 h-20 border border-zinc-700 rounded-full animate-[spin_10s_linear_infinite]"></div>
<div class="w-32 h-32 border border-zinc-800 rounded-full absolute"></div>
</div>
<div class="w-2 h-2 bg-white rounded-full shadow-[0_0_10px_white] relative z-10"></div>
<div class="absolute w-full h-[1px] bg-zinc-800 rotate-45"></div>
<div class="absolute w-full h-[1px] bg-zinc-800 -rotate-45"></div>
<div class="absolute top-1/2 left-4 w-1.5 h-1.5 bg-zinc-600 rounded-full -translate-y-1/2"></div>
<div class="absolute top-1/2 right-4 w-1.5 h-1.5 bg-zinc-600 rounded-full -translate-y-1/2"></div>
<div class="absolute bottom-4 left-1/2 w-1.5 h-1.5 bg-zinc-600 rounded-full -translate-x-1/2"></div>
</div>
</div>
</div>
<div class="flex-1 relative overflow-hidden bg-[#050505] p-5 font-mono text-[10px] text-zinc-500">
<div class="absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-[#050505] to-transparent z-10"></div>
<div class="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-[#050505] to-transparent z-10"></div>
<div class="animate-scroll-y space-y-3">
<div class="flex gap-3">
<span class="text-zinc-700">10:42:01</span>
<span>System initialization started</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:02</span>
<span>
Verifying security protocols...
<span class="text-green-500">OK</span>
</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:02</span>
<span>Connecting to cluster: us-east-1</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:03</span>
<span class="text-orange-600">
WARN: Latency spike detected (42ms)
</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:03</span>
<span>Auto-scaling engaged</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:04</span>
<span>New node provisioned: node-884</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:05</span>
<span>Syncing database shards...</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:06</span>
<span>Pipeline throughput: 100%</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:07</span>
<span>Agent deployed successfully</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:08</span>
<span>Monitoring active</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:09</span>
<span>Optimizing cache layer...</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:10</span>
<span>Health check passed</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:01</span>
<span>System initialization started</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:02</span>
<span>
Verifying security protocols...
<span class="text-green-500">OK</span>
</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:02</span>
<span>Connecting to cluster: us-east-1</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:03</span>
<span class="text-orange-600">
WARN: Latency spike detected (42ms)
</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:03</span>
<span>Auto-scaling engaged</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:04</span>
<span>New node provisioned: node-884</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:05</span>
<span>Syncing database shards...</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:06</span>
<span>Pipeline throughput: 100%</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:07</span>
<span>Agent deployed successfully</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:08</span>
<span>Monitoring active</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:09</span>
<span>Optimizing cache layer...</span>
</div>
<div class="flex gap-3">
<span class="text-zinc-700">10:42:10</span>
<span>Health check passed</span>
</div>
</div>
</div>
<div class="h-14 border-t border-zinc-800 bg-[#080808] flex items-center px-5 gap-4">
<div class="text-[9px] font-mono text-zinc-500 uppercase">
Pipeline
</div>
<div class="flex-1 h-1 bg-zinc-800 rounded-full overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-orange-600 to-transparent w-1/3 animate-slide-x"></div>
</div>
<div class="flex gap-1.5">
<div class="w-1 h-3 bg-green-500 rounded-sm animate-pulse"></div>
<div class="w-1 h-3 bg-green-500 rounded-sm animate-pulse" style="animation-delay: 0.15s"></div>
<div class="w-1 h-3 bg-green-500 rounded-sm animate-pulse" style="animation-delay: 0.3s"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Decorative Corner Marks -->
<div class="absolute bottom-8 left-8 w-4 h-4 border-l border-b border-zinc-800"></div>
<div class="absolute top-8 right-8 w-4 h-4 border-r border-t border-zinc-800"></div>
</div>
<!-- Features Grid Row -->
<section id="features" class="flex flex-col bg-[#050505] border-b border-zinc-800">
<!-- Section Intro -->
<div class="flex flex-col bg-center md:px-12 md:flex-row md:items-end md:pt-36 md:pb-28 border-zinc-800 border-b pt-24 pr-8 pb-20 pl-8 gap-x-6 gap-y-6 justify-between">
<div class="max-w-2xl animate" data-anim="fade-up">
<div class="text-[10px] font-mono text-orange-600 uppercase tracking-widest flex items-center gap-2 mb-4">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// Core_Capabilities
</div>
<h2 class="text-3xl md:text-4xl font-medium text-white uppercase tracking-tight leading-none mb-4">
Infrastructure
<span class="text-zinc-600">Primitives</span>
</h2>
<p class="text-sm text-zinc-500 font-mono leading-relaxed max-w-lg">
The four pillars of the Nexus Engine. Modular, scalable, and
secure by design.
</p>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="#deployments" class="group flex items-center gap-2 text-[10px] uppercase hover:text-orange-600 transition-colors text-zinc-500 tracking-widest font-mono">
Explore All Features
<iconify-icon icon="solar:arrow-right-linear" width="14" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</a>
</div>
</div>
<!-- Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<!-- Card 1 -->
<div class="group relative border-r border-b lg:border-b-0 border-zinc-800 p-8 min-h-[320px] flex flex-col justify-between hover:bg-zinc-900/30 transition-colors animate" data-anim="fade-up" style="animation-delay: 0s;">
<div class="">
<div class="flex justify-between items-start mb-6">
<span class="text-[10px] font-mono text-zinc-600 border border-zinc-800 px-2 py-1 group-hover:border-orange-600/50 group-hover:text-orange-600 transition-colors">
FIG. 01
</span>
<iconify-icon icon="solar:cpu-linear" class="text-zinc-400 group-hover:text-white transition-colors" width="24"></iconify-icon>
</div>
<h3 class="text-lg font-medium text-white uppercase tracking-tight mb-3 group-hover:text-orange-600 transition-colors">
Data Ingestion
</h3>
<p class="leading-relaxed text-xs text-zinc-500 font-mono">
Real-time pipelines processing millions of events per second
across distributed shards.
</p>
</div>
<div class="flex items-center gap-2 text-[9px] font-mono text-zinc-600 uppercase tracking-wider group-hover:text-zinc-400 transition-colors">
<span>Read Specs</span>
<iconify-icon icon="solar:arrow-right-linear" width="12"></iconify-icon>
</div>
</div>
<!-- Card 2 (Replaces Image Only) -->
<div class="group relative border-r border-b lg:border-b-0 border-zinc-800 p-8 min-h-[320px] flex flex-col justify-between hover:bg-zinc-900/30 transition-colors animate" data-anim="fade-up" style="animation-delay: 0.1s;">
<div class="">
<div class="flex justify-between items-start mb-6">
<span class="text-[10px] font-mono text-zinc-600 border border-zinc-800 px-2 py-1 group-hover:border-orange-600/50 group-hover:text-orange-600 transition-colors">
FIG. 02
</span>
<iconify-icon icon="solar:layers-minimalistic-linear" class="text-zinc-400 group-hover:text-white transition-colors" width="24"></iconify-icon>
</div>
<h3 class="text-lg font-medium text-white uppercase tracking-tight mb-3 group-hover:text-orange-600 transition-colors">
Core Processing
</h3>
<p class="leading-relaxed text-xs text-zinc-500 font-mono">
Autonomous logic engines that adapt to workload demands in
sub-millisecond timeframes.
</p>
</div>
<div class="flex items-center gap-2 text-[9px] font-mono text-zinc-600 uppercase tracking-wider group-hover:text-zinc-400 transition-colors">
<span class="">Read Specs</span>
<iconify-icon icon="solar:arrow-right-linear" width="12"></iconify-icon>
</div>
</div>
<!-- Card 3 -->
<div class="group relative border-r border-b md:border-b-0 border-zinc-800 p-8 min-h-[320px] flex flex-col justify-between hover:bg-zinc-900/30 transition-colors animate" data-anim="fade-up" style="animation-delay: 0.2s;">
<div class="">
<div class="flex justify-between items-start mb-6">
<span class="text-[10px] font-mono text-zinc-600 border border-zinc-800 px-2 py-1 group-hover:border-orange-600/50 group-hover:text-orange-600 transition-colors">
FIG. 03
</span>
<iconify-icon icon="solar:shield-check-linear" class="text-zinc-400 group-hover:text-white transition-colors" width="24"></iconify-icon>
</div>
<h3 class="text-lg font-medium text-white uppercase tracking-tight mb-3 group-hover:text-orange-600 transition-colors">
Security Protocol
</h3>
<p class="leading-relaxed text-xs text-zinc-500 font-mono">
SOC2 Type II compliant architecture with AES-256 encryption at
rest and in transit.
</p>
</div>
<div class="flex items-center gap-2 text-[9px] font-mono text-zinc-600 uppercase tracking-wider group-hover:text-zinc-400 transition-colors">
<span class="">Read Specs</span>
<iconify-icon icon="solar:arrow-right-linear" width="12" class=""></iconify-icon>
</div>
</div>
<!-- Card 4 -->
<div class="group relative border-b md:border-b-0 border-zinc-800 p-8 min-h-[320px] flex flex-col justify-between hover:bg-zinc-900/30 transition-colors animate" data-anim="fade-up" style="animation-delay: 0.3s;">
<div class="">
<div class="flex justify-between items-start mb-6">
<span class="text-[10px] font-mono text-zinc-600 border border-zinc-800 px-2 py-1 group-hover:border-orange-600/50 group-hover:text-orange-600 transition-colors">
FIG. 04
</span>
<iconify-icon icon="solar:chart-2-linear" class="text-zinc-400 group-hover:text-white transition-colors" width="24"></iconify-icon>
</div>
<h3 class="text-lg font-medium text-white uppercase tracking-tight mb-3 group-hover:text-orange-600 transition-colors">
System Telemetry
</h3>
<p class="leading-relaxed text-xs text-zinc-500 font-mono">
Granular observability with real-time dashboards and
predictive anomaly detection.
</p>
</div>
<div class="flex items-center gap-2 text-[9px] font-mono text-zinc-600 uppercase tracking-wider group-hover:text-zinc-400 transition-colors">
<span class="">Read Specs</span>
<iconify-icon icon="solar:arrow-right-linear" width="12"></iconify-icon>
</div>
</div>
</div>
</section>
<section class="flex flex-col scroll-mt-16 group bg-[#050505] border-zinc-800 relative" id="deployments">
<!-- Section Header -->
<div class="flex flex-col md:px-12 md:flex-row md:items-end md:pt-36 md:pb-28 bg-center bg-gradient-to-t from-blue-500/0 via-[#ff9300]/10 to-blue-500/0 border-zinc-800 pt-24 pr-8 pb-20 pl-8 gap-x-6 gap-y-6 justify-between">
<div class="max-w-2xl animate" data-anim="fade-up">
<div class="text-[10px] uppercase flex gap-2 text-orange-600 tracking-widest font-mono mb-6 gap-x-2 gap-y-2 items-center">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// System_Applications
</div>
<h2 class="text-3xl md:text-4xl font-medium text-white uppercase tracking-tight mb-4 leading-none">
Deployment
<span class="text-zinc-600">Scenarios</span>
</h2>
<p class="text-sm text-zinc-500 font-mono leading-relaxed max-w-lg mb-4">
Operational contexts where Nexus Engine delivers measurable
value across enterprise infrastructure.
</p>
<div class="flex items-center gap-2 text-[10px] font-mono text-zinc-600 uppercase tracking-wide">
<iconify-icon icon="solar:verified-check-linear" class="text-green-500"></iconify-icon>
Used in production across distributed enterprise stacks
</div>
</div>
<a href="#all-scenarios" class="group flex items-center gap-2 text-[10px] uppercase hover:text-orange-600 transition-colors text-zinc-500 tracking-widest font-mono">
View All Scenarios
<iconify-icon icon="solar:arrow-right-linear" width="14" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</a>
</div>
<!-- Desktop Master-Detail Navigator (lg+) -->
<div class="hidden lg:grid grid-cols-12 border-t border-zinc-800 min-h-[550px] animate" data-anim="fade-up">
<!-- Tabs Column -->
<div class="col-span-4 border-r border-zinc-800 bg-[#050505] flex flex-col">
<!-- Tab 1 -->
<button onclick="window.switchTab(0)" class="scenario-tab group w-full text-left p-8 border-b border-zinc-800 transition-all border-l-2 border-l-orange-600 bg-zinc-900/20" data-index="0">
<div class="flex justify-between items-start mb-3">
<span class="text-[10px] font-mono text-zinc-500 group-hover:text-orange-600 transition-colors uppercase tracking-wider">
DEVOPS_ENV
</span>
<iconify-icon icon="solar:server-square-linear" class="text-zinc-600 group-hover:text-white transition-colors" width="20"></iconify-icon>
</div>
<div class="text-base font-medium text-white uppercase tracking-tight mb-3">
Cloud Infrastructure Automation
</div>
<div class="inline-flex items-center px-2 py-1 bg-zinc-900 border border-zinc-800 rounded-sm text-[10px] font-mono text-green-500">
-63% DEPLOY TIME
</div>
</button>
<!-- Tab 2 -->
<button onclick="window.switchTab(1)" class="scenario-tab group w-full text-left p-8 border-b border-zinc-800 hover:bg-zinc-900/10 transition-all border-l-2 border-l-transparent" data-index="1">
<div class="flex justify-between items-start mb-3">
<span class="text-[10px] font-mono text-zinc-500 group-hover:text-orange-600 transition-colors uppercase tracking-wider">
AI_OPS
</span>
<iconify-icon icon="solar:smart-home-angle-linear" class="text-zinc-600 group-hover:text-white transition-colors" width="20"></iconify-icon>
</div>
<div class="text-base font-medium text-zinc-400 group-hover:text-white uppercase tracking-tight mb-3 transition-colors">
Autonomous AI Orchestration
</div>
<div class="inline-flex items-center px-2 py-1 bg-zinc-900 border border-zinc-800 rounded-sm text-[10px] font-mono text-zinc-500 group-hover:text-green-500 transition-colors">
+41% COMPUTE EFFICIENCY
</div>
</button>
<!-- Tab 3 -->
<button onclick="window.switchTab(2)" class="scenario-tab group w-full text-left p-8 border-b border-zinc-800 hover:bg-zinc-900/10 transition-all border-l-2 border-l-transparent" data-index="2">
<div class="flex justify-between items-start mb-3">
<span class="text-[10px] font-mono text-zinc-500 group-hover:text-orange-600 transition-colors uppercase tracking-wider">
ENTERPRISE
</span>
<iconify-icon icon="solar:chart-2-linear" class="text-zinc-600 group-hover:text-white transition-colors" width="20"></iconify-icon>
</div>
<div class="text-base font-medium text-zinc-400 group-hover:text-white uppercase tracking-tight mb-3 transition-colors">
High-Scale System Monitoring
</div>
<div class="inline-flex items-center px-2 py-1 bg-zinc-900 border border-zinc-800 rounded-sm text-[10px] font-mono text-zinc-500 group-hover:text-green-500 transition-colors">
99.99% UPTIME SLA
</div>
</button>
<!-- Tab 4 -->
<button onclick="window.switchTab(3)" class="scenario-tab group w-full text-left p-8 border-b border-zinc-800 hover:bg-zinc-900/10 transition-all border-l-2 border-l-transparent" data-index="3">
<div class="flex justify-between items-start mb-3">
<span class="text-[10px] font-mono text-zinc-500 group-hover:text-orange-600 transition-colors uppercase tracking-wider">
SECURITY
</span>
<iconify-icon icon="solar:shield-warning-linear" class="text-zinc-600 group-hover:text-white transition-colors" width="20"></iconify-icon>
</div>
<div class="text-base font-medium text-zinc-400 group-hover:text-white uppercase tracking-tight mb-3 transition-colors">
Infrastructure Security
</div>
<div class="inline-flex items-center px-2 py-1 bg-zinc-900 border border-zinc-800 rounded-sm text-[10px] font-mono text-zinc-500 group-hover:text-green-500 transition-colors">
SOC2 TYPE II READY
</div>
</button>
</div>
<!-- Detail Panels Column -->
<div class="col-span-8 bg-[#080808] relative overflow-hidden">
<!-- Grid BG -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none"></div>
<!-- Panel 1: DevOps -->
<div class="scenario-panel absolute inset-0 p-16 flex flex-col justify-between opacity-100 z-10 transition-all duration-300" data-index="0">
<div class="flex justify-between items-center gap-12 h-full">
<div class="max-w-lg flex flex-col justify-center">
<h3 class="text-3xl text-white font-medium uppercase tracking-tight mb-4">
Cloud Infrastructure Automation
</h3>
<p class="text-sm font-mono text-zinc-500 mb-8 border-l border-zinc-800 pl-4">
Automate provisioning, deploys, and drift correction
across environments.
</p>
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
IaC generation + drift detection
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Progressive delivery + automatic rollbacks
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Environment promotion with policy gates
</div>
</div>
<div class="flex flex-wrap items-center gap-y-2 gap-x-6 text-[10px] font-mono text-zinc-500 uppercase tracking-wider mb-10 border-t border-zinc-800/50 pt-6">
<div class="flex items-center gap-2">
<span>DEPLOY_TIME:</span>
<span class="text-white bg-green-500/10 px-1 rounded">
-63%
</span>
</div>
<div class="flex items-center gap-2">
<span>ROLLBACK:</span>
<span class="text-zinc-300">AUTO</span>
</div>
<div class="flex items-center gap-2">
<span>DRIFT:</span>
<span class="text-orange-600">MONITORED</span>
</div>
</div>
<div class="flex gap-4">
<button class="bg-orange-600 text-white px-6 py-3 text-[10px] font-mono uppercase tracking-widest hover:bg-orange-500 transition-colors font-medium shadow-[0_0_15px_rgba(234,88,12,0.3)]">
Request Demo
</button>
<button class="bg-transparent border border-zinc-700 text-zinc-400 px-6 py-3 text-[10px] font-mono uppercase tracking-widest hover:text-white hover:border-white transition-colors">
Read Documentation
</button>
</div>
</div>
<div class="hidden xl:flex w-72 border border-zinc-800 bg-[#050505] p-4 flex-col gap-3 shadow-2xl rotate-1 group-hover:rotate-0 transition-transform duration-500 self-center">
<div class="flex justify-between border-b border-zinc-800 pb-2 mb-1">
<span class="text-[9px] font-mono text-zinc-500">
TERMINAL_OUT
</span>
<div class="flex gap-1.5">
<div class="w-1.5 h-1.5 rounded-full bg-zinc-700"></div>
<div class="w-1.5 h-1.5 rounded-full bg-zinc-700"></div>
</div>
</div>
<div class="space-y-2 font-mono text-[9px] text-zinc-500">
<div class="text-zinc-400">
> terraform plan -out=tfplan
</div>
<div class="text-green-500">No drift detected.</div>
<div class="text-zinc-400">
> deploying to us-east-1...
</div>
<div class="h-1 w-full bg-zinc-800 mt-2 overflow-hidden">
<div class="h-full bg-orange-600 w-2/3 animate-pulse"></div>
</div>
</div>
<div class="mt-4 flex justify-between">
<span class="text-[9px] font-mono text-green-500">
SUCCESS
</span>
<span class="text-[9px] font-mono text-zinc-600">4s</span>
</div>
</div>
</div>
</div>
<!-- Panel 2: AI Ops -->
<div class="scenario-panel absolute inset-0 p-16 flex flex-col justify-between opacity-0 pointer-events-none z-0 transition-all duration-300 transform translate-x-4" data-index="1">
<div class="flex justify-between items-center gap-12 h-full">
<div class="max-w-lg flex flex-col justify-center">
<h3 class="text-3xl text-white font-medium uppercase tracking-tight mb-4">
Autonomous AI Orchestration
</h3>
<p class="text-sm font-mono text-zinc-500 mb-8 border-l border-zinc-800 pl-4">
Coordinate agent execution, scheduling, and resource
optimization.
</p>
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Global scheduler + event bus routing
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Agent lifecycle + sandboxed runtimes
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Cost-aware scaling and throttling
</div>
</div>
<div class="flex flex-wrap items-center gap-y-2 gap-x-6 text-[10px] font-mono text-zinc-500 uppercase tracking-wider mb-10 border-t border-zinc-800/50 pt-6">
<div class="flex items-center gap-2">
<span>EFFICIENCY:</span>
<span class="text-white bg-green-500/10 px-1 rounded">
+41%
</span>
</div>
<div class="flex items-center gap-2">
<span>TASKS:</span>
<span class="text-zinc-300">14k/day</span>
</div>
<div class="flex items-center gap-2">
<span>QUEUE:</span>
<span class="text-green-500">STABLE</span>
</div>
</div>
<div class="flex gap-6">
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-orange-600 hover:text-white transition-colors group">
See Implementation
<iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-zinc-500 hover:text-white transition-colors">
View Runbook
</button>
</div>
</div>
<div class="hidden xl:grid w-72 border border-zinc-800 bg-[#050505] p-4 grid-cols-2 gap-2 shadow-2xl rotate-1 group-hover:rotate-0 transition-transform self-center">
<div class="border border-zinc-800 bg-zinc-900/50 p-4 flex items-center justify-center text-[10px] font-mono text-zinc-500">
GPU_01
</div>
<div class="border border-zinc-800 bg-zinc-900/50 p-4 flex items-center justify-center text-[10px] font-mono text-zinc-500">
GPU_02
</div>
<div class="border border-orange-600/30 bg-orange-600/10 p-4 flex items-center justify-center text-[10px] font-mono text-orange-500 animate-pulse">
ACTIVE
</div>
<div class="border border-zinc-800 bg-zinc-900/50 p-4 flex items-center justify-center text-[10px] font-mono text-zinc-500">
IDLE
</div>
</div>
</div>
</div>
<!-- Panel 3: Enterprise -->
<div class="scenario-panel absolute inset-0 p-16 flex flex-col justify-between opacity-0 pointer-events-none z-0 transition-all duration-300 transform translate-x-4" data-index="2">
<div class="flex justify-between items-center gap-12 h-full">
<div class="max-w-lg flex flex-col justify-center">
<h3 class="text-3xl text-white font-medium uppercase tracking-tight mb-4">
High-Scale System Monitoring
</h3>
<p class="text-sm font-mono text-zinc-500 mb-8 border-l border-zinc-800 pl-4">
Real-time telemetry, anomaly detection, and SLO
enforcement.
</p>
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Metrics/logs/traces unification
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Alert routing + incident correlation
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
SLO dashboards + error budget burn
</div>
</div>
<div class="flex flex-wrap items-center gap-y-2 gap-x-6 text-[10px] font-mono text-zinc-500 uppercase tracking-wider mb-10 border-t border-zinc-800/50 pt-6">
<div class="flex items-center gap-2">
<span>UPTIME:</span>
<span class="text-green-500">99.99%</span>
</div>
<div class="flex items-center gap-2">
<span>P99:</span>
<span class="text-zinc-300">12ms</span>
</div>
<div class="flex items-center gap-2">
<span>ALERTS:</span>
<span class="text-white">ROUTED</span>
</div>
</div>
<div class="flex gap-6">
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-orange-600 hover:text-white transition-colors group">
View Dashboards
<iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-zinc-500 hover:text-white transition-colors">
Explore Alerts
</button>
</div>
</div>
<div class="hidden xl:flex w-72 border border-zinc-800 bg-[#050505] p-4 flex-col gap-1 items-end shadow-2xl rotate-1 group-hover:rotate-0 transition-transform self-center">
<div class="w-full h-2 bg-zinc-800 mb-2"></div>
<div class="w-[80%] h-2 bg-zinc-800 mb-2"></div>
<div class="w-[40%] h-2 bg-orange-600 mb-2 animate-pulse"></div>
<div class="w-[90%] h-2 bg-zinc-800"></div>
<div class="mt-4 pt-4 border-t border-zinc-800 w-full text-center text-[10px] font-mono text-green-500">
SYSTEM_HEALTH_99%
</div>
</div>
</div>
</div>
<!-- Panel 4: Security -->
<div class="scenario-panel absolute inset-0 p-16 flex flex-col justify-between opacity-0 pointer-events-none z-0 transition-all duration-300 transform translate-x-4" data-index="3">
<div class="flex justify-between items-center gap-12 h-full">
<div class="max-w-lg flex flex-col justify-center">
<h3 class="text-3xl text-white font-medium uppercase tracking-tight mb-4">
Infrastructure Security
</h3>
<p class="text-sm font-mono text-zinc-500 mb-8 border-l border-zinc-800 pl-4">
Policy enforcement, audit trails, and secure execution
boundaries.
</p>
<div class="space-y-3 mb-8">
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
RBAC + MFA + signed actions
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Policy engine + compliance reporting
</div>
<div class="flex items-center gap-3 text-xs font-mono text-zinc-300">
<span class="w-1.5 h-1.5 bg-orange-600 rounded-sm"></span>
Secrets handling + encrypted pipelines
</div>
</div>
<div class="flex flex-wrap items-center gap-y-2 gap-x-6 text-[10px] font-mono text-zinc-500 uppercase tracking-wider mb-10 border-t border-zinc-800/50 pt-6">
<div class="flex items-center gap-2">
<span>SOC2:</span>
<span class="text-green-500">READY</span>
</div>
<div class="flex items-center gap-2">
<span>AUDIT:</span>
<span class="text-white">ENABLED</span>
</div>
<div class="flex items-center gap-2">
<span>POLICIES:</span>
<span class="text-zinc-300">ENFORCED</span>
</div>
</div>
<div class="flex gap-6">
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-orange-600 hover:text-white transition-colors group">
View Policies
<iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<button class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-zinc-500 hover:text-white transition-colors">
Security Overview
</button>
</div>
</div>
<div class="hidden xl:flex w-72 items-center justify-center h-48 border border-zinc-800 bg-[#050505] p-4 shadow-2xl rotate-1 group-hover:rotate-0 transition-transform self-center">
<iconify-icon icon="solar:shield-check-bold" class="text-orange-600 text-6xl drop-shadow-[0_0_15px_rgba(234,88,12,0.5)]"></iconify-icon>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile/Tablet Accordion (lg:hidden) -->
<div class="lg:hidden flex flex-col border-t border-zinc-800">
<!-- Item 1 -->
<div class="border-b border-zinc-800">
<button class="w-full text-left p-6 bg-[#050505] flex flex-col gap-2 group" onclick="window.toggleAccordion(this)">
<div class="flex justify-between items-center w-full mb-2">
<span class="text-[10px] font-mono text-orange-600 uppercase tracking-wider">
DEVOPS_ENV
</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-zinc-500 transition-transform duration-300 group-hover:text-white"></iconify-icon>
</div>
<div class="text-lg font-medium text-white uppercase tracking-tight">
Cloud Infrastructure Automation
</div>
<div class="text-[10px] font-mono text-green-500 mt-1">
-63% DEPLOYMENT TIME
</div>
</button>
<div class="hidden bg-zinc-900/20 p-6 pt-0 border-t border-zinc-800/50">
<p class="text-xs text-zinc-500 font-mono leading-relaxed mb-6 mt-4">
Automate provisioning, scaling, and monitoring across
distributed cloud environments with real-time telemetry.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Zero-touch Provisioning
</li>
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
GitOps Integration
</li>
</ul>
</div>
</div>
<!-- Item 2 -->
<div class="border-b border-zinc-800">
<button class="w-full text-left p-6 bg-[#050505] flex flex-col gap-2 group" onclick="window.toggleAccordion(this)">
<div class="flex justify-between items-center w-full mb-2">
<span class="text-[10px] font-mono text-orange-600 uppercase tracking-wider">
AI_OPS
</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-zinc-500 transition-transform duration-300 group-hover:text-white"></iconify-icon>
</div>
<div class="text-lg font-medium text-white uppercase tracking-tight">
Autonomous AI Orchestration
</div>
<div class="text-[10px] font-mono text-green-500 mt-1">
+41% COMPUTE EFFICIENCY
</div>
</button>
<div class="hidden bg-zinc-900/20 p-6 pt-0 border-t border-zinc-800/50">
<p class="text-xs text-zinc-500 font-mono leading-relaxed mb-6 mt-4">
Deploy and manage autonomous AI agents with centralized
processing control.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Dynamic GPU Allocation
</li>
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Model Versioning
</li>
</ul>
</div>
</div>
<!-- Item 3 -->
<div class="border-b border-zinc-800">
<button class="w-full text-left p-6 bg-[#050505] flex flex-col gap-2 group" onclick="window.toggleAccordion(this)">
<div class="flex justify-between items-center w-full mb-2">
<span class="text-[10px] font-mono text-orange-600 uppercase tracking-wider">
ENTERPRISE
</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-zinc-500 transition-transform duration-300 group-hover:text-white"></iconify-icon>
</div>
<div class="text-lg font-medium text-white uppercase tracking-tight">
High-Scale System Monitoring
</div>
<div class="text-[10px] font-mono text-green-500 mt-1">
99.99% UPTIME
</div>
</button>
<div class="hidden bg-zinc-900/20 p-6 pt-0 border-t border-zinc-800/50">
<p class="text-xs text-zinc-500 font-mono leading-relaxed mb-6 mt-4">
Monitor system health, resource utilization, and operational
performance across enterprise-scale environments.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Predictive Anomaly Detection
</li>
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Role-Based Access
</li>
</ul>
</div>
</div>
<!-- Item 4 -->
<div class="border-b border-zinc-800">
<button class="w-full text-left p-6 bg-[#050505] flex flex-col gap-2 group" onclick="window.toggleAccordion(this)">
<div class="flex justify-between items-center w-full mb-2">
<span class="text-[10px] font-mono text-orange-600 uppercase tracking-wider">
SECURITY
</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-zinc-500 transition-transform duration-300 group-hover:text-white"></iconify-icon>
</div>
<div class="text-lg font-medium text-white uppercase tracking-tight">
Infrastructure Security
</div>
<div class="text-[10px] font-mono text-green-500 mt-1">
SOC2 COMPLIANT
</div>
</button>
<div class="hidden bg-zinc-900/20 p-6 pt-0 border-t border-zinc-800/50">
<p class="text-xs text-zinc-500 font-mono leading-relaxed mb-6 mt-4">
Enforce security policies, encryption standards, and
compliance requirements across every system layer.
</p>
<ul class="space-y-3 mb-6">
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Automated Encryption
</li>
<li class="flex items-center gap-3 text-[10px] font-mono text-zinc-400">
<span class="w-1 h-1 bg-orange-600 rounded-full"></span>
Zero Trust Architecture
</li>
</ul>
</div>
</div>
<!-- Mobile Sticky CTA -->
<div class="sticky bottom-0 bg-[#050505] p-6 border-t border-zinc-800 flex gap-3 z-30 shadow-2xl">
<button class="flex-1 py-3 bg-orange-600 text-white text-[10px] font-mono uppercase tracking-widest hover:bg-orange-500 transition-colors font-medium" data-demo-trigger="true">
Request Demo
</button>
<button class="flex-1 py-3 bg-zinc-900 border border-zinc-700 text-zinc-400 text-[10px] font-mono uppercase tracking-widest hover:text-white hover:border-white transition-colors">
Read Docs
</button>
</div>
</div>
<script>
window.switchTab = function(index) {
document.querySelectorAll('.scenario-tab').forEach(tab => {
const isSelected = tab.getAttribute('data-index') == index;
const icon = tab.querySelector('iconify-icon');
if(isSelected) {
tab.classList.add('border-l-orange-600', 'bg-zinc-900/20');
tab.classList.remove('border-l-transparent');
tab.querySelector('.text-base').classList.remove('text-zinc-400');
tab.querySelector('.text-base').classList.add('text-white');
if(icon) { icon.classList.remove('text-zinc-600'); icon.classList.add('text-orange-600'); }
} else {
tab.classList.remove('border-l-orange-600', 'bg-zinc-900/20');
tab.classList.add('border-l-transparent');
tab.querySelector('.text-base').classList.add('text-zinc-400');
tab.querySelector('.text-base').classList.remove('text-white');
if(icon) { icon.classList.add('text-zinc-600'); icon.classList.remove('text-orange-600'); }
}
});
document.querySelectorAll('.scenario-panel').forEach(panel => {
if(panel.getAttribute('data-index') == index) {
panel.classList.remove('opacity-0', 'pointer-events-none', 'z-0', 'translate-x-4');
panel.classList.add('opacity-100', 'z-10', 'translate-x-0');
} else {
panel.classList.add('opacity-0', 'pointer-events-none', 'z-0', 'translate-x-4');
panel.classList.remove('opacity-100', 'z-10', 'translate-x-0');
}
});
};
window.toggleAccordion = function(btn) {
const content = btn.nextElementSibling;
const icon = btn.querySelector('iconify-icon');
const isHidden = content.classList.contains('hidden');
// Close others
document.querySelectorAll('.lg\\:hidden .hidden').forEach(el => {
if(el.parentElement !== btn.parentElement) {
el.classList.add('hidden');
el.previousElementSibling.querySelector('iconify-icon').style.transform = 'rotate(0deg)';
}
});
if(isHidden) {
content.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
content.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
}
};
</script>
</section>
<div class="flex flex-col border-t border-b border-zinc-800 bg-[#050505] relative overflow-hidden" id="flow">
<!-- Section Header -->
<div class="flex flex-col md:px-12 md:flex-row md:items-end md:pt-36 md:pb-28 bg-center bg-gradient-to-t from-blue-500/0 via-[#ff9300]/10 to-blue-500/0 border-zinc-800 border-b pt-24 pr-8 pb-20 pl-8 gap-x-6 gap-y-6 justify-between" style="mask-image: linear-gradient(180deg, transparent, black 30%, black 100%); -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 100%);">
<div class="">
<div class="text-[10px] uppercase flex text-orange-600 tracking-widest font-mono mb-4 gap-x-2 gap-y-2 items-center">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// Operational_Logic
</div>
<h2 class="text-3xl md:text-4xl font-medium text-white uppercase tracking-tight leading-none">
System
<span class="text-zinc-600">Flow</span>
</h2>
<p class="text-sm text-zinc-500 font-mono leading-relaxed max-w-xl mt-4" data-anim="fade-up">
Operational pipeline outlining how Nexus Engine connects,
deploys, monitors, and scales production systems.
</p>
</div>
<div class="hidden md:flex items-center gap-3 text-[10px] font-mono text-zinc-500 uppercase tracking-wider">
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span>Pipeline Active</span>
<div class="w-px h-4 bg-zinc-800 mx-2"></div>
<span>v4.2.0</span>
</div>
</div>
<!-- Complex System Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]">
<!-- COL 1: CONNECT (Input Stream) - Span 3 -->
<div class="lg:col-span-3 border-r border-zinc-800 p-8 flex flex-col relative bg-zinc-900/10 group hover:bg-zinc-900/20 transition-colors" data-anim="fade-right">
<div class="absolute top-0 left-0 p-2 border-r border-b border-zinc-800 bg-[#050505] text-[9px] font-mono text-zinc-500">
01_CONNECT
</div>
<div class="mt-12 space-y-6 flex-1">
<div class="flex items-center justify-between mb-6">
<h3 class="text-sm text-white font-medium uppercase tracking-wider">
Ingestion Nodes
</h3>
<iconify-icon icon="solar:link-circle-linear" class="text-zinc-500" width="18"></iconify-icon>
</div>
<!-- Source Items List -->
<div class="space-y-3">
<div class="flex items-center justify-between p-3 border border-zinc-800 bg-black/50 hover:border-zinc-700 transition-colors cursor-default">
<div class="flex items-center gap-3">
<div class="w-1.5 h-1.5 bg-orange-600 rounded-none"></div>
<span class="text-xs text-zinc-300 font-mono">
AWS_KINESIS
</span>
</div>
<span class="text-[9px] text-green-500 font-mono">
LINKED
</span>
</div>
<div class="flex items-center justify-between p-3 border border-zinc-800 bg-black/50 hover:border-zinc-700 transition-colors cursor-default">
<div class="flex items-center gap-3">
<div class="w-1.5 h-1.5 bg-zinc-600 rounded-none"></div>
<span class="text-xs text-zinc-300 font-mono">
REST_API_V2
</span>
</div>
<span class="text-[9px] text-zinc-500 font-mono">IDLE</span>
</div>
<div class="flex items-center justify-between p-3 border border-zinc-800 bg-black/50 hover:border-zinc-700 transition-colors cursor-default">
<div class="flex items-center gap-3">
<div class="w-1.5 h-1.5 bg-orange-600 rounded-none"></div>
<span class="text-xs text-zinc-300 font-mono">
SQL_SHARD_04
</span>
</div>
<span class="text-[9px] text-green-500 font-mono">
SYNC
</span>
</div>
</div>
</div>
<div class="mt-auto pt-6">
<div class="flex justify-between items-center text-[10px] font-mono text-zinc-500 mb-2">
<span>THROUGHPUT</span>
<span class="text-white">4.2 GB/s</span>
</div>
<div class="w-full bg-zinc-800 h-px overflow-hidden">
<div class="h-full w-1/3 bg-orange-600/80 animate-pulse ml-0"></div>
</div>
</div>
</div>
<!-- COL 2: DEPLOY (Core Processing) - Span 6 -->
<div class="lg:col-span-6 border-r border-zinc-800 bg-[#080808] relative flex flex-col overflow-hidden group" data-anim="scale-in" data-delay="0.1" style="animation-delay: 0.1s;">
<!-- Background Pattern -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_70%)] pointer-events-none"></div>
<div class="absolute top-0 right-0 p-2 border-l border-b border-zinc-800 bg-[#050505] text-[9px] font-mono text-orange-600 z-10">
02_DEPLOY [CORE]
</div>
<div class="p-12 flex flex-col h-full items-center justify-center relative z-10">
<!-- Core Animation -->
<div class="relative w-64 h-64 mb-12 flex items-center justify-center">
<div class="absolute inset-0 border border-zinc-800 rounded-full animate-[spin_10s_linear_infinite] opacity-30"></div>
<div class="absolute inset-4 border border-zinc-800 rounded-full animate-[spin_15s_linear_infinite_reverse] opacity-30"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-32 h-32 border border-orange-600/20 bg-orange-600/5 rounded-full flex items-center justify-center backdrop-blur-sm">
<iconify-icon icon="solar:cpu-bolt-linear" class="text-orange-600 text-4xl drop-shadow-[0_0_15px_rgba(234,88,12,0.5)]"></iconify-icon>
</div>
</div>
<!-- Orbital Elements -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1 w-2 h-2 bg-white rounded-full"></div>
<div class="absolute bottom-1/2 right-0 translate-x-1 translate-y-1/2 w-1.5 h-1.5 bg-zinc-500 rounded-full"></div>
</div>
<div class="text-center space-y-2 max-w-md">
<h3 class="text-xl font-medium text-white uppercase tracking-tight">
Nexus Orchestration Engine
</h3>
<p class="text-zinc-500 font-mono text-xs leading-relaxed">
Deploying autonomous agents to optimized infrastructure
zones. Zero-latency handoff protocols active.
</p>
</div>
<!-- Core Status -->
<div class="mt-8 px-4 py-1.5 rounded-full border border-zinc-800 bg-zinc-900/50 flex items-center gap-2">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
<span class="text-[10px] font-mono text-zinc-300 uppercase tracking-wider">
System Optimal
</span>
</div>
</div>
<!-- Live Logs Terminal -->
<div class="absolute bottom-0 left-0 right-0 h-32 border-t border-zinc-800 bg-[#050505]/90 p-4 font-mono text-[10px] text-zinc-500 overflow-hidden">
<div class="flex justify-between items-center mb-2 opacity-50">
<span>LOG_STREAM</span>
<span>LIVE</span>
</div>
<div class="space-y-1 opacity-70">
<div class="flex gap-4">
<span class="text-zinc-700">00:01:23</span>
<span class="text-zinc-400">
> init_sequence(target="cluster_alpha")
</span>
</div>
<div class="flex gap-4">
<span class="text-zinc-700">00:01:24</span>
<span class="text-zinc-400">
> allocating_resources...
<span class="text-green-600">DONE</span>
</span>
</div>
<div class="flex gap-4">
<span class="text-zinc-700">00:01:25</span>
<span class="text-zinc-400">
> deploy_agents --mode=autonomous --scale=auto
</span>
</div>
<div class="flex gap-4">
<span class="text-zinc-700">00:01:25</span>
<span class="text-orange-600">
> WARN: latency_spike detected in zone_b (resolved)
</span>
</div>
</div>
</div>
</div>
<!-- COL 3: MONITOR & SCALE (Output/Stats) - Span 3 -->
<div class="lg:col-span-3 flex flex-col border-r lg:border-r-0 border-zinc-800" data-anim="fade-left" data-delay="0.2" style="animation-delay: 0.2s;">
<!-- Top: MONITOR Module -->
<div class="flex-1 border-b border-zinc-800 p-8 relative bg-zinc-900/5 group hover:bg-zinc-900/10 transition-colors">
<div class="absolute top-0 left-0 p-2 border-r border-b border-zinc-800 bg-[#050505] text-[9px] font-mono text-zinc-500">
03_MONITOR
</div>
<div class="mt-10 mb-6">
<h3 class="text-sm text-white font-medium uppercase tracking-wider mb-4">
Telemetry
</h3>
<div class="grid grid-cols-2 gap-3">
<div class="p-3 border border-zinc-800 bg-[#050505]">
<div class="text-[9px] text-zinc-500 font-mono uppercase mb-1">
Latency
</div>
<div class="text-lg text-white font-light tracking-tighter">
12ms
</div>
</div>
<div class="p-3 border border-zinc-800 bg-[#050505]">
<div class="text-[9px] text-zinc-500 font-mono uppercase mb-1">
Uptime
</div>
<div class="text-lg text-green-500 font-light tracking-tighter">
99.9%
</div>
</div>
<div class="p-3 border border-zinc-800 bg-[#050505] col-span-2">
<div class="flex justify-between items-center mb-1">
<div class="text-[9px] text-zinc-500 font-mono uppercase">
Request Load
</div>
<div class="text-[9px] text-orange-600 font-mono">
HIGH
</div>
</div>
<div class="flex items-end gap-0.5 h-8 mt-2">
<div class="flex-1 bg-zinc-800 h-[30%] hover:bg-orange-600/80 transition-colors"></div>
<div class="flex-1 bg-zinc-800 h-[50%] hover:bg-orange-600/80 transition-colors"></div>
<div class="flex-1 bg-zinc-800 h-[80%] hover:bg-orange-600/80 transition-colors"></div>
<div class="flex-1 bg-orange-600 h-[95%]"></div>
<div class="flex-1 bg-zinc-800 h-[60%] hover:bg-orange-600/80 transition-colors"></div>
<div class="flex-1 bg-zinc-800 h-[40%] hover:bg-orange-600/80 transition-colors"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom: SCALE Module -->
<div class="flex-1 p-8 relative bg-zinc-950 flex flex-col justify-center group hover:bg-zinc-900 transition-colors">
<div class="absolute top-0 left-0 p-2 border-r border-b border-zinc-800 bg-[#050505] text-[9px] font-mono text-zinc-500">
04_SCALE
</div>
<div class="flex items-start justify-between mb-6">
<div>
<h3 class="text-sm text-white font-medium uppercase tracking-wider">
Auto-Scaling
</h3>
<p class="text-[10px] text-zinc-600 mt-1 font-mono">
Resource elasticity active
</p>
</div>
<iconify-icon icon="solar:layers-minimalistic-linear" class="text-orange-600" width="20"></iconify-icon>
</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-[9px] font-mono text-zinc-400 mb-1">
<span>COMPUTE_ALLOC</span>
<span>84%</span>
</div>
<div class="w-full bg-zinc-800 h-1.5">
<div class="bg-white h-full w-[84%] relative">
<div class="absolute right-0 top-1/2 -translate-y-1/2 w-1 h-2 bg-orange-600"></div>
</div>
</div>
</div>
<div>
<div class="flex justify-between text-[9px] font-mono text-zinc-400 mb-1">
<span>MEMORY_POOL</span>
<span>42%</span>
</div>
<div class="w-full bg-zinc-800 h-1.5">
<div class="bg-zinc-600 h-full w-[42%]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col border-b border-zinc-800 bg-[#050505] relative" id="validation">
<!-- Console Header -->
<div class="flex flex-col bg-center md:px-12 md:flex-row md:items-end md:pt-36 md:pb-28 bg-gradient-to-t from-blue-500/0 via-[#ff9300]/10 to-blue-500/0 border-zinc-800 border-b pt-24 pr-8 pb-20 pl-8 gap-x-6 gap-y-6 justify-between">
<!-- Decoration -->
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-zinc-800/20 to-transparent pointer-events-none"></div>
<div class="relative z-10">
<div class="text-[10px] font-mono text-orange-600 uppercase tracking-widest flex items-center gap-2 mb-3">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// System_Audit_Protocol_v4
</div>
<h2 class="text-3xl md:text-4xl font-medium text-white uppercase tracking-tight leading-none" data-anim="fade-up">
Validation
<span class="text-zinc-600">Console</span>
</h2>
<p class="text-sm text-zinc-500 font-mono leading-relaxed max-w-2xl mt-4">
Live system audit interface verifying production readiness,
compliance, and operational integrity.
</p>
</div>
<div class="flex items-center gap-8 relative z-10">
<div class="hidden md:block text-right">
<div class="text-[9px] text-zinc-500 font-mono uppercase tracking-wider mb-1">
Audit Session
</div>
<div class="text-xs text-white font-mono bg-zinc-900 px-2 py-1 border border-zinc-800">
ID: 8842-XC
</div>
</div>
<div class="text-right">
<div class="text-[9px] text-zinc-500 font-mono uppercase tracking-wider mb-1">
Status
</div>
<div class="text-xs text-green-500 font-mono flex items-center gap-2 justify-end">
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
VERIFIED
</div>
</div>
</div>
</div>
<!-- Console Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 min-h-[500px] bg-[#050505]">
<!-- Left Main Panel (8 cols) -->
<div class="lg:col-span-8 border-r border-zinc-800 flex flex-col">
<!-- Top: Production Ready Verification -->
<div class="flex-1 p-8 md:p-12 relative overflow-hidden group border-b border-zinc-800 bg-zinc-900/5 hover:bg-zinc-900/10 transition-colors" data-anim="fade-up">
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none"></div>
<div class="relative z-10 h-full flex flex-col justify-between">
<div class="">
<div class="inline-flex items-center gap-2 px-3 py-1 border border-green-500/20 bg-green-500/5 text-[10px] font-mono text-green-500 uppercase tracking-wider mb-8">
<iconify-icon icon="solar:shield-check-bold" width="14"></iconify-icon>
Production Environment Active
</div>
<h3 class="text-4xl md:text-5xl lg:text-6xl font-medium text-white tracking-tighter uppercase leading-[0.9]">
Enterprise
<span class="block text-zinc-700">Integrity</span>
</h3>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 items-end">
<p class="text-xs text-zinc-500 font-mono leading-relaxed border-l border-zinc-800 pl-4">
System infrastructure verified for high-availability
environments. Zero-trust architecture enforced across all
active nodes.
</p>
<div class="flex gap-8">
<div>
<div class="text-[9px] text-zinc-600 font-mono uppercase mb-1">
Uptime SLA
</div>
<div class="text-xl text-white font-light tracking-tight">
99.99%
</div>
</div>
<div>
<div class="text-[9px] text-zinc-600 font-mono uppercase mb-1">
Latency
</div>
<div class="text-xl text-white font-light tracking-tight">
<10ms
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom: Compliance & Security (Split) -->
<div class="h-auto md:h-64 grid grid-cols-1 md:grid-cols-2">
<!-- Compliance -->
<div class="border-r border-zinc-800 p-8 flex flex-col justify-between hover:bg-zinc-900/20 transition-colors" data-anim="fade-up" style="animation-delay: 0s;">
<div class="flex justify-between items-start">
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
Compliance_Log
</span>
<iconify-icon icon="solar:file-check-linear" class="text-zinc-600" width="18"></iconify-icon>
</div>
<div class="space-y-3 mt-4">
<div class="flex items-center justify-between text-[10px] font-mono border-b border-zinc-800 pb-2">
<span class="text-zinc-300">SOC2 Type II</span>
<span class="text-green-500">[VERIFIED]</span>
</div>
<div class="flex items-center justify-between text-[10px] font-mono border-b border-zinc-800 pb-2">
<span class="text-zinc-300">ISO 27001</span>
<span class="text-green-500">[ACTIVE]</span>
</div>
<div class="flex items-center justify-between text-[10px] font-mono pb-1">
<span class="text-zinc-300">GDPR / CCPA</span>
<span class="text-green-500">[COMPLIANT]</span>
</div>
</div>
</div>
<!-- Encryption -->
<div class="p-8 flex flex-col justify-between hover:bg-zinc-900/20 transition-colors relative overflow-hidden group" data-anim="fade-up" style="animation-delay: 0.1s;">
<div class="flex justify-between items-start z-10">
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">
Security_Protocol
</span>
<iconify-icon icon="solar:lock-password-linear" class="text-zinc-600" width="18"></iconify-icon>
</div>
<div class="z-10 mt-4">
<div class="text-3xl font-light text-white mb-2 tracking-tight">
AES-256
</div>
<div class="text-[10px] text-zinc-500 font-mono leading-relaxed">
End-to-end encryption active for data at rest and in
transit.
</div>
</div>
<iconify-icon icon="solar:shield-bold" class="absolute -bottom-4 -right-4 text-zinc-800/50 -rotate-12 group-hover:text-zinc-800 transition-colors duration-500" width="100"></iconify-icon>
</div>
</div>
</div>
<!-- Right Sidebar (4 cols) -->
<div class="lg:col-span-4 flex flex-col bg-zinc-950/30" data-delay="0.2">
<!-- Metric 1: Event Load -->
<div class="flex-1 p-8 border-b border-zinc-800 hover:bg-zinc-900 transition-colors flex flex-col justify-center" data-anim="fade-up" style="animation-delay: 0s;">
<div class="flex justify-between items-end mb-4">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-wider">
Event_Throughput
</span>
<span class="text-[9px] font-mono text-orange-600">
HIGH_LOAD
</span>
</div>
<div class="flex items-baseline gap-2 mb-4">
<span class="text-4xl font-medium text-white tracking-tighter" data-sys-counter="142" data-sys-suffix="M+">
0
</span>
<span class="text-xs text-zinc-600 font-mono uppercase">
Daily
</span>
</div>
<!-- Visual Bar -->
<div class="w-full bg-zinc-900 border border-zinc-800 h-2 p-0.5">
<div class="h-full bg-orange-600 w-[85%] relative overflow-hidden sys-bar-fill" style="--sys-width: 85%">
<div class="absolute inset-0 bg-white/20 animate-pulse"></div>
</div>
</div>
</div>
<!-- Metric 2: Active Clusters -->
<div class="flex-1 p-8 border-b border-zinc-800 hover:bg-zinc-900 transition-colors flex flex-col justify-center" data-anim="fade-up" style="animation-delay: 0.1s;">
<div class="flex justify-between items-end mb-4">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-wider">
Active_Clusters
</span>
<span class="text-[9px] font-mono text-green-500">
OPTIMAL
</span>
</div>
<div class="flex items-baseline gap-2 mb-4">
<span class="text-4xl font-medium text-white tracking-tighter" data-sys-counter="240">
0
</span>
<span class="text-xs text-zinc-600 font-mono uppercase">
Global Zones
</span>
</div>
<div class="flex gap-1 h-3">
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
<div class="flex-1 bg-zinc-800 hover:bg-green-500 transition-colors"></div>
</div>
</div>
<!-- Metric 3: Trust Signals -->
<div class="flex-1 p-8 hover:bg-zinc-900 transition-colors flex flex-col justify-center" data-anim="fade-up" style="animation-delay: 0.2s;">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-wider mb-6">
Verified_Partners
</span>
<div class="grid grid-cols-2 gap-y-6 gap-x-4">
<div class="flex flex-col gap-1 opacity-70 hover:opacity-100 transition-opacity">
<iconify-icon icon="solar:buildings-linear" class="text-zinc-400"></iconify-icon>
<span class="text-[10px] text-zinc-300 font-mono">
Fortune 500
</span>
</div>
<div class="flex flex-col gap-1 opacity-70 hover:opacity-100 transition-opacity">
<iconify-icon icon="solar:server-square-linear" class="text-zinc-400"></iconify-icon>
<span class="text-[10px] text-zinc-300 font-mono">
Cloud Native
</span>
</div>
<div class="flex flex-col gap-1 opacity-70 hover:opacity-100 transition-opacity">
<iconify-icon icon="solar:card-linear" class="text-zinc-400"></iconify-icon>
<span class="text-[10px] text-zinc-300 font-mono">
Fintech
</span>
</div>
<div class="flex flex-col gap-1 opacity-70 hover:opacity-100 transition-opacity">
<iconify-icon icon="solar:shield-user-linear" class="text-zinc-400"></iconify-icon>
<span class="text-[10px] text-zinc-300 font-mono">
Gov/Defense
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="overflow-hidden bg-[#050505] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f879b8e1-cba6-476a-9fea-a4abd7ca2645_3840w.jpg?w=800&q=80)] bg-cover bg-center border-zinc-800 border-b pr-4 pl-4 relative pt-32 md:pt-44 pb-32 md:pb-44" id="access">
<!-- Background Blur Layer -->
<div class="bg-black/90 absolute top-0 right-0 bottom-0 left-0 backdrop-blur-sm" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);"></div>
<!-- Background accents -->
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(234,88,12,0.03)_0%,transparent_70%)] pointer-events-none"></div>
<div class="flex flex-col text-center max-w-7xl z-10 mr-auto ml-auto relative items-center">
<div class="mb-20 max-w-3xl mx-auto w-full px-6">
<div class="text-[10px] uppercase flex text-orange-600 tracking-widest font-mono text-center mb-4 gap-x-2 gap-y-2 items-center justify-center">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// Pricing_Tiers
</div>
<h2 class="text-4xl md:text-5xl lg:text-6xl font-medium text-white uppercase tracking-tight leading-[0.9] mb-6" data-anim="fade-up">
Scale Your
<span class="text-zinc-600">Infrastructure</span>
</h2>
<p class="text-sm text-zinc-500 font-mono leading-relaxed max-w-lg mx-auto">
Enterprise-grade infrastructure pricing. Transparent costs,
auto-scaling capabilities, and zero hidden fees.
</p>
</div>
<!-- Pricing Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 w-full max-w-6xl items-stretch mb-24 px-4 text-left">
<!-- Starter -->
<div class="group relative bg-zinc-900/20 border border-zinc-800 p-8 flex flex-col hover:border-zinc-700 transition-colors rounded-sm" data-anim="fade-up" style="animation-delay: 0s;">
<div class="flex justify-between items-start mb-8">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-widest border border-zinc-800 px-2 py-1 bg-zinc-950">
Level_01
</span>
<iconify-icon icon="solar:code-circle-linear" class="text-zinc-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
<div class="mb-6">
<h3 class="text-base text-white font-medium uppercase tracking-tight mb-2">
Developer
</h3>
<div class="flex items-baseline gap-1">
<span class="text-3xl font-light text-white">$0</span>
<span class="text-[10px] text-zinc-500 font-mono uppercase">
/ mo
</span>
</div>
</div>
<p class="text-[11px] text-zinc-500 font-mono leading-relaxed mb-8 border-b border-zinc-800 pb-8 min-h-[5rem]">
Sandbox environment for integration testing and prototype
development.
</p>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-center gap-3 text-[10px] text-zinc-400 font-mono uppercase">
<iconify-icon icon="solar:check-read-linear" class="text-zinc-600"></iconify-icon>
Shared Compute
</li>
<li class="flex items-center gap-3 text-[10px] text-zinc-400 font-mono uppercase">
<iconify-icon icon="solar:check-read-linear" class="text-zinc-600"></iconify-icon>
Standard API Cap
</li>
</ul>
<button class="w-full py-3 border border-zinc-800 hover:border-white text-zinc-400 hover:text-white text-[10px] uppercase tracking-widest font-mono transition-all bg-transparent">
Start Building
</button>
</div>
<!-- Professional -->
<div class="relative bg-[#080808] border border-zinc-800 p-10 flex flex-col shadow-2xl lg:-mt-6 lg:mb-6 z-10 rounded-sm group hover:border-orange-600/30 transition-colors" data-anim="fade-up" style="animation-delay: 0.1s;">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-orange-600 text-white text-[9px] font-mono uppercase tracking-widest px-4 py-1.5 shadow-[0_0_20px_rgba(234,88,12,0.4)]">
Recommended
</div>
<div class="absolute inset-0 bg-orange-600/5 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="flex justify-between items-start mb-8 relative">
<span class="text-[9px] font-mono text-orange-500 uppercase tracking-widest border border-orange-600/20 px-2 py-1 bg-orange-600/5">
Level_02
</span>
<iconify-icon icon="solar:server-square-bold" class="text-orange-600 text-xl drop-shadow-[0_0_8px_rgba(234,88,12,0.5)]"></iconify-icon>
</div>
<div class="mb-6 relative">
<h3 class="text-lg text-white font-medium uppercase tracking-tight mb-2">
Professional
</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-light text-white">$499</span>
<span class="text-[10px] text-zinc-400 font-mono uppercase">
/ mo
</span>
</div>
</div>
<p class="text-[11px] text-zinc-400 font-mono leading-relaxed mb-8 border-b border-zinc-800 pb-8 relative min-h-[5rem]">
Production-ready infrastructure with guaranteed resource
allocation and SLA.
</p>
<ul class="space-y-4 mb-8 flex-1 relative">
<li class="flex items-center gap-3 text-[10px] text-zinc-300 font-mono uppercase">
<iconify-icon icon="solar:check-read-bold" class="text-orange-600"></iconify-icon>
Dedicated Nodes
</li>
<li class="flex items-center gap-3 text-[10px] text-zinc-300 font-mono uppercase">
<iconify-icon icon="solar:check-read-bold" class="text-orange-600"></iconify-icon>
99.9% Uptime SLA
</li>
</ul>
<button class="w-full py-4 bg-orange-600 hover:bg-orange-500 text-white text-[10px] uppercase tracking-widest font-mono transition-all shadow-[0_0_20px_rgba(234,88,12,0.25)] hover:shadow-[0_0_30px_rgba(234,88,12,0.4)] relative font-medium">
Deploy Now
</button>
</div>
<!-- Enterprise -->
<div class="group relative bg-zinc-900/20 border border-zinc-800 p-8 flex flex-col hover:border-zinc-700 transition-colors rounded-sm" data-anim="fade-up" style="animation-delay: 0.2s;">
<div class="flex justify-between items-start mb-8">
<span class="text-[9px] font-mono text-zinc-500 uppercase tracking-widest border border-zinc-800 px-2 py-1 bg-zinc-950">
Level_03
</span>
<iconify-icon icon="solar:shield-keyhole-linear" class="text-zinc-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
<div class="mb-6">
<h3 class="text-base text-white font-medium uppercase tracking-tight mb-2">
Enterprise
</h3>
<div class="flex items-baseline gap-1">
<span class="text-3xl font-light text-white">Custom</span>
</div>
</div>
<p class="text-[11px] text-zinc-500 font-mono leading-relaxed mb-8 border-b border-zinc-800 pb-8 min-h-[5rem]">
Tailored solutions for mission-critical operations with
specific compliance needs.
</p>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-center gap-3 text-[10px] text-zinc-400 font-mono uppercase">
<iconify-icon icon="solar:check-read-linear" class="text-zinc-600"></iconify-icon>
Custom Compliance
</li>
<li class="flex items-center gap-3 text-[10px] text-zinc-400 font-mono uppercase">
<iconify-icon icon="solar:check-read-linear" class="text-zinc-600"></iconify-icon>
On-Prem / Air-Gapped
</li>
</ul>
<button class="w-full py-3 border border-transparent hover:bg-zinc-800 text-zinc-400 hover:text-white text-[10px] uppercase tracking-widest font-mono transition-all">
Contact Sales
</button>
</div>
</div>
<!-- Trust Strip -->
<div class="w-full max-w-6xl border-t border-zinc-800 bg-zinc-900/20 backdrop-blur-sm rounded-sm" data-anim="fade-up">
<div class="px-8 py-6 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-wrap justify-center md:justify-start gap-8">
<div class="flex items-center gap-2 opacity-60 grayscale hover:grayscale-0 transition-all cursor-default">
<iconify-icon icon="solar:shield-check-bold" class="text-orange-600"></iconify-icon>
<span class="text-[10px] font-mono text-zinc-400 uppercase tracking-wider">
SOC2 Type II
</span>
</div>
<div class="flex items-center gap-2 opacity-60 grayscale hover:grayscale-0 transition-all cursor-default">
<iconify-icon icon="solar:lock-keyhole-bold" class="text-orange-600"></iconify-icon>
<span class="text-[10px] font-mono text-zinc-400 uppercase tracking-wider">
ISO 27001
</span>
</div>
<div class="flex items-center gap-2 opacity-60 grayscale hover:grayscale-0 transition-all cursor-default">
<iconify-icon icon="solar:server-square-bold" class="text-orange-600"></iconify-icon>
<span class="text-[10px] font-mono text-zinc-400 uppercase tracking-wider">
99.99% SLA
</span>
</div>
</div>
<div class="flex items-center gap-3">
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
<span class="text-[10px] font-mono text-zinc-500 uppercase tracking-wide">
Trusted by 500+ Engineering Teams
</span>
</div>
</div>
</div>
</div>
</section>
<section class="md:py-24 overflow-hidden flex flex-col select-none bg-[#050505] w-full border-zinc-800 pt-16 pb-16 relative" style="mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);">
<!-- Background Layers -->
<div class="absolute inset-0 pointer-events-none z-0">
<div class="aura-background-component w-full h-full absolute inset-0">
<div data-us-project="yWZ2Tbe094Fsjgy9NRnD" class="absolute w-full h-full left-0 top-0"></div>
<script type="text/javascript">
!function(){if(window.UnicornStudio){try{window.UnicornStudio.init()}catch(i){}}else{window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head||document.body).appendChild(i)}}();
</script>
</div>
</div>
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:60px_60px] opacity-20 pointer-events-none"></div>
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(234,88,12,0.15)_0%,transparent_50%)] pointer-events-none mix-blend-screen"></div>
<div class="absolute inset-0 z-10 pointer-events-none bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[size:100%_2px,3px_100%] opacity-20"></div>
<!-- Content Container -->
<div class="relative z-20 w-full max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
<!-- Left Column: Status & Info -->
<div class="flex flex-col text-left items-start" data-anim="fade-up">
<!-- Status Pill -->
<div class="mb-8 flex items-center gap-4">
<div class="flex items-center gap-3 px-3 py-1 bg-zinc-900/50 border border-zinc-800 text-[10px] font-mono text-zinc-400 uppercase tracking-widest backdrop-blur-md">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</span>
Ready to Launch
</div>
</div>
<!-- Headline -->
<h2 class="text-4xl md:text-5xl lg:text-6xl text-white tracking-tighter uppercase leading-[0.9] mb-6 font-medium">
System
<span class="text-zinc-600">Ready</span>
</h2>
<!-- Description -->
<p class="text-sm text-zinc-500 font-mono mb-8 max-w-md leading-relaxed border-l-2 border-orange-600/50 pl-6">
<span class="text-orange-600">//</span>
Infrastructure awaiting initialization command. Execute build
sequence to deploy autonomous agents.
</p>
<!-- Compact Stats -->
<div class="flex items-center gap-6 pt-6 border-t border-zinc-800/50 w-full max-w-md">
<div class="flex flex-col">
<span class="text-[9px] font-mono text-zinc-600 uppercase tracking-widest mb-1">
Security
</span>
<span class="text-[10px] font-mono text-green-500">
ENCRYPTED_256
</span>
</div>
<div class="w-px h-6 bg-zinc-800"></div>
<div class="flex flex-col">
<span class="text-[9px] font-mono text-zinc-600 uppercase tracking-widest mb-1">
Latency
</span>
<span class="text-[10px] font-mono text-zinc-400">
0.02ms
</span>
</div>
<div class="w-px h-6 bg-zinc-800"></div>
<div class="flex flex-col">
<span class="text-[9px] font-mono text-zinc-600 uppercase tracking-widest mb-1">
Node
</span>
<span class="text-[10px] font-mono text-orange-600">
US_EAST_4
</span>
</div>
</div>
</div>
<!-- Right Column: Action Module -->
<div class="relative w-full" data-anim="scale-in" data-delay="0.1" style="animation-delay: 0.1s;">
<div class="absolute -inset-1 bg-orange-600/10 rounded-sm blur-xl"></div>
<div class="relative bg-[#080808]/90 border border-zinc-800 backdrop-blur-sm p-6 md:p-8 flex flex-col gap-8 rounded-sm">
<!-- Checklist -->
<div class="space-y-3">
<div class="flex items-center gap-3">
<iconify-icon icon="solar:check-circle-bold" class="text-zinc-700"></iconify-icon>
<span class="text-xs font-mono text-zinc-300">
Create workspace (30s)
</span>
</div>
<div class="flex items-center gap-3">
<iconify-icon icon="solar:check-circle-bold" class="text-zinc-700"></iconify-icon>
<span class="text-xs font-mono text-zinc-300">
Connect repo & deploy agent
</span>
</div>
<div class="flex items-center gap-3">
<iconify-icon icon="solar:check-circle-bold" class="text-zinc-700"></iconify-icon>
<span class="text-xs font-mono text-zinc-300">
Monitor nodes in real-time
</span>
</div>
</div>
<!-- Buttons -->
<div class="flex flex-col gap-3">
<button class="w-full bg-orange-600 hover:bg-orange-500 text-white py-4 text-[10px] font-mono uppercase tracking-widest transition-all shadow-[0_0_20px_rgba(234,88,12,0.2)] hover:shadow-[0_0_30px_rgba(234,88,12,0.4)] flex items-center justify-center gap-2 group/btn font-medium">
Initialize Build
<iconify-icon icon="solar:arrow-right-linear" width="16" class="group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
</button>
<button class="w-full bg-transparent border border-zinc-700 hover:border-white text-zinc-400 hover:text-white py-3 text-[10px] font-mono uppercase tracking-widest transition-all">
Request Demo
</button>
</div>
<!-- Reassurance & Links -->
<div class="flex flex-col gap-4 text-center border-t border-zinc-800 pt-4">
<p class="text-[10px] text-zinc-600 font-mono">
No credit card • Cancel anytime • SOC2-ready
</p>
<div class="flex justify-center gap-4 text-[10px] font-mono text-zinc-500">
<a href="#" class="hover:text-orange-600 transition-colors">
Docs
</a>
<span class="text-zinc-800">/</span>
<a href="#" class="hover:text-orange-600 transition-colors">
Security
</a>
<span class="text-zinc-800">/</span>
<a href="#" class="hover:text-orange-600 transition-colors">
Pricing
</a>
<span class="text-zinc-800">/</span>
<a href="#" class="hover:text-orange-600 transition-colors">
GitHub
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="border-t border-zinc-800 bg-[#050505] text-zinc-500 font-mono relative z-20">
<!-- Overlay Texture -->
<div class="absolute inset-0 bg-[linear-gradient(to_right,#18181b_1px,transparent_1px),linear-gradient(to_bottom,#18181b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none opacity-[0.15]"></div>
<div class="grid grid-cols-1 lg:grid-cols-12 min-h-[360px] relative">
<!-- RIGHT MODULE: CTA (Mobile: Top, Desktop: Right) -->
<div class="order-1 lg:order-3 lg:col-span-3 p-8 flex flex-col justify-between bg-zinc-900/5 border-b lg:border-b-0 lg:border-l border-zinc-800">
<div class="">
<div class="text-[10px] font-mono text-orange-600 uppercase tracking-widest flex items-center gap-2 mb-6">
<span class="w-1.5 h-1.5 bg-orange-600"></span>
// Get_Started
</div>
<h3 class="text-xl text-white font-medium uppercase tracking-tight mb-3">
Start Building
</h3>
<p class="text-xs text-zinc-500 mb-8 leading-relaxed">
Initialize your instance and deploy your first agent in
seconds.
</p>
<button class="w-full py-4 bg-orange-600 hover:bg-orange-500 text-white text-[10px] uppercase tracking-widest font-mono transition-all shadow-[0_0_20px_rgba(234,88,12,0.2)] hover:shadow-[0_0_30px_rgba(234,88,12,0.4)] flex items-center justify-center gap-2 group mb-4 font-medium">
Get API Key
<iconify-icon icon="solar:arrow-right-linear" width="16" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<div class="flex items-center justify-center gap-2 mb-6">
<a href="#" class="text-[10px] uppercase tracking-widest text-zinc-400 hover:text-white border-b border-transparent hover:border-zinc-500 transition-all pb-px">
Book a Demo
</a>
</div>
</div>
<div class="flex items-center justify-center gap-2 text-[9px] uppercase tracking-wider text-zinc-600">
<iconify-icon icon="solar:card-linear" width="12"></iconify-icon>
No credit card • 2 min setup
</div>
</div>
<!-- CENTER MODULES: Sitemap (Mobile: Middle, Desktop: Center) -->
<div class="order-2 lg:order-2 lg:col-span-6 grid grid-cols-2 md:grid-cols-3 border-b lg:border-b-0 lg:border-l border-zinc-800">
<!-- Col 1: Product -->
<div class="p-8 border-r border-zinc-800 border-b md:border-b-0 relative group hover:bg-zinc-900/10 transition-colors">
<div class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-6 border-b border-zinc-800 pb-2">
Product
</div>
<ul class="space-y-3 text-[11px] font-medium tracking-wide">
<li class="">
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
Overview
</a>
</li>
<li>
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
Features
</a>
</li>
</ul>
</div>
<!-- Col 2: Docs -->
<div class="p-8 border-r border-zinc-800 border-b md:border-b-0 relative group hover:bg-zinc-900/10 transition-colors">
<div class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-6 border-b border-zinc-800 pb-2">
Resources
</div>
<ul class="space-y-3 text-[11px] font-medium tracking-wide">
<li class="">
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
Quickstart
</a>
</li>
<li class="">
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
API Reference
</a>
</li>
</ul>
</div>
<!-- Col 3: Company & Legal -->
<div class="p-8 relative group hover:bg-zinc-900/10 transition-colors col-span-2 md:col-span-1">
<div class="mb-8">
<div class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-6 border-b border-zinc-800 pb-2">
Company
</div>
<ul class="space-y-3 text-[11px] font-medium tracking-wide">
<li>
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
About
</a>
</li>
<li>
<a href="#" class="block text-zinc-400 hover:text-white hover:translate-x-1 transition-all flex items-center gap-2">
<span class="w-1 h-px bg-zinc-700"></span>
Blog
</a>
</li>
</ul>
</div>
<div class="">
<div class="text-[10px] font-mono text-zinc-500 uppercase tracking-widest mb-4 border-b border-zinc-800 pb-2">
Legal
</div>
<ul class="space-y-2 text-[10px] font-medium tracking-wide">
<li class="">
<a href="#" class="block text-zinc-500 hover:text-white hover:translate-x-1 transition-all">
Privacy Policy
</a>
</li>
<li>
<a href="#" class="block text-zinc-500 hover:text-white hover:translate-x-1 transition-all">
Terms of Service
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- LEFT MODULE: System Status (Mobile: Bottom, Desktop: Left) -->
<div class="order-3 lg:order-1 lg:col-span-3 flex flex-col lg:border-b-0 bg-zinc-900/5 border-b pt-8 pr-8 pb-8 pl-8 backdrop-blur-sm justify-between">
<div class="">
<!-- Logo -->
<a href="#" class="flex items-center gap-3 mb-10 group w-fit">
<div class="w-8 h-8 bg-zinc-900 border border-zinc-700 flex items-center justify-center text-white group-hover:border-orange-600 transition-colors">
<iconify-icon icon="solar:command-bold" width="16"></iconify-icon>
</div>
<span class="text-sm font-medium text-white tracking-widest uppercase group-hover:text-orange-600 transition-colors">
Axion
<span class="text-zinc-600 group-hover:text-orange-800 transition-colors">
_Sys
</span>
</span>
</a>
<!-- Status Card -->
<div class="border border-zinc-800 bg-[#050505] p-5 relative overflow-hidden group hover:border-zinc-700 transition-colors">
<div class="absolute top-0 left-0 w-0.5 h-full bg-green-500"></div>
<div class="flex justify-between items-start mb-3">
<span class="text-[9px] uppercase tracking-widest text-zinc-500 font-mono">
System_Status
</span>
<div class="relative flex h-2 w-2 mt-1">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
</div>
</div>
<div class="mb-4">
<div class="text-xs text-white font-medium tracking-wide uppercase mb-1">
Operational
</div>
<div class="text-[10px] text-zinc-600 font-mono flex gap-3">
<span>
Uptime:
<span class="text-zinc-400">99.98%</span>
</span>
<span>v4.2.0</span>
</div>
</div>
<div class="flex items-center justify-between border-t border-zinc-800/50 pt-3 mt-2">
<span class="text-[9px] text-zinc-600 font-mono">
Updated: 2m ago
</span>
<a href="#" class="text-[9px] uppercase tracking-wider text-orange-600 hover:text-white transition-colors flex items-center gap-1">
View Status
<iconify-icon icon="solar:arrow-right-linear" width="10"></iconify-icon>
</a>
</div>
</div>
</div>
<!-- Socials / Meta -->
<div class="mt-8 flex gap-4 opacity-60">
<a href="#" class="text-zinc-400 hover:text-white transition-colors">
<iconify-icon icon="simple-icons:github" width="16"></iconify-icon>
</a>
<a href="#" class="text-zinc-400 hover:text-white transition-colors">
<iconify-icon icon="simple-icons:x" width="16"></iconify-icon>
</a>
<a href="#" class="text-zinc-400 hover:text-white transition-colors">
<iconify-icon icon="simple-icons:discord" width="16"></iconify-icon>
</a>
<a href="#" class="text-zinc-400 hover:text-white transition-colors">
<iconify-icon icon="simple-icons:linkedin" width="16"></iconify-icon>
</a>
</div>
</div>
</div>
<!-- Bottom Control Bar -->
<div class="border-t border-zinc-800 bg-[#080808] px-8 py-4 flex flex-col md:flex-row items-center justify-between text-[10px] uppercase tracking-wider text-zinc-600 relative z-20">
<div class="flex flex-col md:flex-row items-center gap-4 md:gap-8 mb-2 md:mb-0">
<span class="cursor-default">© 2024 Axion Inc.</span>
<span class="hidden md:inline w-px h-3 bg-zinc-800"></span>
<div class="flex gap-6">
<a href="#" class="hover:text-white transition-colors">
Privacy
</a>
<a href="#" class="hover:text-white transition-colors">Terms</a>
<a href="#" class="hover:text-white transition-colors">DPA</a>
<a href="#" class="hover:text-white transition-colors">
Subprocessors
</a>
</div>
</div>
<div class="flex items-center gap-6 font-mono">
<div class="flex items-center gap-2">
<iconify-icon icon="solar:clock-circle-linear" width="12"></iconify-icon>
<span>14:32:01 UTC</span>
</div>
<div class="hidden md:block w-px h-3 bg-zinc-800"></div>
<div class="flex items-center gap-2 text-green-900">
<iconify-icon icon="solar:shield-check-linear" width="12"></iconify-icon>
<span class="text-green-600">Secure_Connection</span>
</div>
</div>
</div>
</footer>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("sys-active");
// Counter Animation (smoother + slower)
if (entry.target.hasAttribute("data-sys-counter")) {
const target = parseInt(entry.target.getAttribute("data-sys-counter"));
const suffix = entry.target.getAttribute("data-sys-suffix") || "";
const duration = 2800;
const start = 0;
const startTime = performance.now();
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const ease = 1 - Math.pow(1 - progress, 5);
entry.target.innerText = Math.floor(start + (target - start) * ease) + suffix;
if (progress < 1) requestAnimationFrame(animate);
else entry.target.innerText = target + suffix;
};
requestAnimationFrame(animate);
}
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1, rootMargin: "0px 0px -80px 0px" });
document.querySelectorAll(".sys-reveal, .sys-flicker-anim, [data-sys-counter], .sys-bar-fill").forEach(el => observer.observe(el));
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
if(btn && menu) {
btn.addEventListener('click', () => {
menu.classList.toggle('translate-x-full');
const icon = btn.querySelector('iconify-icon');
if (menu.classList.contains('translate-x-full')) {
icon.setAttribute('icon', 'solar:hamburger-menu-linear');
} else {
icon.setAttribute('icon', 'solar:close-square-linear');
}
});
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', () => { const tBtn = document.getElementById('tablet-menu-btn'); const tMenu = document.getElementById('tablet-menu'); if (tBtn && tMenu) { tBtn.addEventListener('click', (e) => { e.stopPropagation(); const isHidden = tMenu.classList.contains('hidden'); if(isHidden) { tMenu.classList.remove('hidden'); tMenu.classList.add('flex'); tBtn.querySelector('iconify-icon').setAttribute('icon', 'solar:close-square-linear'); } else { tMenu.classList.add('hidden'); tMenu.classList.remove('flex'); tBtn.querySelector('iconify-icon').setAttribute('icon', 'solar:hamburger-menu-linear'); } }); document.addEventListener('click', (e) => { if (!tMenu.classList.contains('hidden') && !tMenu.contains(e.target) && !tBtn.contains(e.target)) { tMenu.classList.add('hidden'); tMenu.classList.remove('flex'); tBtn.querySelector('iconify-icon').setAttribute('icon', 'solar:hamburger-menu-linear'); } }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !tMenu.classList.contains('hidden')) { tMenu.classList.add('hidden'); tMenu.classList.remove('flex'); tBtn.querySelector('iconify-icon').setAttribute('icon', 'solar:hamburger-menu-linear'); } }); } });
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const id = entry.target.id;
document.querySelectorAll('.nav-link').forEach(link => {
const isActive = link.getAttribute('href') === `#${id}`;
link.classList.toggle('border-orange-600', isActive);
link.classList.toggle('text-orange-600', isActive);
link.classList.toggle('bg-zinc-900', isActive);
link.classList.toggle('text-zinc-600', !isActive);
link.classList.toggle('border-zinc-800', !isActive);
});
}
});
}, { rootMargin: '-45% 0px -50% 0px' });
['hero', 'features', 'deployments', 'flow', 'validation', 'access'].forEach(id => {
const el = document.getElementById(id);
if (el) observer.observe(el);
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
return;
}
// Handle stagger groups
document.querySelectorAll('[data-anim="stagger"]').forEach(container => {
const children = Array.from(container.children);
children.forEach((child, i) => {
if (!child.hasAttribute('data-anim')) {
child.setAttribute('data-anim', 'on');
}
// Add incremental delay
const existingDelay = parseFloat(child.dataset.delay || 0);
const staggerDelay = i * 0.1;
child.style.animationDelay = `${existingDelay + staggerDelay}s`;
});
// Prevent container itself from animating/hiding
container.removeAttribute('data-anim');
});
// Handle individual delays
document.querySelectorAll('[data-anim]').forEach(el => {
if (el.dataset.delay && !el.style.animationDelay) {
el.style.animationDelay = `${el.dataset.delay}s`;
}
});
// Initialize Observer
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: "0px 0px -50px 0px" });
document.querySelectorAll("[data-anim]").forEach(el => observer.observe(el));
});
</script>
<!-- Demo Slide-over Panel -->
<div id="demo-panel-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden opacity-0 transition-opacity duration-300" aria-hidden="true"></div>
<div id="demo-panel" role="dialog" aria-modal="true" aria-label="Request a Guided Demo" class="fixed top-0 right-0 h-full w-full md:w-[420px] bg-[#050505] border-l border-zinc-800 z-[70] shadow-2xl transform translate-x-full transition-transform duration-300 flex flex-col font-mono">
<!-- Header -->
<div class="flex items-start justify-between p-6 md:p-8 border-b border-zinc-800 bg-zinc-900/10">
<div>
<h2 class="text-lg text-white font-medium uppercase tracking-tight mb-2">
Request a Guided Demo
</h2>
<p class="text-[10px] text-zinc-500 leading-relaxed">
Architecture, deployments, security posture, and live Q&A.
</p>
</div>
<button id="demo-panel-close" class="text-zinc-500 hover:text-white transition-colors p-1" aria-label="Close panel">
<iconify-icon icon="solar:close-square-linear" width="24"></iconify-icon>
</button>
</div>
<!-- Scrollable Body -->
<div class="flex-1 overflow-y-auto p-6 md:p-8 space-y-6">
<div class="space-y-1">
<label for="demo-name" class="text-[10px] uppercase tracking-widest text-zinc-500">
Full Name
</label>
<input type="text" id="demo-name" class="w-full bg-zinc-900/30 border border-zinc-800 text-zinc-300 text-xs p-3 focus:border-orange-600 focus:bg-zinc-900/80 outline-none transition-colors placeholder:text-zinc-700" placeholder="e.g. Alex Chen">
</div>
<div class="space-y-1">
<label for="demo-email" class="text-[10px] uppercase tracking-widest text-zinc-500">
Work Email
</label>
<input type="email" id="demo-email" class="w-full bg-zinc-900/30 border border-zinc-800 text-zinc-300 text-xs p-3 focus:border-orange-600 focus:bg-zinc-900/80 outline-none transition-colors placeholder:text-zinc-700" placeholder="name@company.com">
</div>
<div class="space-y-1">
<label for="demo-company" class="text-[10px] uppercase tracking-widest text-zinc-500">
Company
</label>
<input type="text" id="demo-company" class="w-full bg-zinc-900/30 border border-zinc-800 text-zinc-300 text-xs p-3 focus:border-orange-600 focus:bg-zinc-900/80 outline-none transition-colors placeholder:text-zinc-700" placeholder="Company Name">
</div>
<div class="space-y-1">
<label for="demo-usecase" class="text-[10px] uppercase tracking-widest text-zinc-500">
Use Case
</label>
<div class="relative">
<select id="demo-usecase" class="w-full bg-zinc-900/30 border border-zinc-800 text-zinc-300 text-xs p-3 appearance-none focus:border-orange-600 focus:bg-zinc-900/80 outline-none transition-colors cursor-pointer">
<option value="" disabled="" selected="">
Select an option...
</option>
<option value="platform">Platform Engineering</option>
<option value="devops">DevOps / SRE</option>
<option value="security">Security / Compliance</option>
<option value="cto">CTO / Evaluation</option>
<option value="other">Other</option>
</select>
<iconify-icon icon="solar:alt-arrow-down-linear" class="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none"></iconify-icon>
</div>
</div>
<div class="space-y-1">
<label for="demo-notes" class="text-[10px] uppercase tracking-widest text-zinc-500">
What are you evaluating?
<span class="text-zinc-700 normal-case tracking-normal">
(Optional)
</span>
</label>
<textarea id="demo-notes" rows="3" class="w-full bg-zinc-900/30 border border-zinc-800 text-zinc-300 text-xs p-3 focus:border-orange-600 focus:bg-zinc-900/80 outline-none transition-colors placeholder:text-zinc-700 resize-none" placeholder="Brief details about your infrastructure..."></textarea>
</div>
</div>
<!-- Footer -->
<div class="p-6 md:p-8 border-t border-zinc-800 bg-zinc-900/5 flex flex-col gap-4">
<button class="w-full py-4 bg-orange-600 hover:bg-orange-500 text-white text-[10px] uppercase tracking-widest font-medium transition-all shadow-[0_0_20px_rgba(234,88,12,0.2)] hover:shadow-[0_0_30px_rgba(234,88,12,0.4)] flex items-center justify-center gap-2 group">
Request Demo
<iconify-icon icon="solar:arrow-right-linear" width="16" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<div class="text-center">
<p class="text-[9px] text-zinc-600 mb-2">
We’ll use this information to respond to your request.
</p>
<a href="#" class="inline-block text-[10px] text-zinc-500 hover:text-white border-b border-transparent hover:border-zinc-500 transition-all uppercase tracking-wider" onclick="closeDemoPanel()">
View Documentation
</a>
</div>
</div>
</div>
<script>
(function() {
const triggers = document.querySelectorAll('[data-demo-trigger]');
const overlay = document.getElementById('demo-panel-overlay');
const panel = document.getElementById('demo-panel');
const closeBtn = document.getElementById('demo-panel-close');
let lastFocusedElement = null;
function openDemoPanel(e) {
if(e) e.preventDefault();
lastFocusedElement = document.activeElement;
overlay.classList.remove('hidden');
// small delay to allow display:block to apply before opacity transition
requestAnimationFrame(() => {
overlay.classList.remove('opacity-0');
panel.classList.remove('translate-x-full');
});
document.body.style.overflow = 'hidden';
// Focus first input
setTimeout(() => {
const firstInput = panel.querySelector('input');
if(firstInput) firstInput.focus();
}, 300);
}
window.closeDemoPanel = function() {
panel.classList.add('translate-x-full');
overlay.classList.add('opacity-0');
setTimeout(() => {
overlay.classList.add('hidden');
document.body.style.overflow = '';
if (lastFocusedElement) lastFocusedElement.focus();
}, 300);
};
triggers.forEach(btn => btn.addEventListener('click', openDemoPanel));
closeBtn.addEventListener('click', closeDemoPanel);
overlay.addEventListener('click', closeDemoPanel);
// ESC key close
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !panel.classList.contains('translate-x-full')) {
closeDemoPanel();
}
});
})();
</script>
</body></html>