| Server IP : 103.243.232.44 / Your IP : 216.73.216.237 Web Server : LiteSpeed System : Linux server17213-10344.hostycare.online 5.14.0-687.38.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Aug 12 17:19:12 EDT 2026 x86_64 User : iamakash ( 1400) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/iamakash/kahom.tech/flowgenix/ |
Upload File : |
<!DOCTYPE html>
<html class="scroll-smooth" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link rel="icon" type="image/png" href="assets/favicon.png"/>
<title>Flowgenix | One Intelligent Platform for Enterprise Transformation</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-panel {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ai-gradient-border {
position: relative;
}
.ai-gradient-border::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #1F5FAE 0%, #F36C5A 100%);
border-radius: 2px 2px 0 0;
}
.dot-grid {
background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
background-size: 20px 20px;
}
.orchestration-line {
stroke-dasharray: 5;
animation: dash 20s linear infinite;
}
@keyframes dash {
to { stroke-dashoffset: -1000; }
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary": "#ffffff",
"on-secondary-container": "#6f0905",
"surface-dim": "#d2d9f4",
"tertiary": "#733700",
"surface-container-lowest": "#ffffff",
"background": "#faf8ff",
"on-background": "#131b2e",
"on-tertiary-fixed-variant": "#723600",
"on-error": "#ffffff",
"surface-container": "#eaedff",
"surface-container-low": "#f2f3ff",
"on-surface-variant": "#424751",
"surface-variant": "#dae2fd",
"surface-subtle": "#E8EDF4",
"surface-container-high": "#e2e7ff",
"secondary-fixed-dim": "#ffb4a8",
"on-error-container": "#93000a",
"inverse-surface": "#283044",
"tertiary-container": "#974a00",
"inverse-on-surface": "#eef0ff",
"border-light": "#E2E8F0",
"surface-container-highest": "#dae2fd",
"on-primary-container": "#c9dbff",
"primary-container": "#1f5fae",
"surface": "#faf8ff",
"on-tertiary-fixed": "#311300",
"on-surface": "#131b2e",
"secondary": "#a93629",
"outline-variant": "#c2c6d3",
"on-secondary-fixed-variant": "#881e14",
"error": "#ba1a1a",
"error-container": "#ffdad6",
"inverse-primary": "#a9c7ff",
"secondary-fixed": "#ffdad5",
"outline": "#727782",
"on-secondary-fixed": "#410000",
"tertiary-fixed": "#ffdcc6",
"on-primary-fixed": "#001b3d",
"surface-bright": "#faf8ff",
"on-primary": "#ffffff",
"on-tertiary": "#ffffff",
"tertiary-fixed-dim": "#ffb786",
"secondary-container": "#fd7361",
"ai-accent": "#0984E3",
"surface-tint": "#1d5ead",
"on-tertiary-container": "#ffd1b4",
"primary-fixed": "#d6e3ff",
"primary": "#00478d",
"primary-fixed-dim": "#a9c7ff",
"on-primary-fixed-variant": "#00468b",
"status-success": "#10B981"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "16px",
"2xl": "20px",
"full": "9999px"
},
"spacing": {
"stack-md": "16px",
"gutter": "24px",
"margin-desktop": "40px",
"stack-sm": "8px",
"margin-mobile": "16px",
"container-max": "1440px",
"stack-lg": "32px"
},
"fontFamily": {
"label-md": ["Inter"],
"display-lg-mobile": ["IBM Plex Sans"],
"body-md": ["Inter"],
"headline-xl": ["IBM Plex Sans"],
"headline-lg": ["IBM Plex Sans"],
"body-sm": ["Inter"],
"display-lg": ["IBM Plex Sans"],
"body-lg": ["Inter"]
},
"fontSize": {
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
"display-lg-mobile": ["36px", {"lineHeight": "44px", "fontWeight": "700"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-xl": ["32px", {"lineHeight": "40px", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}]
}
},
},
}
</script>
</head>
<body class="bg-background font-body-md text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopAppBar -->
<header class="bg-surface/80 backdrop-blur-md sticky top-0 z-50 border-b border-outline-variant/30 shadow-sm transition-all duration-300">
<nav class="max-w-screen-2xl mx-auto px-margin-desktop flex justify-between items-center h-20">
<div class="flex items-center gap-10"><a href="index.html" class="flex items-center"><img src="assets/flowgenix-logo.png" alt="Flowgenix" class="h-9 w-auto"/></a>
<div class="hidden md:flex items-center gap-8">
<a class="text-primary font-bold border-b-2 border-primary pb-1" href="platform.html">Platform</a>
<div class="relative group"><a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 inline-flex items-center gap-1" href="solutions.html">Solutions<span class="material-symbols-outlined text-[18px]">expand_more</span></a><div class="absolute left-0 top-full pt-3 hidden group-hover:block z-50"><div class="bg-white rounded-lg shadow-lg border border-outline-variant/30 py-2 w-52"><a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="solutions.html">Solutions Overview</a>
<a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="adaptive-iam.html">Adaptive IAM</a>
<a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="carbongenie.html">CarbonGenie</a></div></div></div></div>
<a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="industries.html">Industries</a>
<div class="relative group"><a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 inline-flex items-center gap-1" href="company.html">Company<span class="material-symbols-outlined text-[18px]">expand_more</span></a><div class="absolute left-0 top-full pt-3 hidden group-hover:block z-50"><div class="bg-white rounded-lg shadow-lg border border-outline-variant/30 py-2 w-52"><a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="about.html">About Us</a>
<a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="leadership.html">Leadership</a>
<a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="vision.html">Our Vision</a>
<a class="block px-4 py-2.5 text-sm text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors" href="contact.html">Contact</a></div></div></div>
<a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="#">Resources</a>
</div>
<button class="bg-primary-container text-on-primary font-label-md text-label-md px-6 py-2.5 rounded-full hover:bg-secondary-container transition-all scale-100 active:scale-95">
Get Started
</button>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="relative pt-10 pb-16 overflow-hidden dot-grid">
<div class="max-w-container-max mx-auto px-margin-desktop grid lg:grid-cols-2 gap-16 items-center">
<div class="z-10">
<span class="bg-primary-fixed text-on-primary-fixed-variant px-4 py-1.5 rounded-full font-label-md text-label-md mb-6 inline-block">
Enterprise-Ready AI Integration
</span>
<h1 class="font-display-lg text-display-lg text-on-background mb-6 leading-tight">
One Intelligent Platform for <span class="text-primary">Enterprise Transformation</span>.
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 max-w-xl">
Unify your people, applications, and data with an AI-native orchestration layer designed for the complexities of modern enterprise infrastructure.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-white font-label-md text-label-md px-8 py-4 rounded-xl hover:bg-secondary transition-all shadow-lg hover:shadow-xl">
Explore Platform
</button>
<button class="border-2 border-primary text-primary font-label-md text-label-md px-8 py-4 rounded-xl hover:bg-primary/5 transition-all">
View Documentation
</button>
</div>
</div>
<div class="relative h-[600px] lg:h-[700px]">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-full h-full relative">
<!-- Premium Illustration Placeholder -->
<img class="w-full h-full object-contain" data-alt="A sophisticated 3D isometric architectural illustration showing a central glowing hub labeled Flowgenix. Floating nodes representing People, AI Agents, Applications, and Documents are interconnected by pulsing blue and orange light-paths. The background is a clean white minimalist space with subtle grid patterns. High-key lighting and a professional corporate tech aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBp6d04rTOTEKLE81ewGhn7F7FsqV6pDivPdTATNSF5lae5IjBI_rRPFhTRERwH_8FhYOIm2KAp5irBCdD-Y_vSSRANsQOjx3q_zxoJzn9FeSOS9QC1-6qz9O7E-0k422J5_jt5QONiMZe61BgsRXWuFyVYab0upLIzeSLJatxRV7BXBJD3PEUTmB94UfwSJ-1rELbnCfC-XL5kYWn6mDV1B-Yo8ejmx2i9Sa6BKb1QskqSu1isGRIg"/>
<!-- Animated Elements -->
<div class="absolute top-1/4 left-1/4 animate-bounce duration-[3000ms] opacity-80">
<span class="material-symbols-outlined text-secondary text-5xl" data-icon="robot_2" style="font-variation-settings: 'FILL' 1;">robot_2</span>
</div>
<div class="absolute bottom-1/4 right-1/4 animate-pulse duration-[2000ms] opacity-80">
<span class="material-symbols-outlined text-primary text-5xl" data-icon="description" style="font-variation-settings: 'FILL' 1;">description</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Platform Overview Card -->
<section class="py-20 bg-surface">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="bg-white border border-border-light rounded-2xl p-10 lg:p-16 shadow-sm ai-gradient-border">
<div class="grid lg:grid-cols-3 gap-12 items-center">
<div class="lg:col-span-1">
<h2 class="font-headline-xl text-headline-xl text-on-background mb-4">The Architecture of Intelligence</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Flowgenix isn't just another SaaS tool—it's a foundational operating layer for the autonomous enterprise. We believe in high-density integration and low-friction automation.</p>
</div>
<div class="lg:col-span-2 grid md:grid-cols-2 gap-8">
<div class="flex gap-4">
<div class="bg-primary/10 p-3 rounded-lg h-fit">
<span class="material-symbols-outlined text-primary" data-icon="layers">layers</span>
</div>
<div>
<h4 class="font-headline-lg text-headline-lg text-primary mb-2">Multi-Tenant Core</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Built on a secure, high-availability architecture that supports global scale and localized compliance.</p>
</div>
</div>
<div class="flex gap-4">
<div class="bg-secondary/10 p-3 rounded-lg h-fit">
<span class="material-symbols-outlined text-secondary" data-icon="psychology">psychology</span>
</div>
<div>
<h4 class="font-headline-lg text-headline-lg text-secondary mb-2">Agentic Reasoning</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Proprietary AI engines that don't just follow rules, but understand business context and intent.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Navigation Cards (Bento Grid Style) -->
<section class="py-24">
<div class="max-w-container-max mx-auto px-margin-desktop text-center mb-16">
<h2 class="font-display-lg text-display-lg text-on-background mb-4">Explore the Platform</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto">Comprehensive capabilities designed to handle every facet of enterprise automation and management.</p>
</div>
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
<!-- Low-Code Development -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="code_blocks">code_blocks</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Low-Code Development</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Rapidly build complex enterprise applications with drag-and-drop ease.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Process Automation -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="settings_suggest">settings_suggest</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Process Automation</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">End-to-end workflow orchestration across fragmented systems.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- AI & Agentic Automation -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between ai-gradient-border">
<div>
<span class="material-symbols-outlined text-secondary text-4xl mb-6" data-icon="neurology">neurology</span>
<h3 class="font-headline-lg text-headline-lg mb-3">AI & Agentic Automation</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Deploy autonomous agents that learn and adapt to your business needs.</p>
</div>
<span class="material-symbols-outlined text-secondary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Document Management -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="folder_managed">folder_managed</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Document Management</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Intelligent data extraction and lifecycle management for all assets.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Business Rules Engine -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="rule">rule</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Business Rules Engine</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Centralize and manage complex logic independently of your code.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Integration & APIs -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="api">api</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Integration & APIs</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Seamlessly connect to thousands of legacy and cloud-native systems.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Analytics & Monitoring -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="monitoring">monitoring</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Analytics & Monitoring</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Real-time visibility into process health and performance metrics.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
<!-- Security & Governance -->
<div class="group bg-white border border-border-light rounded-xl p-8 hover:shadow-lg transition-all duration-300 flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="admin_panel_settings" style="font-variation-settings: 'FILL' 1;">admin_panel_settings</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Security & Governance</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Enterprise-grade controls, audit logs, and compliance mapping.</p>
</div>
<span class="material-symbols-outlined text-primary mt-8 self-end transition-transform group-hover:translate-x-2" data-icon="arrow_forward">arrow_forward</span>
</div>
</div>
</section>
<!-- Architecture Snapshot -->
<section class="py-24 bg-inverse-surface text-white overflow-hidden">
<div class="max-w-container-max mx-auto px-margin-desktop text-center mb-16">
<h2 class="font-display-lg text-display-lg mb-4">Architecture Snapshot</h2>
<p class="font-body-lg text-body-lg opacity-70">How Flowgenix bridges the gap between your users and core systems.</p>
</div>
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="relative flex flex-col md:flex-row items-center justify-between gap-12 md:gap-4 p-12 border border-white/10 rounded-2xl bg-white/5 backdrop-blur-sm">
<!-- Users -->
<div class="flex flex-col items-center gap-4 z-10 w-full md:w-auto">
<div class="w-20 h-20 rounded-full bg-primary flex items-center justify-center">
<span class="material-symbols-outlined text-4xl" data-icon="group">group</span>
</div>
<span class="font-label-md text-label-md">Users</span>
</div>
<!-- Arrow 1 -->
<div class="hidden md:block flex-1 border-t-2 border-dashed border-white/20 relative">
<span class="material-symbols-outlined absolute right-0 -top-3 text-white/40" data-icon="chevron_right">chevron_right</span>
</div>
<!-- Apps -->
<div class="flex flex-col items-center gap-4 z-10 w-full md:w-auto">
<div class="w-20 h-20 rounded-full bg-secondary flex items-center justify-center">
<span class="material-symbols-outlined text-4xl" data-icon="widgets">widgets</span>
</div>
<span class="font-label-md text-label-md">Modern Apps</span>
</div>
<!-- Arrow 2 -->
<div class="hidden md:block flex-1 border-t-2 border-dashed border-white/20 relative">
<span class="material-symbols-outlined absolute right-0 -top-3 text-white/40" data-icon="chevron_right">chevron_right</span>
</div>
<!-- Flowgenix Core -->
<div class="flex flex-col items-center gap-4 z-10 scale-125 w-full md:w-auto">
<div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center shadow-2xl shadow-primary/40">
<span class="material-symbols-outlined text-5xl" data-icon="hub">hub</span>
</div>
<span class="font-headline-lg text-headline-lg font-bold">Flowgenix</span>
</div>
<!-- Arrow 3 -->
<div class="hidden md:block flex-1 border-t-2 border-dashed border-white/20 relative">
<span class="material-symbols-outlined absolute right-0 -top-3 text-white/40" data-icon="chevron_right">chevron_right</span>
</div>
<!-- Systems -->
<div class="flex flex-col items-center gap-4 z-10 w-full md:w-auto">
<div class="w-20 h-20 rounded-full bg-white/10 flex items-center justify-center">
<span class="material-symbols-outlined text-4xl" data-icon="database">database</span>
</div>
<span class="font-label-md text-label-md">ERP / CRM / HRMS</span>
</div>
</div>
</div>
</section>
<!-- Differentiator Cards -->
<section class="py-24 bg-surface-subtle/30">
<div class="max-w-container-max mx-auto px-margin-desktop grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="p-8">
<span class="material-symbols-outlined text-secondary text-4xl mb-4" data-icon="auto_awesome">auto_awesome</span>
<h3 class="font-headline-lg text-headline-lg mb-3">AI-Native</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Not an afterthought. Intelligence is baked into every node and integration point.</p>
</div>
<div class="p-8">
<span class="material-symbols-outlined text-primary text-4xl mb-4" data-icon="bolt">bolt</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Configuration over Coding</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Minimize technical debt by prioritizing reusable configurations over custom scripts.</p>
</div>
<div class="p-8">
<span class="material-symbols-outlined text-primary text-4xl mb-4" data-icon="library_add_check">library_add_check</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Reusable Accelerators</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Access a library of pre-built modules for common enterprise use cases.</p>
</div>
<div class="p-8">
<span class="material-symbols-outlined text-primary text-4xl mb-4" data-icon="lock">lock</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Enterprise Security</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Zero-trust architecture with end-to-end encryption for every data byte.</p>
</div>
<div class="p-8">
<span class="material-symbols-outlined text-primary text-4xl mb-4" data-icon="cloud_done">cloud_done</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Scalable Cloud</h3>
<p class="font-body-md text-body-md text-on-surface-variant">Hybrid deployment options to meet strict data residency requirements.</p>
</div>
<div class="p-8">
<span class="material-symbols-outlined text-primary text-4xl mb-4" data-icon="cable">cable</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Open Integration</h3>
<p class="font-body-md text-body-md text-on-surface-variant">No vendor lock-in. Our APIs are built for extensibility and standard protocols.</p>
</div>
</div>
</section>
<!-- Product Cards -->
<section class="py-24">
<div class="max-w-container-max mx-auto px-margin-desktop text-center mb-16">
<h2 class="font-display-lg text-display-lg text-on-background mb-4">The Flowgenix Suite</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">Powerful specialized tools built on our unified platform core.</p>
</div>
<div class="max-w-container-max mx-auto px-margin-desktop grid md:grid-cols-2 gap-gutter">
<!-- CarbonGenie -->
<div class="group overflow-hidden rounded-2xl border border-border-light bg-white shadow-sm flex flex-col md:flex-row">
<div class="md:w-1/2 overflow-hidden h-64 md:h-auto">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A clean UI interface for a sustainability tracking dashboard. It shows bar charts in shades of green and blue, titled 'Carbon Emission Trends'. The design is minimal, high-contrast, and professional, perfectly fitting a light-mode corporate tech environment." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCLoUGXXtFjJatuHyQFzrSp7bcM8-ujTmedhkc7W72FMxFMD6YuqMHiXyPV85Yxi4wjsPQmMrQfUV4m40qlALBCAviXrNSjMWT6ZqgjFJdfpvrxOM6p6Gmt4ZLw-T7Pd3LMupSVynCOXBdWRAyGy-2Hq_Bvb58fYKjunGXn6rlH05oH8o6_W4kFdYcCC9YK-zcrS6ONN_pZVEhtzAYpmtcFP3m1U60K6EVrE2UFKLsc0Ip06Dtx7lFv"/>
</div>
<div class="md:w-1/2 p-8 flex flex-col justify-between">
<div>
<h3 class="font-headline-xl text-headline-xl mb-4 text-primary">CarbonGenie</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6">AI-driven sustainability tracking and reporting for ESG compliance and carbon reduction.</p>
</div>
<button class="text-primary font-label-md text-label-md flex items-center gap-2 group-hover:underline">Learn More <span class="material-symbols-outlined text-sm" data-icon="arrow_outward">arrow_outward</span></button>
</div>
</div>
<!-- Adaptive IAM -->
<div class="group overflow-hidden rounded-2xl border border-border-light bg-white shadow-sm flex flex-col md:flex-row">
<div class="md:w-1/2 overflow-hidden h-64 md:h-auto">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A secure login and identity management interface with a biometric fingerprint icon glowing in deep blue. The screen shows real-time user activity logs in a small sidebar. The aesthetic is clean, medical-grade precision with soft shadows and high-key lighting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuALpI8W3LWSdDRtXYG4tqIWfyhiB-mX7JJAi8AMBOLnoXFSj3IBZjXEiWkqBoMeUfupqwEtHsaEGF_kCES8UazViPsPHdDZMb5B5lnlq7vZfSgcWGpFnuiXJwiU2AR6dNKL72Te5MfdQwBTib4P8TOef4PO85v9mKMPs3woL_FMUs7msgyFWp84rKOfSo80XVCUwUUOYZ3LF6ayNdVUqh7lXnrgwGTPsAHmeesqSnqpYKTbXusdtllK"/>
</div>
<div class="md:w-1/2 p-8 flex flex-col justify-between">
<div>
<h3 class="font-headline-xl text-headline-xl mb-4 text-primary">Adaptive IAM</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6">Dynamic identity and access management that evolves based on behavior and threat intel.</p>
</div>
<button class="text-primary font-label-md text-label-md flex items-center gap-2 group-hover:underline">Learn More <span class="material-symbols-outlined text-sm" data-icon="arrow_outward">arrow_outward</span></button>
</div>
</div>
<!-- Enterprise Automation -->
<div class="group overflow-hidden rounded-2xl border border-border-light bg-white shadow-sm flex flex-col md:flex-row">
<div class="md:w-1/2 overflow-hidden h-64 md:h-auto">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A workflow orchestration canvas showing connected nodes representing different departments like Finance, HR, and Sales. The interface is light and airy, with subtle blue connection lines and modern icons. The focus is on clarity and the feeling of seamless operational flow." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCGh5k7DeU6YyE5291ET6TyKjIb3NtxFfGJacYOQcqrDq5PlWIcpUOhMVyyQs7l0977Q-0vNAo-bg2TXUN8yQDBzJMRngnoV5GbesUSb9Lne_xKr6I6mL-wGd1TqjB9xpUl6E-w9zhWhr_cxAh4wXjICnADX0OLa5B-ScTJnjBS1myaBGBdNZ52gWyC-wDhaESp7C3bj6B_woGlk5ILjEvNvl47nV-GGmMOIhPh5tKl_hX3DHVrVN1q"/>
</div>
<div class="md:w-1/2 p-8 flex flex-col justify-between">
<div>
<h3 class="font-headline-xl text-headline-xl mb-4 text-primary">Enterprise Automation</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6">High-volume transaction processing and robotic process automation with cognitive capabilities.</p>
</div>
<button class="text-primary font-label-md text-label-md flex items-center gap-2 group-hover:underline">Learn More <span class="material-symbols-outlined text-sm" data-icon="arrow_outward">arrow_outward</span></button>
</div>
</div>
<!-- AI Factory -->
<div class="group overflow-hidden rounded-2xl border border-border-light bg-white shadow-sm flex flex-col md:flex-row">
<div class="md:w-1/2 overflow-hidden h-64 md:h-auto">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A neural network visualization with nodes represented as small glowing spheres connected by fine white lines. The background is a very soft light grey gradient. The lighting is diffused and professional, suggesting deep learning and advanced data science." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgKp3e3MgpSBXAx7qL_rgMAMb7PQdw8HLwA_yBbsN1yiU3yY_bcK1VC5aoo-wVFOUGl12AqAfVzlrLvtzkkjz9JTbW1WHl-1MhtKmlanREEupDaHP2zB52Gv571kaBERoaTWCYjWcieZxuJySlvTmJpU3uq6ireYDYVzcyS6a_YbfbqaQTYECl8jZxLIS9suYi4oh-8oOsZv9QIg7XdHCpuqFcroILfedmqiF_A3uSCIyrhKU6WA5I"/>
</div>
<div class="md:w-1/2 p-8 flex flex-col justify-between">
<div>
<h3 class="font-headline-xl text-headline-xl mb-4 text-secondary">AI Factory</h3>
<p class="font-body-md text-body-md text-on-surface-variant mb-6">The workshop for building, training, and deploying custom enterprise LLMs and agents at scale.</p>
</div>
<button class="text-secondary font-label-md text-label-md flex items-center gap-2 group-hover:underline">Learn More <span class="material-symbols-outlined text-sm" data-icon="arrow_outward">arrow_outward</span></button>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 bg-inverse-surface relative overflow-hidden">
<div class="absolute inset-0 opacity-10">
<div class="dot-grid w-full h-full"></div>
</div>
<div class="max-w-container-max mx-auto px-margin-desktop text-center relative z-10">
<h2 class="font-display-lg text-display-lg text-white mb-6">Start Building on Flowgenix</h2>
<p class="font-body-lg text-body-lg text-white/70 max-w-2xl mx-auto mb-12">Join hundreds of global enterprises who are already orchestrating their future on Flowgenix.</p>
<div class="flex flex-wrap justify-center gap-6">
<button class="bg-secondary-container text-on-secondary font-label-md text-label-md px-10 py-5 rounded-xl hover:bg-secondary transition-all shadow-2xl">
Request Demo
</button>
<button class="bg-white/10 text-white border border-white/20 font-label-md text-label-md px-10 py-5 rounded-xl hover:bg-white/20 transition-all backdrop-blur-md">
Explore Platform
</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-inverse-surface full-width py-16 border-t border-outline-variant/10">
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-gutter">
<div class="col-span-2 space-y-6">
<a href="index.html" class="inline-flex items-center"><img src="assets/flowgenix-logo-white.png" alt="Flowgenix" class="h-8 w-auto"/></a>
<p class="text-surface-variant/70 text-body-sm max-w-xs">Orchestrating the future of enterprise intelligence with AI-first automation and adaptive security.</p>
<div class="flex gap-4">
<a class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors" href="#"><span class="material-symbols-outlined text-lg">public</span></a>
<a class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-primary transition-colors" href="#"><span class="material-symbols-outlined text-lg">share</span></a>
</div>
</div>
<div class="space-y-4">
<h5 class="text-surface font-bold font-label-md text-label-md uppercase tracking-wider">Solutions</h5>
<nav class="flex flex-col gap-3">
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="solutions.html">Solutions Overview</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="industries.html">Industries</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="adaptive-iam.html">Adaptive IAM</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="carbongenie.html">CarbonGenie</a>
</nav>
</div>
<div class="space-y-4">
<h5 class="text-surface font-bold font-label-md text-label-md uppercase tracking-wider">Company</h5>
<nav class="flex flex-col gap-3">
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="about.html">About Us</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="leadership.html">Leadership</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="vision.html">Our Vision</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="contact.html">Contact</a>
</nav>
</div>
<div class="space-y-4">
<h5 class="text-surface font-bold font-label-md text-label-md uppercase tracking-wider">Resources</h5>
<nav class="flex flex-col gap-3">
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">Documentation</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">API Reference</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">Case Studies</a>
</nav>
</div>
<div class="space-y-4">
<h5 class="text-surface font-bold font-label-md text-label-md uppercase tracking-wider">Legal</h5>
<nav class="flex flex-col gap-3">
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">Privacy Policy</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">Terms of Service</a>
<a class="text-surface-variant/70 hover:text-surface transition-colors text-label-md" href="#">Cookies</a>
</nav>
</div>
<div class="col-span-2 lg:col-span-6 mt-8 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-surface-variant/70 text-body-sm">© 2026 Flowgenix AI. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Micro-interaction for scroll effects
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 20) {
header.classList.add('py-2', 'shadow-md');
header.classList.remove('h-20');
} else {
header.classList.remove('py-2', 'shadow-md');
header.classList.add('h-20');
}
});
</script>
</body></html>