| 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="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Integration & APIs | Connect any system | Flowgenix</title>
<meta name="description" content="Pre-built connectors, API management, event-driven integration and legacy modernization — connect core banking, ERP, CRM and cloud with zero-trust security."/>
<link rel="icon" type="image/png" href="assets/flowgenix-icon.png"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"error":"#ba1a1a","secondary-fixed":"#d3e4ff","on-tertiary-fixed":"#001f25",
"inverse-surface":"#283044","secondary-container":"#3f9eff","on-primary-fixed-variant":"#003bb0",
"on-surface":"#131b2e","on-secondary-fixed-variant":"#004881","surface-tint":"#2d55c9",
"on-primary":"#ffffff","inverse-on-surface":"#eef0ff","ai-cyan":"#00E0FF",
"surface-subtle":"#F8FAFC","surface":"#faf8ff","outline":"#747685","on-secondary-container":"#00345f",
"tertiary-fixed-dim":"#00daf8","error-container":"#ffdad6","on-error-container":"#93000a",
"primary-fixed":"#dce1ff","primary":"#00287f","on-tertiary-fixed-variant":"#004e5a",
"secondary-fixed-dim":"#a2c9ff","primary-fixed-dim":"#b6c4ff","surface-bright":"#faf8ff",
"on-tertiary-container":"#00c8e3","tertiary-container":"#004f5b","tertiary":"#00373f",
"border-low":"#E2E8F0","energy-orange":"#FF6210","surface-variant":"#dae2fd",
"on-error":"#ffffff","surface-container-low":"#f2f3ff","surface-container":"#eaedff",
"outline-variant":"#c4c5d6","surface-container-high":"#e2e7ff","on-background":"#131b2e",
"on-tertiary":"#ffffff","on-secondary":"#ffffff","surface-dim":"#d2d9f4",
"on-surface-variant":"#434653","on-primary-fixed":"#00164f","primary-container":"#003bb1",
"on-secondary-fixed":"#001c38","secondary":"#0060a9","background":"#faf8ff",
"inverse-primary":"#b6c4ff","on-primary-container":"#9eb2ff","tertiary-fixed":"#a5eeff",
"surface-container-lowest":"#ffffff","surface-container-highest":"#dae2fd"
},
borderRadius: { "DEFAULT":"0.25rem","xl":"12px","2xl":"1rem","full":"9999px" },
spacing: { "margin-desktop":"40px","margin-mobile":"16px","stack-lg":"32px",
"base":"4px","gutter":"24px","stack-sm":"8px","stack-md":"16px" },
fontFamily: {
"headline-sm":["Hanken Grotesk"],"display-lg":["Hanken Grotesk"],"body-md":["Inter"],
"headline-lg-mobile":["Hanken Grotesk"],"headline-lg":["Hanken Grotesk"],
"headline-md":["Hanken Grotesk"],"body-lg":["Inter"],"body-sm":["Inter"],"label-md":["JetBrains Mono"]
},
fontSize: {
"display-lg":["64px",{lineHeight:"72px",letterSpacing:"-0.02em"}],
"headline-lg":["40px",{lineHeight:"48px",letterSpacing:"-0.01em"}],
"headline-md":["32px",{lineHeight:"40px"}],
"headline-sm":["24px",{lineHeight:"32px"}],
"body-lg":["18px",{lineHeight:"28px"}],"body-md":["16px",{lineHeight:"24px"}],
"body-sm":["14px",{lineHeight:"20px"}],"label-md":["12px",{lineHeight:"16px"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
html { scroll-behavior:smooth; }
.glass-card { background:rgba(255,255,255,0.7); backdrop-filter:blur(12px); border:1px solid rgba(226,232,240,0.5); }
.hero-gradient { background:radial-gradient(circle at top right,rgba(0,59,177,0.05),transparent),radial-gradient(circle at bottom left,rgba(0,224,255,0.05),transparent); }
.ai-glow { box-shadow:0 0 40px -10px rgba(0,224,255,0.2); animation:pulse-glow 3s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 40px -10px rgba(0,224,255,0.2);} 50%{box-shadow:0 0 60px -5px rgba(0,224,255,0.4);} }
.bento-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s ease-out,transform 0.8s ease-out; }
.reveal.active { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .reveal{opacity:1;transform:none;transition:none;} .ai-glow{animation:none;} html{scroll-behavior:auto;} }
.interactive-card { --x:50%; --y:50%; position:relative; overflow:hidden; transition:transform 0.2s ease-out; }
.interactive-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--x) var(--y),rgba(0,224,255,0.1) 0%,transparent 50%); pointer-events:none; opacity:0; transition:opacity 0.3s; }
.interactive-card:hover::before { opacity:1; }
nav.scrolled { padding-top:0.5rem; padding-bottom:0.5rem; background-color:rgba(250,248,255,0.92); }
.shimmer-ai { position:relative; }
.shimmer-ai::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent); transform:translateX(-100%); animation:shimmer 4s infinite; }
@keyframes shimmer { 100%{transform:translateX(100%);} }
.stagger-1{transition-delay:100ms;} .stagger-2{transition-delay:200ms;} .stagger-3{transition-delay:300ms;} .stagger-4{transition-delay:400ms;} .stagger-5{transition-delay:500ms;} .stagger-6{transition-delay:600ms;}
.nav-link { font-weight:600; color:#434653; transition:color 0.2s; }
.nav-link:hover { color:#00287f; }
.nav-link.active-page { color:#00287f; border-bottom:2px solid #00287f; padding-bottom:2px; }
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu { opacity:0; visibility:hidden; transform:translateY(8px); transition:all 0.2s ease-out; }
#mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
#mobile-menu.open { max-height:640px; }
</style>
</head>
<body class="bg-background text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed font-body-md overflow-x-hidden">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-surface/80 backdrop-blur-md border-b border-outline-variant/30 shadow-sm transition-all duration-300 py-4" id="main-nav">
<div class="flex justify-between items-center px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
<div class="flex items-center gap-8">
<a href="index.html" class="flex items-center shrink-0"><img alt="Flowgenix" class="h-8" src="assets/flowgenix-logo.png"/></a>
<div class="hidden lg:flex items-center gap-7 text-body-sm">
<a class="nav-link active-page" href="platform.html">Platform</a>
<div class="dropdown relative">
<a class="nav-link flex items-center gap-1" href="products.html">Products <span class="material-symbols-outlined text-base">expand_more</span></a>
<div class="dropdown-menu absolute top-full left-0 pt-3 w-72">
<div class="bg-surface-container-lowest rounded-xl border border-border-low shadow-xl p-2">
<a href="carbongenie.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">eco</span><span><span class="block font-semibold text-on-surface">CarbonGenie</span><span class="block text-label-md font-label-md text-on-surface-variant">ESG & carbon automation</span></span></a>
<a href="adaptive-iam.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">shield_lock</span><span><span class="block font-semibold text-on-surface">Adaptive IAM</span><span class="block text-label-md font-label-md text-on-surface-variant">Identity & access management</span></span></a>
<a href="e-frm.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">frame_inspect</span><span><span class="block font-semibold text-on-surface">E-FRM Suite</span><span class="block text-label-md font-label-md text-on-surface-variant">Fraud risk management</span></span></a>
<a href="ai-factory.html" class="flex items-start gap-3 p-3 rounded-lg hover:bg-surface-container-low transition-colors"><span class="material-symbols-outlined text-primary mt-0.5">smart_toy</span><span><span class="block font-semibold text-on-surface">AI Factory Library</span><span class="block text-label-md font-label-md text-on-surface-variant">Agents & document intelligence</span></span></a>
</div>
</div>
</div>
<a class="nav-link" href="industries.html">Industries</a>
<a class="nav-link" href="about.html">Company</a>
</div>
</div>
<div class="flex items-center gap-3">
<a href="contact.html" class="hidden sm:inline-flex bg-primary-container text-on-primary px-6 py-2.5 rounded-lg font-bold shadow-md hover:scale-[1.02] active:scale-[0.98] transition-all">Request a demo</a>
<button id="mobile-toggle" class="lg:hidden w-10 h-10 flex items-center justify-center rounded-lg hover:bg-surface-container-low" aria-label="Menu"><span class="material-symbols-outlined">menu</span></button>
</div>
</div>
<div id="mobile-menu" class="lg:hidden bg-surface border-t border-outline-variant/20">
<div class="px-margin-mobile py-4 flex flex-col gap-1">
<a class="py-2.5 font-semibold text-on-surface" href="platform.html">Platform</a>
<a class="py-2.5 font-semibold text-on-surface" href="products.html">Products</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="carbongenie.html">— CarbonGenie</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="adaptive-iam.html">— Adaptive IAM</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="e-frm.html">— E-FRM Suite</a>
<a class="py-1 pl-4 text-body-sm text-on-surface-variant" href="ai-factory.html">— AI Factory Library</a>
<a class="py-2.5 font-semibold text-on-surface" href="industries.html">Industries</a>
<a class="py-2.5 font-semibold text-on-surface" href="about.html">Company</a>
<a class="mt-3 bg-primary-container text-on-primary px-6 py-3 rounded-lg font-bold text-center" href="contact.html">Request a demo</a>
</div>
</div>
</nav>
<main class="pt-24">
<!-- Hero Section -->
<section class="relative overflow-hidden py-24 md:py-32">
<div class="max-w-7xl mx-auto px-margin-desktop grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="z-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-secondary-container/20 text-secondary border border-secondary-container mb-6">
<span class="material-symbols-outlined text-[18px]">hub</span>
<span class="text-label-md font-bold tracking-wider uppercase">Unified Intelligence</span>
</div>
<h1 class="font-display-lg text-display-lg text-on-surface leading-tight mb-6">
The Intelligent <br/><span class="text-primary">Orchestration Layer.</span>
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl mb-10">
Connect your entire enterprise ecosystem with zero-trust security. Bridge legacy infrastructure with modern AI agents in a single, high-performance fabric.
</p>
<div class="flex flex-wrap gap-4">
<button class="px-8 py-4 bg-primary text-on-primary rounded-lg font-bold flex items-center gap-2 hover:shadow-lg transition-all">
Explore API Engine <span class="material-symbols-outlined">arrow_forward</span>
</button>
<button class="px-8 py-4 bg-surface border border-outline text-on-surface rounded-lg font-bold hover:bg-surface-container-low transition-all">
Documentation
</button>
</div>
<div class="mt-12 flex items-center gap-8 grayscale opacity-60">
<div class="h-6" role="img" aria-label="A clean, minimalist logo of SAP reimagined in a professional tech style, monochrome and sharp, for a corporate integration page." style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
<div class="h-6" role="img" aria-label="A clean, minimalist logo of Salesforce reimagined in a professional tech style, monochrome and sharp, for a corporate integration page." style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
<div class="h-6" role="img" aria-label="A clean, minimalist logo of AWS reimagined in a professional tech style, monochrome and sharp, for a corporate integration page." style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
<div class="h-6" role="img" aria-label="A clean, minimalist logo of Microsoft Azure reimagined in a professional tech style, monochrome and sharp, for a corporate integration page." style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
</div>
</div>
<div class="relative">
<!-- Complex Technical Diagram Placeholder -->
<div class="bg-surface-container-lowest border border-outline-variant p-8 rounded-xl shadow-2xl relative">
<div class="absolute inset-0 opacity-20 overflow-hidden pointer-events-none">
<svg class="flow-line" height="100%" width="100%">
<path d="M0 50 Q 250 50 500 250 T 1000 450" fill="none" stroke="#00287f" stroke-width="1"></path>
<path d="M0 450 Q 250 450 500 250 T 1000 50" fill="none" stroke="#00E0FF" stroke-width="1"></path>
</svg>
</div>
<div class="grid grid-cols-3 gap-4 relative z-10">
<div class="col-start-2 flex justify-center">
<div class="w-32 h-32 bg-primary rounded-2xl flex items-center justify-center shadow-xl ring-8 ring-primary/10">
<span class="material-symbols-outlined text-white text-5xl" style="font-variation-settings: 'FILL' 1;">account_tree</span>
</div>
</div>
<div class="col-start-1 row-start-2 flex flex-col gap-4">
<div class="p-4 bg-surface-subtle border border-outline-variant rounded-lg flex items-center gap-3">
<span class="material-symbols-outlined text-secondary">database</span>
<span class="font-label-md">Legacy ERP</span>
</div>
<div class="p-4 bg-surface-subtle border border-outline-variant rounded-lg flex items-center gap-3">
<span class="material-symbols-outlined text-secondary">cloud</span>
<span class="font-label-md">SaaS Apps</span>
</div>
</div>
<div class="col-start-3 row-start-2 flex flex-col gap-4">
<div class="p-4 bg-surface-subtle border border-outline-variant rounded-lg flex items-center gap-3">
<span class="material-symbols-outlined text-ai-cyan">smart_toy</span>
<span class="font-label-md">AI Agents</span>
</div>
<div class="p-4 bg-surface-subtle border border-outline-variant rounded-lg flex items-center gap-3">
<span class="material-symbols-outlined text-ai-cyan">terminal</span>
<span class="font-label-md">Serverless</span>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-outline-variant flex justify-between text-label-md text-on-surface-variant">
<div class="flex items-center gap-2"><span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> Engine Active</div>
<div class="font-mono">LATENCY: 12.4ms</div>
</div>
</div>
</div>
</div>
</section>
<!-- Capabilities Section (Bento Grid) -->
<section class="py-24 bg-surface-container-low/30">
<div class="max-w-7xl mx-auto px-margin-desktop">
<div class="mb-16 text-center max-w-3xl mx-auto">
<h2 class="font-headline-lg text-headline-lg mb-4">Enterprise Capabilities</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">Engineered for massive scale and critical reliability, Flowgenix handles the complexities of modern orchestration so you can focus on building.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
<!-- Pre-built Connectors -->
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant p-stack-lg rounded-xl flex flex-col md:flex-row gap-8 items-center overflow-hidden hover:shadow-md transition-all">
<div class="flex-1">
<h3 class="font-headline-sm text-headline-sm mb-3">Pre-built Connectors</h3>
<p class="text-on-surface-variant mb-6">Access 250+ enterprise-grade adapters for everything from SAP mainframes to modern OpenAI endpoints. Deploy in minutes, not months.</p>
<button class="text-primary font-bold flex items-center gap-2 hover:underline">
Browse Library <span class="material-symbols-outlined">open_in_new</span>
</button>
</div>
<div class="w-full md:w-1/2 flex justify-center">
<div class="w-48 h-48 object-contain" role="img" aria-label="FlowGenix Server" style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
</div>
</div>
<!-- API Management -->
<div class="md:col-span-4 bg-primary text-on-primary p-stack-lg rounded-xl flex flex-col justify-between hover:shadow-xl transition-all">
<div>
<span class="material-symbols-outlined text-4xl mb-4" style="font-variation-settings: 'FILL' 1;">security</span>
<h3 class="font-headline-sm text-headline-sm mb-3">API Management</h3>
<p class="text-primary-fixed/80">Full lifecycle management with rate limiting, advanced caching, and automated documentation.</p>
</div>
<div class="mt-8 font-mono text-[10px] bg-primary-container p-4 rounded border border-white/10 opacity-70">
GET /v1/orchestrate<br/>
Authorization: Bearer ****<br/>
{ "status": "active" }
</div>
</div>
<!-- Event-driven -->
<div class="md:col-span-4 bg-surface-container-lowest border border-outline-variant p-stack-lg rounded-xl hover:shadow-md transition-all">
<div class="w-12 h-12 rounded-lg bg-tertiary-container/10 flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-tertiary-container">sensors</span>
</div>
<h3 class="font-headline-sm text-headline-sm mb-3">Event-driven Architecture</h3>
<p class="text-on-surface-variant">Real-time asynchronous messaging for reactive systems. Low latency, high throughput pub/sub core.</p>
</div>
<!-- Legacy Modernization -->
<div class="md:col-span-8 bg-surface-container-lowest border border-outline-variant p-stack-lg rounded-xl group hover:shadow-md transition-all flex items-center gap-8">
<div class="flex-1">
<h3 class="font-headline-sm text-headline-sm mb-3">Legacy System Modernization</h3>
<p class="text-on-surface-variant">Wrap monolithic mainframe applications in secure, RESTful/GraphQL heads without touching the core code.</p>
</div>
<div class="hidden lg:grid grid-cols-2 gap-2">
<div class="w-16 h-16 bg-surface-container-high rounded flex items-center justify-center font-mono text-[10px]">COBOL</div>
<div class="w-16 h-16 bg-primary-container/20 rounded flex items-center justify-center font-mono text-[10px] text-primary">JSON</div>
<div class="w-16 h-16 bg-surface-container-high rounded flex items-center justify-center font-mono text-[10px]">AS400</div>
<div class="w-16 h-16 bg-primary-container/20 rounded flex items-center justify-center font-mono text-[10px] text-primary">gRPC</div>
</div>
</div>
</div>
</div>
</section>
<!-- Security & Compliance -->
<section class="py-24 border-y border-outline-variant/20 bg-surface">
<div class="max-w-7xl mx-auto px-margin-desktop">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<h2 class="font-headline-lg text-headline-lg mb-6">Zero-Trust by Default</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8">
Security isn't a bolt-on; it's the foundation. Every packet and every connection is authenticated, authorized, and encrypted in transit and at rest.
</p>
<div class="grid grid-cols-2 gap-6">
<div class="flex items-center gap-3 p-4 bg-surface-subtle border border-outline-variant rounded-lg">
<span class="material-symbols-outlined text-green-600">verified_user</span>
<span class="font-bold">SOC2 Type II</span>
</div>
<div class="flex items-center gap-3 p-4 bg-surface-subtle border border-outline-variant rounded-lg">
<span class="material-symbols-outlined text-green-600">verified_user</span>
<span class="font-bold">ISO 27001</span>
</div>
<div class="flex items-center gap-3 p-4 bg-surface-subtle border border-outline-variant rounded-lg">
<span class="material-symbols-outlined text-green-600">verified_user</span>
<span class="font-bold">GDPR Ready</span>
</div>
<div class="flex items-center gap-3 p-4 bg-surface-subtle border border-outline-variant rounded-lg">
<span class="material-symbols-outlined text-green-600">verified_user</span>
<span class="font-bold">HIPAA Compliant</span>
</div>
</div>
</div>
<div class="relative flex justify-center">
<div class="absolute inset-0 bg-primary/5 rounded-full blur-3xl"></div>
<div class="relative w-full max-w-md" role="img" aria-label="A sophisticated 3D visualization of a metallic shield composed of interconnected data points and glowing blue light circuits. The aesthetic is clean, professional, and corporate, representing high-end cybersecurity infrastructure. Lighting is soft and volumetric against a bright light-mode background." style="background:linear-gradient(135deg,#003bb1 0%,#00287f 60%,#00373f 100%);min-height:180px;display:flex;align-items:center;justify-content:center;"><span class="material-symbols-outlined" style="color:rgba(255,255,255,.25);font-size:64px;">insights</span></div>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-24 bg-on-surface text-surface">
<div class="max-w-7xl mx-auto px-margin-desktop grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
<div>
<div class="text-ai-cyan font-display-lg text-display-lg mb-2"><15ms</div>
<div class="text-label-md font-bold text-surface-variant/60 uppercase tracking-widest">End-to-End Latency</div>
</div>
<div>
<div class="text-white font-display-lg text-display-lg mb-2">99.999%</div>
<div class="text-label-md font-bold text-surface-variant/60 uppercase tracking-widest">Uptime Guarantee</div>
</div>
<div>
<div class="text-ai-cyan font-display-lg text-display-lg mb-2">10B+</div>
<div class="text-label-md font-bold text-surface-variant/60 uppercase tracking-widest">API Calls / Month</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-32 bg-primary overflow-hidden relative">
<div class="absolute inset-0 opacity-10">
<svg height="100%" width="100%">
<pattern height="40" id="grid" patternunits="userSpaceOnUse" width="40">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"></path>
</pattern>
<rect fill="url(#grid)" height="100%" width="100%"></rect>
</svg>
</div>
<div class="max-w-4xl mx-auto px-margin-desktop text-center relative z-10">
<h2 class="font-headline-lg text-white text-display-lg mb-8">Ready to unify your enterprise?</h2>
<p class="font-body-lg text-surface-variant mb-12">
Start connecting your systems today with a free pilot or speak with an integration architect.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-6">
<a href="contact.html" class="px-10 py-5 bg-ai-cyan text-primary font-black rounded-lg text-lg hover:scale-105 transition-transform">
Get Started Free
</a>
<a href="contact.html" class="px-10 py-5 bg-transparent border-2 border-white text-white font-black rounded-lg text-lg hover:bg-white/10 transition-all">
Talk to an Expert
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<!-- Footer -->
<footer class="bg-on-surface w-full pt-16 pb-10">
<div class="grid grid-cols-2 md:grid-cols-5 gap-gutter px-margin-mobile md:px-margin-desktop max-w-7xl mx-auto">
<div class="col-span-2">
<img alt="Flowgenix" class="h-7 mb-6 brightness-0 invert" src="assets/flowgenix-logo.png"/>
<p class="text-body-sm text-surface-variant/80 mb-6 max-w-xs">Transforming enterprises with intelligent automation, reusable accelerators, and AI-native low-code — from concept to market in weeks.</p>
<div class="flex flex-col gap-2 text-body-sm text-surface-variant/80">
<a href="mailto:contact@flowgenix.tech" class="flex items-center gap-2 hover:text-surface transition-colors"><span class="material-symbols-outlined text-base">mail</span> contact@flowgenix.tech</a>
<a href="tel:+919818430664" class="flex items-center gap-2 hover:text-surface transition-colors"><span class="material-symbols-outlined text-base">call</span> +91 98184 30664</a>
<span class="flex items-center gap-2"><span class="material-symbols-outlined text-base">location_on</span> Sector 119, Noida, UP 201305</span>
</div>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Platform</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html">How it works</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html#capabilities">Capabilities</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="platform.html#why">Why Flowgenix</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="industries.html">Industries</a></li>
</ul>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Products</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="carbongenie.html">CarbonGenie</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="adaptive-iam.html">Adaptive IAM</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="e-frm.html">E-FRM Suite</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="ai-factory.html">AI Factory Library</a></li>
</ul>
</div>
<div>
<h5 class="text-primary-fixed-dim font-semibold mb-5 font-body-sm">Company</h5>
<ul class="space-y-3 text-body-sm">
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="about.html">About & team</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="about.html#leadership">Leadership</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="contact.html">Contact</a></li>
<li><a class="text-surface-variant/80 hover:text-surface transition-colors" href="contact.html">Partner with us</a></li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-margin-mobile md:px-margin-desktop mt-14 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-body-sm text-surface-variant/60">© 2026 Flowgenix Business Solutions Pvt Ltd. All rights reserved.</p>
<p class="text-label-md font-label-md text-surface-variant/50 uppercase tracking-widest">From concept to market in weeks, not months</p>
</div>
</footer>
<script>
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 40) nav.classList.add('scrolled','shadow-md');
else nav.classList.remove('scrolled','shadow-md');
});
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('active'); });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
document.querySelectorAll('.interactive-card').forEach(card => {
card.addEventListener('mousemove', e => {
const r = card.getBoundingClientRect();
card.style.setProperty('--x', ((e.clientX - r.left)/r.width)*100 + '%');
card.style.setProperty('--y', ((e.clientY - r.top)/r.height)*100 + '%');
});
});
const mt = document.getElementById('mobile-toggle');
const mm = document.getElementById('mobile-menu');
if (mt) mt.addEventListener('click', () => {
mm.classList.toggle('open');
mt.querySelector('.material-symbols-outlined').textContent = mm.classList.contains('open') ? 'close' : 'menu';
});
// Animated counters
const counters = document.querySelectorAll('[data-count]');
const countObs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) return;
const el = entry.target;
const target = parseFloat(el.dataset.count);
const suffix = el.dataset.suffix || '';
const dec = (target % 1 !== 0) ? 1 : 0;
let start = null;
const dur = 1400;
function step(ts){
if (!start) start = ts;
const p = Math.min((ts - start)/dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = (target * eased).toFixed(dec) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = target.toFixed(dec) + suffix;
}
requestAnimationFrame(step);
countObs.unobserve(el);
});
}, { threshold: 0.5 });
counters.forEach(c => countObs.observe(c));
// Contact form (front-end only)
const cf = document.getElementById('contact-form');
if (cf) cf.addEventListener('submit', (e) => {
e.preventDefault();
document.getElementById('form-fields').classList.add('hidden');
document.getElementById('form-success').classList.remove('hidden');
});
</script>
</body></html>