| 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 | Build. Automate. Orchestrate. Intelligently.</title>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&family=Inter:wght@400;600&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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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;
}
.hero-pattern {
background-image: radial-gradient(circle at 2px 2px, #E2E8F0 1px, transparent 0);
background-size: 24px 24px;
}
.glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}
.gradient-border-top {
position: relative;
}
.gradient-border-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #1f5fae, #fd7361);
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body-md selection:bg-primary/20">
<!-- TopAppBar -->
<header class="bg-surface/80 dark:bg-inverse-surface/80 backdrop-blur-md docked full-width top-0 sticky z-50 border-b border-outline-variant/30 dark:border-outline/20 shadow-sm dark:shadow-none">
<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>
<nav class="hidden md:flex 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>
<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>
</nav></div>
<div class="flex items-center gap-4">
<button class="px-6 py-2 bg-primary text-on-primary rounded-lg font-semibold hover:bg-secondary-container transition-all scale-95 active:scale-90">Get Started</button>
</div>
</div>
</header>
<main>
<!-- Section 1: Hero -->
<section class="relative min-h-[560px] flex items-center py-14 overflow-hidden hero-pattern">
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative z-10">
<div class="space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-primary/10 text-primary rounded-full border border-primary/20">
<span class="material-symbols-outlined text-sm" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
<span class="font-label-md text-label-md">Next-Gen Orchestration</span>
</div>
<h1 class="font-display-lg text-display-lg text-on-surface leading-tight">
Build. Automate.<br/> Orchestrate. <span class="text-primary">Intelligently.</span>
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
An AI-first orchestration platform designed for the complex enterprise. Connect legacy systems, modern apps, and agentic AI into seamless high-performance workflows.
</p>
<div class="flex flex-wrap gap-4">
<button class="px-8 py-4 bg-primary text-white rounded-xl font-bold shadow-lg shadow-primary/20 hover:bg-[#154b8b] transition-all flex items-center gap-2">
Request Demo
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
</button>
<button class="px-8 py-4 bg-white border border-border-light text-primary rounded-xl font-bold hover:bg-surface-subtle transition-all">
Explore Platform
</button>
</div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-primary/5 blur-3xl rounded-full"></div>
<img class="relative z-10 w-full drop-shadow-2xl rounded-2xl" data-alt="A sophisticated 3D isometric illustration of a digital node network connecting stylized human figures, cloud application icons like CRM and ERP, and a glowing central AI brain. The visual style is enterprise-modern with clean white backgrounds, translucent glass panels, and professional blue and orange accent lines reflecting a high-performance SaaS aesthetic. The lighting is soft and ambient, emphasizing connectivity and technical precision." src="https://lh3.googleusercontent.com/aida-public/AB6AXuArjivxWd7xdd4iPY7GwNslb4hz3xPIGyLR2FoLbZ6QG8LtwM01Pa8ZSEp20fixuIOt_KetEOmO2tV8W3HGpVxvMtvf5Uk_vW2T20Yxbl-JIjSoIHZIzvGkc2S1E9P7wT3MWld0GQW_ilkbotphGH_y19kajFFq7vl9ej0qnWBcIzvJSEPfrK0fqEmVywMmy68k_RWMIrkeQ__smJPlz4wTdoR_yqt5rtX4xMtKQHzVrpdqD8O3P5Ci"/>
</div>
</div>
</section>
<!-- Section 2: Core Capabilities -->
<section class="py-stack-lg 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 mb-4">The Engine of Modern Operations</h2>
<p class="text-on-surface-variant max-w-2xl mx-auto">Core capabilities designed for extreme scalability and intelligent decisioning at every step.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
<!-- Low-Code -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="developer_mode">developer_mode</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Low-Code Canvas</h3>
<p class="text-on-surface-variant">Visual drag-and-drop orchestration for rapid development without sacrificing technical depth.</p>
</div>
<!-- Workflow -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Workflow Automation</h3>
<p class="text-on-surface-variant">Complex state management and long-running processes orchestrated with millisecond precision.</p>
</div>
<!-- AI/Agentic -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group gradient-border-top">
<div class="w-12 h-12 rounded-lg bg-secondary-container/10 flex items-center justify-center text-secondary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">AI & Agentic Logic</h3>
<p class="text-on-surface-variant">Embed generative AI and autonomous agents directly into your operational logic gates.</p>
</div>
<!-- Document Mgmt -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="description">description</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Document Intelligence</h3>
<p class="text-on-surface-variant">Advanced OCR and unstructured data processing to turn documents into actionable data streams.</p>
</div>
<!-- Integration -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="integration_instructions">integration_instructions</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Deep Integration</h3>
<p class="text-on-surface-variant">Pre-built connectors for SAP, Oracle, Salesforce, and legacy mainframe protocols.</p>
</div>
<!-- Analytics -->
<div class="p-8 rounded-[20px] border border-border-light bg-white hover:shadow-xl transition-all group">
<div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-6 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined" data-icon="analytics">analytics</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Process Mining</h3>
<p class="text-on-surface-variant">Real-time visibility into bottlenecks and automated suggestions for optimization.</p>
</div>
</div>
</div>
</section>
<!-- Section 3: Architecture -->
<section class="py-stack-lg bg-surface-container-lowest">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="flex flex-col lg:flex-row items-center gap-16">
<div class="lg:w-1/2">
<h2 class="font-headline-xl text-headline-xl mb-6">The Architecture of Flow</h2>
<p class="text-on-surface-variant text-lg mb-8">Flowgenix sits at the heart of your ecosystem, acting as the intelligent fabric that bridges users, modern applications, and core systems of record.</p>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary mt-1" data-icon="check_circle">check_circle</span>
<div>
<span class="font-bold">Unified Data Layer</span>
<p class="text-body-sm text-on-surface-variant">Synchronize data across disparate silos without duplication.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary mt-1" data-icon="check_circle">check_circle</span>
<div>
<span class="font-bold">Event-Driven Execution</span>
<p class="text-body-sm text-on-surface-variant">Trigger actions based on real-time business events across any system.</p>
</div>
</li>
</ul>
</div>
<div class="lg:w-1/2 p-8 bg-white border border-border-light rounded-3xl shadow-2xl relative">
<div class="grid grid-cols-4 gap-4 items-center">
<!-- Mock Visualization -->
<div class="col-span-1 space-y-4">
<div class="p-3 bg-surface border rounded-lg text-center font-label-md text-label-md">Users</div>
<div class="p-3 bg-surface border rounded-lg text-center font-label-md text-label-md">Apps</div>
</div>
<div class="col-span-2 flex justify-center">
<div class="w-32 h-32 bg-primary rounded-full flex items-center justify-center text-white ring-8 ring-primary/10">
<span class="material-symbols-outlined text-5xl" data-icon="hub">hub</span>
</div>
</div>
<div class="col-span-1 space-y-4">
<div class="p-3 bg-surface border rounded-lg text-center font-label-md text-label-md">ERP</div>
<div class="p-3 bg-surface border rounded-lg text-center font-label-md text-label-md">CRM</div>
<div class="p-3 bg-surface border rounded-lg text-center font-label-md text-label-md">HRMS</div>
</div>
</div>
<div class="mt-8 text-center text-primary font-bold">Flowgenix Orchestrator</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Solutions -->
<section class="py-stack-lg">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="font-headline-xl text-headline-xl">Industry Solutions</h2>
<p class="text-on-surface-variant">Ready-to-deploy accelerators for high-impact use cases.</p>
</div>
<button class="text-primary font-bold flex items-center gap-1 hover:underline">View All Solutions <span class="material-symbols-outlined" data-icon="chevron_right">chevron_right</span></button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
<!-- Solution 1 -->
<div class="bg-white rounded-2xl border border-border-light overflow-hidden group">
<div class="h-40 bg-surface-container relative">
<div class="absolute inset-0 flex items-center justify-center text-primary/20">
<span class="material-symbols-outlined text-7xl" data-icon="eco">eco</span>
</div>
</div>
<div class="p-6">
<span class="text-[10px] font-bold tracking-widest uppercase text-secondary mb-2 block">Sustainability</span>
<h4 class="font-bold text-lg mb-2">CarbonGenie</h4>
<p class="text-body-sm text-on-surface-variant mb-4">Automated carbon footprint tracking and regulatory reporting.</p>
<a class="text-primary font-semibold text-sm group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" href="#">Learn More <span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span></a>
</div>
</div>
<!-- Solution 2 -->
<div class="bg-white rounded-2xl border border-border-light overflow-hidden group">
<div class="h-40 bg-surface-container relative">
<div class="absolute inset-0 flex items-center justify-center text-primary/20">
<span class="material-symbols-outlined text-7xl" data-icon="security">security</span>
</div>
</div>
<div class="p-6">
<span class="text-[10px] font-bold tracking-widest uppercase text-secondary mb-2 block">Cybersecurity</span>
<h4 class="font-bold text-lg mb-2">Adaptive IAM</h4>
<p class="text-body-sm text-on-surface-variant mb-4">Dynamic identity access management with AI threat detection.</p>
<a class="text-primary font-semibold text-sm group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" href="#">Learn More <span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span></a>
</div>
</div>
<!-- Solution 3 -->
<div class="bg-white rounded-2xl border border-border-light overflow-hidden group">
<div class="h-40 bg-surface-container relative">
<div class="absolute inset-0 flex items-center justify-center text-primary/20">
<span class="material-symbols-outlined text-7xl" data-icon="payments">payments</span>
</div>
</div>
<div class="p-6">
<span class="text-[10px] font-bold tracking-widest uppercase text-secondary mb-2 block">FinTech</span>
<h4 class="font-bold text-lg mb-2">Loan Origination</h4>
<p class="text-body-sm text-on-surface-variant mb-4">End-to-end automated loan processing and underwriting.</p>
<a class="text-primary font-semibold text-sm group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" href="#">Learn More <span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span></a>
</div>
</div>
<!-- Solution 4 -->
<div class="bg-white rounded-2xl border border-border-light overflow-hidden group">
<div class="h-40 bg-surface-container relative">
<div class="absolute inset-0 flex items-center justify-center text-primary/20">
<span class="material-symbols-outlined text-7xl" data-icon="corporate_fare">corporate_fare</span>
</div>
</div>
<div class="p-6">
<span class="text-[10px] font-bold tracking-widest uppercase text-secondary mb-2 block">Operations</span>
<h4 class="font-bold text-lg mb-2">Enterprise Automation</h4>
<p class="text-body-sm text-on-surface-variant mb-4">Standardized back-office processes for global shared services.</p>
<a class="text-primary font-semibold text-sm group-hover:translate-x-1 transition-transform inline-flex items-center gap-1" href="#">Learn More <span class="material-symbols-outlined text-xs" data-icon="arrow_forward">arrow_forward</span></a>
</div>
</div>
</div>
</div>
</section>
<!-- Section 5: Industries (Bento Style) -->
<section class="py-stack-lg bg-surface-dim">
<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">Purpose-Built for Your Sector</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="account_balance">account_balance</span>
<div class="font-bold text-sm">Banking</div>
</div>
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="finance">finance</span>
<div class="font-bold text-sm">Finance</div>
</div>
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="verified_user">verified_user</span>
<div class="font-bold text-sm">Insurance</div>
</div>
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="gavel">gavel</span>
<div class="font-bold text-sm">Government</div>
</div>
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="precision_manufacturing">precision_manufacturing</span>
<div class="font-bold text-sm">Manufacturing</div>
</div>
<div class="bg-white p-6 rounded-2xl border border-border-light text-center hover:-translate-y-1 transition-all shadow-sm">
<span class="material-symbols-outlined text-primary mb-2" data-icon="medical_services">medical_services</span>
<div class="font-bold text-sm">Healthcare</div>
</div>
</div>
</div>
</section>
<!-- Section 6: Why Flowgenix -->
<section class="py-stack-lg">
<div class="max-w-container-max mx-auto px-margin-desktop grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-6 bg-primary text-white rounded-3xl space-y-4">
<span class="material-symbols-outlined text-4xl" data-icon="bolt">bolt</span>
<h4 class="font-bold text-xl">AI-First Design</h4>
<p class="text-sm opacity-90">Engineered from the ground up to support LLM reasoning and agentic autonomous decision making.</p>
</div>
<div class="p-6 bg-white border border-border-light rounded-3xl space-y-4">
<span class="material-symbols-outlined text-4xl text-primary" data-icon="extension">extension</span>
<h4 class="font-bold text-xl">Accelerators</h4>
<p class="text-sm text-on-surface-variant">Library of reusable workflow patterns and pre-configured nodes for fast time-to-value.</p>
</div>
<div class="p-6 bg-white border border-border-light rounded-3xl space-y-4">
<span class="material-symbols-outlined text-4xl text-primary" data-icon="rocket_launch">rocket_launch</span>
<h4 class="font-bold text-xl">Rapid Deployment</h4>
<p class="text-sm text-on-surface-variant">Proprietary deployment methodology that cuts development cycles by 60%.</p>
</div>
<div class="p-6 bg-inverse-surface text-white rounded-3xl space-y-4">
<span class="material-symbols-outlined text-4xl text-ai-accent" data-icon="security">security</span>
<h4 class="font-bold text-xl">Enterprise Ready</h4>
<p class="text-sm opacity-90">SOC2, HIPAA, and GDPR compliant with air-gapped deployment options for high-security sectors.</p>
</div>
</div>
<div>
<h2 class="font-headline-xl text-headline-xl mb-6">Why Global Leaders Choose Flowgenix</h2>
<p class="text-lg text-on-surface-variant mb-8">We don't just provide software; we provide the foundation for an autonomous enterprise. Our platform is built for architects who think ahead.</p>
<div class="p-8 border-l-4 border-primary bg-primary/5 rounded-r-2xl">
<p class="italic text-lg mb-4 text-on-surface">"Flowgenix reduced our processing time for insurance claims from 4 days to 4 minutes. It's the most impactful ROI we've seen in a decade."</p>
<div class="font-bold">Chief Information Officer</div>
<div class="text-sm text-on-surface-variant">Global Insurance Group</div>
</div>
</div>
</div>
</section>
<!-- Section 7: Resources -->
<section class="py-stack-lg bg-surface-container-low">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl text-center mb-12">Expert Insights</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div class="bg-white p-1 rounded-3xl border border-border-light">
<div class="h-48 bg-cover bg-center rounded-t-[22px]" data-alt="A clean, minimalist workspace with a sleek laptop displaying a high-tech dashboard. Beside the laptop is a neatly designed professional brochure for Flowgenix software. The scene is bright and airy with soft focus on a green indoor plant in the background, conveying a sense of organized, professional productivity." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBBnAvTfTWto4Sh3E1tsUI99zqDJGyCZRHi27tVJVdM1yONwZNDlpPydwbfQB6UhXtH9iGGJetrSbbQbi7LL39KyHE-7S9NyDWXXLONZ0pPbdoHJ0T28kT5MMMmb0aLVN_LxIGA2Lwo9uq-_Bj9eYgOsa-czbZexvvWV8pgYarRQeDx_rYe5aV_XN3dPmmr47qyuUJuhySI0pXSRxIfdG9GwRaPAN8O-S3yo3EnjfOEnkBOCfp86mXo')"></div>
<div class="p-6">
<h4 class="font-bold text-lg mb-2">Platform Brochure</h4>
<p class="text-sm text-on-surface-variant mb-4">A comprehensive guide to Flowgenix features and enterprise benefits.</p>
<a class="text-primary font-bold inline-flex items-center gap-2" href="#">Download PDF <span class="material-symbols-outlined text-sm" data-icon="download">download</span></a>
</div>
</div>
<div class="bg-white p-1 rounded-3xl border border-border-light">
<div class="h-48 bg-cover bg-center rounded-t-[22px]" data-alt="A close-up of a high-resolution tablet screen showing complex technical documentation and API code snippets. The lighting is cool-toned with highlights of blue, emphasizing a technical and developer-friendly environment. Minimalist architectural lines suggest a high-end corporate setting." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAba3UcHIpb7uOIpSBM7pRo6R3FUZdww_0ERlOIYZ0us2Mb0Sjg4bXw2hR8fgHyp6Io0NKGgDQzyV7aNqJ3VAuc9deuncp_DT6wT6q9Chm7sJ-cGY_o75ckzFvYhsV2zYP2YxKD2Md0Pt54y5DUKW35F5FMRaXIe5nHy9f5trDgKNFnNS9f0iwi9NyUm4aJXjMYYMAjTLwe8FGRVGmTbq9Qa_3wu6gad6VoqzZtYJEDGsg13GC-pBuf')"></div>
<div class="p-6">
<h4 class="font-bold text-lg mb-2">Developer Docs</h4>
<p class="text-sm text-on-surface-variant mb-4">Deep dive into our SDKs, APIs, and low-code orchestration nodes.</p>
<a class="text-primary font-bold inline-flex items-center gap-2" href="#">Explore Docs <span class="material-symbols-outlined text-sm" data-icon="open_in_new">open_in_new</span></a>
</div>
</div>
<div class="bg-white p-1 rounded-3xl border border-border-light">
<div class="h-48 bg-cover bg-center rounded-t-[22px]" data-alt="A professional conference room with glass walls reflecting city lights. A large screen displays success metrics and growth charts. The image represents the successful outcomes of enterprise case studies, with a focus on data-driven results and professional achievement." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAaYnUzTpzYGqkLb0GsZZR-kKhqkIZC7QBBN7cXeCkE9DpLKCn2BMgNVas0U5-H5EG-7PgsXWRfPok3gdHXSPH8m1lkJ-cf5SAb8EaxQ_m59RAW2fXy_l_xvPq0Io_Wzoz82KcWn4ECbydkg7aEE8X_fASoSmoEmMWRQJYPd9XL6z2j0GRZZJZaba1629NeRAsoKqmXOCvrC5bOSQS2xo6wFnuLeR4TC9PYb1hOmfz4JCNIfTJD8G35')"></div>
<div class="p-6">
<h4 class="font-bold text-lg mb-2">Case Studies</h4>
<p class="text-sm text-on-surface-variant mb-4">How Fortune 500 companies are using Flowgenix to scale.</p>
<a class="text-primary font-bold inline-flex items-center gap-2" href="#">Read Stories <span class="material-symbols-outlined text-sm" data-icon="article">article</span></a>
</div>
</div>
</div>
</div>
</section>
<!-- Section 8: Final CTA -->
<section class="py-24 relative overflow-hidden bg-primary">
<div class="absolute inset-0 opacity-10">
<div class="absolute top-0 left-0 w-full h-full hero-pattern"></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-8">Accelerate Enterprise Transformation</h2>
<p class="text-white/80 text-lg max-w-2xl mx-auto mb-10">Join 150+ global enterprises building the future of autonomous operations today.</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="px-10 py-5 bg-secondary-container text-white rounded-xl font-black text-lg hover:scale-105 transition-transform shadow-xl">Get Started Now</button>
<button class="px-10 py-5 bg-white/10 border border-white/20 text-white rounded-xl font-bold text-lg hover:bg-white/20 transition-all">Talk to Sales</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-interactions and scroll effects
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('opacity-100', 'translate-y-0');
entry.target.classList.remove('opacity-0', 'translate-y-10');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('section > div').forEach(el => {
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-10');
observer.observe(el);
});
});
</script>
</body></html>