| 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 | Solutions Overview</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Sans:wght@600;700&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"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-secondary-fixed": "#410000",
"surface": "#faf8ff",
"on-tertiary-container": "#ffd1b4",
"primary-container": "#1f5fae",
"secondary-fixed": "#ffdad5",
"tertiary-fixed-dim": "#ffb786",
"surface-dim": "#d2d9f4",
"surface-container-highest": "#dae2fd",
"inverse-on-surface": "#eef0ff",
"surface-container-low": "#f2f3ff",
"surface-container": "#eaedff",
"secondary-container": "#fd7361",
"error-container": "#ffdad6",
"surface-subtle": "#E8EDF4",
"outline-variant": "#c2c6d3",
"ai-accent": "#0984E3",
"on-secondary": "#ffffff",
"surface-bright": "#faf8ff",
"error": "#ba1a1a",
"on-tertiary-fixed": "#311300",
"status-success": "#10B981",
"on-secondary-container": "#6f0905",
"on-primary-fixed-variant": "#00468b",
"on-primary-fixed": "#001b3d",
"outline": "#727782",
"primary": "#00478d",
"background": "#faf8ff",
"tertiary-container": "#974a00",
"on-tertiary": "#ffffff",
"surface-container-lowest": "#ffffff",
"tertiary": "#733700",
"surface-container-high": "#e2e7ff",
"inverse-primary": "#a9c7ff",
"surface-tint": "#1d5ead",
"on-error-container": "#93000a",
"on-surface": "#131b2e",
"primary-fixed-dim": "#a9c7ff",
"on-tertiary-fixed-variant": "#723600",
"on-primary": "#ffffff",
"surface-variant": "#dae2fd",
"on-error": "#ffffff",
"secondary-fixed-dim": "#ffb4a8",
"on-surface-variant": "#424751",
"on-secondary-fixed-variant": "#881e14",
"inverse-surface": "#283044",
"secondary": "#a93629",
"on-background": "#131b2e",
"on-primary-container": "#c9dbff",
"primary-fixed": "#d6e3ff",
"border-light": "#E2E8F0",
"tertiary-fixed": "#ffdcc6"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"container-max": "1440px",
"stack-md": "16px",
"margin-mobile": "16px",
"stack-lg": "32px",
"stack-sm": "8px",
"gutter": "24px",
"margin-desktop": "40px"
},
"fontFamily": {
"display-lg-mobile": ["IBM Plex Sans"],
"headline-xl": ["IBM Plex Sans"],
"body-lg": ["Inter"],
"display-lg": ["IBM Plex Sans"],
"headline-lg": ["IBM Plex Sans"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"label-md": ["Inter"]
},
"fontSize": {
"display-lg-mobile": ["36px", {"lineHeight": "44px", "fontWeight": "700"}],
"headline-xl": ["32px", {"lineHeight": "40px", "fontWeight": "700"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ai-glow {
box-shadow: 0 0 20px rgba(31, 95, 174, 0.15);
}
.workflow-dot-bg {
background-image: radial-gradient(#E2E8F0 1px, transparent 1px);
background-size: 20px 20px;
}
.premium-gradient-border {
position: relative;
}
.premium-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;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body-md overflow-x-hidden">
<!-- TopAppBar -->
<nav class="bg-surface/80 backdrop-blur-md text-primary docked full-width top-0 sticky z-50 border-b border-outline-variant/30 shadow-sm">
<div 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-on-surface-variant font-medium hover:text-primary transition-colors duration-200" href="platform.html">Platform</a>
<div class="relative group"><a class="text-primary font-bold border-b-2 border-primary pb-1 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 px-6 py-2 rounded-lg font-label-md text-label-md hover:bg-secondary-container transition-all scale-95 active:scale-90">
Get Started
</button>
</div>
</nav>
<!-- Hero Section -->
<header class="relative overflow-hidden pt-20 pb-32">
<div class="max-w-container-max mx-auto px-margin-desktop relative z-10 text-center">
<div class="inline-flex items-center gap-2 bg-surface-container-highest px-4 py-1.5 rounded-full mb-8">
<span class="material-symbols-outlined text-primary text-sm">auto_awesome</span>
<span class="font-label-md text-label-md text-primary tracking-wider uppercase">Future-Proof Enterprise</span>
</div>
<h1 class="font-display-lg text-display-lg text-on-surface mb-6 max-w-4xl mx-auto">Enterprise Solutions Built on the Flowgenix Platform</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10">Accelerate your digital transformation with high-performance orchestration. Turn complex legacy infrastructure into a streamlined machine-human engine.</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="bg-[#1F5FAE] text-white px-8 py-4 rounded-lg font-semibold hover:bg-[#F36C5A] transition-all shadow-lg">View Platform Specs</button>
<button class="border border-[#1F5FAE] text-[#1F5FAE] px-8 py-4 rounded-lg font-semibold hover:bg-primary/5 transition-all">Request Demo</button>
</div>
</div>
</header>
<!-- Why Choose Flowgenix (4 Cards) -->
<section class="py-24 workflow-dot-bg">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="text-center mb-16">
<h2 class="font-headline-xl text-headline-xl mb-4">Precision Engineering for Business Speed</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Why leading architects choose Flowgenix for their core orchestration.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
<!-- Card 1 -->
<div class="bg-white border border-outline-variant p-8 rounded-xl shadow-sm hover:shadow-md transition-all">
<span class="material-symbols-outlined text-primary text-4xl mb-6">rocket_launch</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Rapid Deployment</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Go from concept to production in weeks, not months, using our visual orchestration interface.</p>
</div>
<!-- Card 2 -->
<div class="bg-white border border-outline-variant p-8 rounded-xl shadow-sm hover:shadow-md transition-all">
<span class="material-symbols-outlined text-primary text-4xl mb-6">bolt</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Pre-built Accelerators</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Leverage thousands of ready-to-use nodes for ERP, CRM, and cloud infrastructure connections.</p>
</div>
<!-- Card 3 -->
<div class="bg-white border border-outline-variant p-8 rounded-xl shadow-sm hover:shadow-md transition-all">
<span class="material-symbols-outlined text-primary text-4xl mb-6">domain</span>
<h3 class="font-headline-lg text-headline-lg mb-3">Enterprise Ready</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Built-in governance, multi-tenancy, and high-availability clusters for mission-critical loads.</p>
</div>
<!-- Card 4 -->
<div class="bg-white border border-outline-variant p-8 rounded-xl shadow-sm hover:shadow-md transition-all">
<span class="material-symbols-outlined text-primary text-4xl mb-6">psychology</span>
<h3 class="font-headline-lg text-headline-lg mb-3">AI-First</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Native LLM integration and semantic logic routing built into the core of every workflow.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio (6 Cards) -->
<section class="py-24 bg-surface-container-low">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl mb-12 border-l-4 border-primary pl-6">Core Portfolio Solutions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Solution 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A clean, minimalist 3D rendering of interconnected blue glass spheres representing intelligent automation workflows. The background is a crisp white gallery setting with soft shadows and a professional corporate aesthetic in shades of blue and orange." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEIjR6ZxAull-8sD3iqSfFXLnANOzZPsooeG7Ba7Z5MYnfTdo5AuJtG3GPtsw_0u-YhClQmfsXcwYXV9xKT-RQD9hQ-eHBiNlKf7uRMlZy75t2RsgR-n8FJ6bDKU7B3Xwnyx99oS51b7tLSYQgK7CbmJ9eCo4ctKcKLSE6JUNXgywtAZna1O6uOgwtBWppD1-T4LmAid9knucqiou0pD6PkbF9ZU-S3S_RUhnraKawCQm3C-wz5tIU"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">Automation Hub</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">End-to-end process orchestration across disparate legacy and modern systems.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">40% Efficiency Gain</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
<!-- Solution 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A futuristic digital security portal illustration with layers of transparent holographic shields in deep corporate blue. Soft orange accent lights indicate active verification points. Minimalist, high-tech, and secure atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB34jUh7kRw8MzFQAEoR4IWa7PVwVbePAjK-8uzLVZl8EE0to2gBd8s2Hz7UZWGeBJbOdhZd8k-1NFwTizMhL6j5J2J38MNmiY9CR9eYjOUC-Z_VpvJ4ELCyGmmORWbUmZg8RiFNB-gJ4TTyQR-xFFEAZgVcUkx67sfmnD31xyl-xBV7iYKtz_i1iSk-wvLesBZpw7F3ODL8kxtLNrYd15Ij4R4AKmEthRYagj8yCNcxWvtiwwoIeKO"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">IAM Forge</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Next-gen Identity and Access Management with zero-trust architecture defaults.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">Zero-Trust Ready</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
<!-- Solution 3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A sophisticated data visualization dashboard showing environmental impact metrics with green and blue data lines on a clean white background. High-quality 3D charts and minimalist icons represent sustainable energy and carbon tracking." src="https://lh3.googleusercontent.com/aida-public/AB6AXuChg2fzaRlxQQU1WOmtE4eHe2-CPXNjpmRZb--aK1u9qEMgQcWFIEHGeNNG4FyiuRD1P6nddKQyCjz0Tc9BN0pqeVzCb0Z9t3SyiKnY2Ri9pl7fl0p3GRUOZGzJ8dwShv0yMcwrckGGeVmY8mhdrRQXNp6XyjfPuQdTrpFuJ4j64a6wAG7ysfhqrrrUPebq5STyWx8uTSQCqM3M8-c5u6y4wK8UE3OjhMUa6VSjenDSthbQVXi6vXW5"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">CarbonGenie</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Real-time ESG tracking and carbon footprint orchestration for global supply chains.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">Compliance Guaranteed</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
<!-- Solution 4 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A minimalist bank architectural concept with clean lines and digital data streams flowing through transparent pillars. The color palette is professional blue with hints of gold and white, conveying trust and modern financial efficiency." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2htv2YoWsXnfhYPg9I9_mhvhXuDo51QAakQednT8oGVQ_7M2t0qLStcklX8enDskD7vdzPeYTrrVoPLlV1aL5sNXR9CrE0FOBTij75BYZGqEGdnQCztatAKUMGhdVoR-5HcPghqy2v4K18BYboHsCi2rDN-3j-8aWZBlQ-XFEYlJcyzcrJO4UGrP21dBjiaO_lrgO2HNxzJJCUnqzWu6P2oD5_S3hwVeoWX5C0EYCRRoui4PoMLD9"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">Loan Origination</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">AI-powered credit decisioning and loan lifecycle management for modern banking.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">85% Faster Closing</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
<!-- Solution 5 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Close-up of a digital tablet scanning paper documents, converting them into glowing data particles. Modern office setting with high-key lighting and a professional blue and white theme. Precise, high-tech document processing." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBatSKeku9hgfC0LqaaWZnfm-n8A3BvymtmTF2ar8C0i-atCWNfwLkbx6m7_8dTFXsxoI4unyxXXhCdssfaqelWl-X3iMgeqWUZdga5_5Ama5xi7KkWAtpRlRnCQ4hdkinhBPl3XreIhfOF_HrdQx5xmPF35TMmUu5oq8GOE1O8dIcKKDVP9q69vFlh7b7Rxnt_wFB1ObX0odt_amFd_f4i1Lnh-d61AWM5Ub7PZt8HREoKIsuk4Evz"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">IDP Engine</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Intelligent Document Processing that understands context and extracts structured data.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">99.9% Data Accuracy</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
<!-- Solution 6 -->
<div class="bg-white rounded-xl overflow-hidden shadow-sm premium-gradient-border group">
<div class="h-48 overflow-hidden">
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="An abstract visualization of a neural network factory. Flowing lines of light connect geometric nodes in a bright, futuristic industrial space. Corporate blue gradients and subtle orange accents create a sophisticated AI engineering look." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCIyq7KcF2MoZCKIPEpKmHlBEK78mi74q50DtdjOXdqVdvE_uZ36z6n3z-hbYIkgyDXhklQFTo5s-bsfiiqBnuPPArrLP76qgdmL10Dq_kFkwZBL969ucSkYYcL_tReD3t5qHD7YZu-6UKoquCZUcnonGd98RsriEHqDpRvslFLisr_MAdP8zwtWzNZeEUo0qxINXgf7j5J8K7DVLhbq4vlCsRuIIrPStNEAzmbPhzeAGMUwPPQ9vGl"/>
</div>
<div class="p-8">
<h4 class="font-headline-lg text-headline-lg mb-2">AI Factory</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-6">Scale LLM and generative models across your enterprise with built-in safety rails.</p>
<div class="flex items-center justify-between">
<span class="font-label-md text-label-md text-primary font-bold">Scalable Inference</span>
<span class="material-symbols-outlined text-on-surface-variant">arrow_forward</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Category Tiles -->
<section class="py-24 bg-white">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="text-center mb-16">
<h2 class="font-headline-xl text-headline-xl">Browse by Business Category</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">transform</span>
<span class="font-label-md text-label-md font-semibold">Transformation</span>
</button>
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">gavel</span>
<span class="font-label-md text-label-md font-semibold">Compliance</span>
</button>
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">eco</span>
<span class="font-label-md text-label-md font-semibold">ESG</span>
</button>
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">security</span>
<span class="font-label-md text-label-md font-semibold">Security</span>
</button>
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">account_balance</span>
<span class="font-label-md text-label-md font-semibold">Banking</span>
</button>
<button class="flex flex-col items-center justify-center p-6 border border-outline-variant rounded-lg hover:border-primary hover:bg-surface-container-highest transition-all group">
<span class="material-symbols-outlined text-3xl mb-3 text-on-surface-variant group-hover:text-primary">settings_suggest</span>
<span class="font-label-md text-label-md font-semibold">Operations</span>
</button>
</div>
</div>
</section>
<!-- Horizontal Process Section -->
<section class="py-24 bg-surface-container overflow-hidden">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl mb-16 text-center">Our Implementation Roadmap</h2>
<div class="relative">
<!-- Progress Line -->
<div class="absolute top-1/2 left-0 w-full h-0.5 bg-outline-variant/30 -translate-y-1/2 hidden lg:block"></div>
<div class="grid grid-cols-1 md:grid-cols-5 gap-8 relative z-10">
<div class="flex flex-col items-center text-center group">
<div class="w-16 h-16 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all shadow-md">
<span class="material-symbols-outlined">search</span>
</div>
<h4 class="font-headline-lg text-headline-lg mb-2">Discover</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Identify core friction points in your current workflows.</p>
</div>
<div class="flex flex-col items-center text-center group">
<div class="w-16 h-16 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all shadow-md">
<span class="material-symbols-outlined">tune</span>
</div>
<h4 class="font-headline-lg text-headline-lg mb-2">Configure</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Tailor pre-built accelerators to your specific logic.</p>
</div>
<div class="flex flex-col items-center text-center group">
<div class="w-16 h-16 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all shadow-md">
<span class="material-symbols-outlined">rocket</span>
</div>
<h4 class="font-headline-lg text-headline-lg mb-2">Deploy</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Launch with confidence in a sandboxed staging environment.</p>
</div>
<div class="flex flex-col items-center text-center group">
<div class="w-16 h-16 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all shadow-md">
<span class="material-symbols-outlined">hub</span>
</div>
<h4 class="font-headline-lg text-headline-lg mb-2">Integrate</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Sync seamlessly with your global enterprise tech stack.</p>
</div>
<div class="flex flex-col items-center text-center group">
<div class="w-16 h-16 rounded-full bg-white border-2 border-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all shadow-md">
<span class="material-symbols-outlined">trending_up</span>
</div>
<h4 class="font-headline-lg text-headline-lg mb-2">Scale</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Monitor, optimize, and expand across business units.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Comparison Table -->
<section class="py-24 bg-white">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl mb-12 text-center">Why Flowgenix Wins</h2>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-highest">
<th class="p-6 font-headline-lg text-headline-lg">Feature</th>
<th class="p-6 font-headline-lg text-headline-lg text-on-surface-variant">Traditional SaaS</th>
<th class="p-6 font-headline-lg text-headline-lg text-primary">Flowgenix Platform</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/30">
<tr>
<td class="p-6 font-body-md font-bold">Implementation Time</td>
<td class="p-6 text-on-surface-variant">6 - 18 Months</td>
<td class="p-6 font-semibold text-primary">4 - 8 Weeks</td>
</tr>
<tr>
<td class="p-6 font-body-md font-bold">AI Integration</td>
<td class="p-6 text-on-surface-variant">Third-party add-ons required</td>
<td class="p-6 font-semibold text-primary">Native Core Semantic Layer</td>
</tr>
<tr>
<td class="p-6 font-body-md font-bold">Maintenance</td>
<td class="p-6 text-on-surface-variant">High technical debt per update</td>
<td class="p-6 font-semibold text-primary">Self-healing orchestration</td>
</tr>
<tr>
<td class="p-6 font-body-md font-bold">Governance</td>
<td class="p-6 text-on-surface-variant">Fragmented manual checks</td>
<td class="p-6 font-semibold text-primary">Automated Policy Enforcement</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 relative overflow-hidden bg-primary text-white">
<div class="absolute inset-0 opacity-10 workflow-dot-bg"></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 mb-6">Deliver Enterprise Outcomes Faster</h2>
<p class="font-body-lg text-body-lg text-white/80 max-w-2xl mx-auto mb-10">Join 400+ Global 2000 enterprises who trust Flowgenix to power their mission-critical logic.</p>
<div class="flex justify-center gap-6">
<button class="bg-[#F36C5A] text-white px-10 py-4 rounded-lg font-bold text-lg hover:shadow-xl transition-all scale-100 hover:scale-105 active:scale-95">Speak with an Architect</button>
<button class="bg-white/10 backdrop-blur-md border border-white/30 text-white px-10 py-4 rounded-lg font-bold text-lg hover:bg-white/20 transition-all">Download Platform Whitepaper</button>
</div>
</div>
</section>
<!-- 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 category tiles
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('mouseenter', () => {
btn.style.transform = 'translateY(-4px)';
});
btn.addEventListener('mouseleave', () => {
btn.style.transform = 'translateY(0)';
});
});
</script>
</body></html>