| 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 | Adaptive IAM for Modern Enterprise</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;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<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-shimmer {
background: linear-gradient(90deg, rgba(31, 95, 174, 0.05) 0%, rgba(243, 108, 90, 0.05) 50%, rgba(31, 95, 174, 0.05) 100%);
background-size: 200% 100%;
animation: shimmer 4s infinite linear;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 1);
}
.dot-grid {
background-image: radial-gradient(#cbd5e1 0.5px, transparent 0.5px);
background-size: 20px 20px;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface text-on-surface font-body-md overflow-x-hidden">
<!-- 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 h-20">
<div class="max-w-screen-2xl mx-auto px-margin-desktop flex justify-between items-center h-full">
<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 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>
<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>
<button class="bg-primary-container text-on-primary hover:bg-secondary-container transition-all duration-200 px-6 py-2.5 rounded-lg font-semibold scale-95 active:scale-90 shadow-sm">
Get Started
</button>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="relative pt-12 pb-20 overflow-hidden dot-grid">
<div class="max-w-container-max mx-auto px-margin-desktop grid lg:grid-cols-2 gap-gutter items-center">
<div class="z-10">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-surface-container rounded-full mb-6 border border-outline-variant/30">
<span class="material-symbols-outlined text-primary text-sm" style="font-variation-settings: 'FILL' 1;">security</span>
<span class="font-label-md text-label-md text-primary tracking-wider uppercase">Next-Gen Identity</span>
</div>
<h1 class="font-display-lg text-display-lg text-on-surface mb-8">
Adaptive Identity & Access Management for the <span class="text-primary">Modern Enterprise</span>
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 max-w-xl">
Secure every user, device, and API with continuous authentication and AI-driven risk orchestration. The only IAM platform built for the hybrid-cloud reality.
</p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-on-primary px-8 py-4 rounded-xl font-semibold text-lg hover:shadow-lg transition-all transform hover:-translate-y-1">
Deploy Now
</button>
<button class="border-2 border-primary text-primary px-8 py-4 rounded-xl font-semibold text-lg hover:bg-primary/5 transition-all">
View Reference Architecture
</button>
</div>
</div>
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-tr from-primary/10 to-secondary/10 rounded-full blur-3xl opacity-50"></div>
<div class="relative glass-card p-4 rounded-[2rem] shadow-2xl border-2 border-white/50">
<img class="w-full h-auto rounded-[1.5rem] object-cover aspect-[4/3]" data-alt="A detailed digital 3D visualization of an enterprise identity architecture. It features a central glowing blue core representing an AI Risk Engine, with intricate white geometric lines connecting to various user avatars, mobile devices, and server towers. The environment is dark and sleek with neon blue and orange accents, emphasizing high-security and high-performance technology. The lighting is focused and clean, giving it a premium architectural feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0b9-ORKofVDvJW3n4Vkt4Js_jzlztTXnPt9c6L0aVr0XLjBaT88QJVcUesJKA0b1H3Uz9Pq_t_6LFnlTsecYXOPLT3L7otxvu_4Tm4Ep7OaxvIfpvkbvbv04Ax_E3XTDsP3tcDPLY6C5MYdeRMuxrFSV8Q7boK5UyIIo7hyolbRAhlUZ06YzOa3VYIbz7wTasIwTRg1MA5lsRNG-8jZ-dTgEV3xhU0aiv6oVzUZb4eSVG_blcEchy"/>
</div>
</div>
</div>
</section>
<!-- Security Challenges -->
<section class="py-24 bg-white">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="font-headline-xl text-headline-xl mb-4">The Burden of Legacy Identity</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">Static identity perimeters are failing. Modern security teams face systemic challenges that legacy IAM cannot solve.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
<!-- Sprawl -->
<div class="p-8 rounded-2xl border border-outline-variant/40 hover:border-primary/40 hover:shadow-xl transition-all group">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined" data-icon="cloud_sync">cloud_sync</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Identity Sprawl</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Siloed directories across cloud, SaaS, and on-prem create fragmented visibility and control gaps.</p>
</div>
<!-- Fatigue -->
<div class="p-8 rounded-2xl border border-outline-variant/40 hover:border-primary/40 hover:shadow-xl transition-all group">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined" data-icon="notifications_off">notifications_off</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">MFA Fatigue</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Over-prompting users leads to friction and vulnerability to social engineering bypass attacks.</p>
</div>
<!-- Complexity -->
<div class="p-8 rounded-2xl border border-outline-variant/40 hover:border-primary/40 hover:shadow-xl transition-all group">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Complexity</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Configuring complex RBAC policies across thousands of apps is a manual, error-prone nightmare.</p>
</div>
<!-- Threats -->
<div class="p-8 rounded-2xl border border-outline-variant/40 hover:border-primary/40 hover:shadow-xl transition-all group">
<div class="w-12 h-12 bg-surface-container rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined" data-icon="gpp_maybe">gpp_maybe</span>
</div>
<h3 class="font-headline-lg text-headline-lg mb-3">Advanced Threats</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Credential stuffing, AiTM attacks, and session hijacking require dynamic, real-time defenses.</p>
</div>
</div>
</div>
</section>
<!-- Core Capabilities Bento Grid -->
<section class="py-24 bg-surface-container-low overflow-hidden">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl mb-12 text-center">Engineered for Elastic Security</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="md:col-span-2 glass-card rounded-[2rem] p-10 flex flex-col justify-between min-h-[400px] border-l-4 border-l-primary">
<div>
<span class="inline-block px-3 py-1 bg-primary/10 text-primary rounded-full font-label-md text-label-md mb-4">ADAPTIVE ENGINE</span>
<h3 class="font-headline-xl text-headline-xl mb-4">Continuous Adaptive Authentication</h3>
<p class="font-body-md text-body-md text-on-surface-variant max-w-lg">Go beyond the initial login. Our engine continuously monitors signals like device health, location, and user behavior to adjust access levels in real-time.</p>
</div>
<div class="mt-8 flex gap-4 overflow-x-auto pb-4">
<div class="px-4 py-2 bg-white rounded-full border border-outline-variant/30 whitespace-nowrap text-sm font-semibold">User Behavior</div>
<div class="px-4 py-2 bg-white rounded-full border border-outline-variant/30 whitespace-nowrap text-sm font-semibold">Device Trust</div>
<div class="px-4 py-2 bg-white rounded-full border border-outline-variant/30 whitespace-nowrap text-sm font-semibold">Network IP</div>
<div class="px-4 py-2 bg-white rounded-full border border-outline-variant/30 whitespace-nowrap text-sm font-semibold">Geo-Fencing</div>
<div class="px-4 py-2 bg-white rounded-full border border-outline-variant/30 whitespace-nowrap text-sm font-semibold">Zero Trust Policy</div>
</div>
</div>
<div class="glass-card rounded-[2rem] p-10 bg-gradient-to-br from-white to-secondary/5 border-t-4 border-t-secondary">
<span class="material-symbols-outlined text-secondary text-4xl mb-6" data-icon="fingerprint">fingerprint</span>
<h3 class="font-headline-lg text-headline-lg mb-4">True Passwordless</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Eliminate passwords entirely with FIDO2, WebAuthn, and biometric-first workflows that frustrate attackers, not users. Social login via OAuth 2.0/OpenID Connect (Google, Microsoft 365, LinkedIn, Facebook) plus MFA across SMS, email, authenticator apps, and hardware tokens.</p>
</div>
<div class="glass-card rounded-[2rem] p-10">
<span class="material-symbols-outlined text-primary text-4xl mb-6" data-icon="policy">policy</span>
<h3 class="font-headline-lg text-headline-lg mb-4">RBAC & ABAC</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Context-aware access controls that blend static roles with dynamic attributes for precise "Least Privilege" enforcement — backed by AI-driven role mining, automated user provisioning/de-provisioning, and a digital twin that simulates access-rights changes before they go live.</p>
</div>
<div class="md:col-span-2 glass-card rounded-[2rem] p-10 grid md:grid-cols-2 gap-8 ai-shimmer">
<div>
<span class="material-symbols-outlined text-ai-accent text-4xl mb-6" data-icon="neurology">neurology</span>
<h3 class="font-headline-lg text-headline-lg mb-4">AI Intelligence & Governance</h3>
<p class="font-body-sm text-body-sm text-on-surface-variant">Automated access reviews, identity lifecycle management, and entitlement optimization driven by predictive AI models — with explainable AI decisions, peer-based access prediction, real-time anomaly detection, and federated learning across organizations that shares intelligence without sharing raw data.</p>
</div>
<div class="bg-surface/50 rounded-xl p-4 border border-outline-variant/20 flex flex-col gap-3">
<div class="flex items-center justify-between text-xs font-bold text-outline">RISK SCORE: <span class="text-status-success">14 (LOW)</span></div>
<div class="h-2 w-full bg-outline-variant/20 rounded-full overflow-hidden">
<div class="h-full bg-status-success w-[14%]"></div>
</div>
<div class="text-[10px] bg-white p-2 rounded border border-outline-variant/10 shadow-sm">
<p class="font-mono">ANALYSIS: Known device, secure location. Low entropy detected.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Reference Architecture -->
<section class="py-24 bg-white relative overflow-hidden">
<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 Flowgenix IAM Architecture</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant">A unified conduit for all identities, secured by a central intelligence core.</p>
</div>
<div class="relative py-12">
<div class="hidden lg:block absolute top-1/2 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-primary/20 to-transparent -translate-y-1/2"></div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-gutter relative z-10">
<!-- Users -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-surface rounded-2xl shadow-lg border border-primary/10 flex items-center justify-center mb-6 relative">
<span class="material-symbols-outlined text-primary text-4xl" data-icon="group">group</span>
<div class="absolute -right-2 -top-2 w-6 h-6 bg-secondary text-white rounded-full flex items-center justify-center text-[10px] font-bold">1M+</div>
</div>
<h4 class="font-headline-lg text-headline-lg">Users</h4>
<p class="text-xs text-on-surface-variant mt-2">Employees, Contractors, Customers, Partners, Associates</p>
</div>
<!-- Identity Services -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-surface rounded-2xl shadow-lg border border-primary/10 flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-primary text-4xl" data-icon="vpn_key">vpn_key</span>
</div>
<h4 class="font-headline-lg text-headline-lg">Identity Services</h4>
<p class="text-xs text-on-surface-variant mt-2">SSO, Passwordless, MFA, Self-Service Console, IAM Chatbot</p>
</div>
<!-- AI Risk Engine -->
<div class="flex flex-col items-center text-center">
<div class="w-24 h-24 bg-primary text-on-primary rounded-[2rem] shadow-2xl flex items-center justify-center mb-6 animate-pulse">
<span class="material-symbols-outlined text-5xl" data-icon="psychology">psychology</span>
</div>
<h4 class="font-headline-lg text-headline-lg font-bold text-primary">AI Risk Engine</h4>
<p class="text-xs text-on-surface-variant mt-2">Threat Intelligence, Behavioral Analytics</p>
</div>
<!-- Apps -->
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-surface rounded-2xl shadow-lg border border-primary/10 flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-primary text-4xl" data-icon="apps">apps</span>
</div>
<h4 class="font-headline-lg text-headline-lg">Apps & APIs</h4>
<p class="text-xs text-on-surface-variant mt-2">Cloud Apps, Legacy Systems, Infrastructure</p>
</div>
</div>
</div>
</div>
</section>
<!-- AI Security Deep Dive -->
<section class="py-24 bg-inverse-surface text-surface relative overflow-hidden">
<div class="max-w-container-max mx-auto px-margin-desktop relative z-10">
<div class="grid lg:grid-cols-2 gap-20 items-center">
<div>
<h2 class="font-headline-xl text-headline-xl mb-6 text-white">AI-Powered Risk Scoring</h2>
<p class="font-body-lg text-body-lg text-surface-variant mb-8">
Every authentication attempt generates thousands of telemetry points. Our AI processes this in milliseconds to calculate a granular risk score.
</p>
<ul class="space-y-6">
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-primary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary-container text-sm" data-icon="check">check</span>
</div>
<div>
<h5 class="font-semibold text-white">Real-time Anomaly Detection</h5>
<p class="text-sm text-surface-variant">Identify login patterns that deviate from established user baselines.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-primary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary-container text-sm" data-icon="check">check</span>
</div>
<div>
<h5 class="font-semibold text-white">Bot & Automation Throttling</h5>
<p class="text-sm text-surface-variant">Detect and block credential stuffing and high-speed automated attacks.</p>
</div>
</li>
<li class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 bg-primary-container rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-on-primary-container text-sm" data-icon="check">check</span>
</div>
<div>
<h5 class="font-semibold text-white">Adaptive Remediation</h5>
<p class="text-sm text-surface-variant">Automatically trigger MFA, lock accounts, or alert SOC based on risk severity.</p>
</div>
</li>
</ul>
</div>
<div class="bg-surface/10 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/10 shadow-2xl">
<div class="flex items-center justify-between mb-8">
<h4 class="font-bold text-white uppercase tracking-widest text-xs">Security Analytics Hub</h4>
<div class="flex gap-2">
<div class="w-2 h-2 rounded-full bg-status-success animate-ping"></div>
<span class="text-[10px] text-surface-variant uppercase font-bold">Live Monitoring</span>
</div>
</div>
<div class="space-y-4">
<!-- Visual Data Representation -->
<div class="h-32 w-full bg-white/5 rounded-xl border border-white/5 flex items-end p-4 gap-1">
<div class="w-full bg-primary/40 h-[30%] rounded-t-sm"></div>
<div class="w-full bg-primary/40 h-[45%] rounded-t-sm"></div>
<div class="w-full bg-primary/40 h-[25%] rounded-t-sm"></div>
<div class="w-full bg-secondary h-[85%] rounded-t-sm"></div>
<div class="w-full bg-primary/40 h-[40%] rounded-t-sm"></div>
<div class="w-full bg-primary/40 h-[55%] rounded-t-sm"></div>
<div class="w-full bg-primary/40 h-[35%] rounded-t-sm"></div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-white/5 rounded-xl border border-white/5">
<p class="text-[10px] text-surface-variant uppercase">Threats Blocked</p>
<p class="text-2xl font-bold">14.2k</p>
</div>
<div class="p-4 bg-white/5 rounded-xl border border-white/5">
<p class="text-[10px] text-surface-variant uppercase">Confidence Level</p>
<p class="text-2xl font-bold">99.8%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Integrations & Compliance -->
<section class="py-24 bg-surface">
<div class="max-w-container-max mx-auto px-margin-desktop">
<div class="flex flex-col lg:flex-row gap-gutter items-center">
<div class="lg:w-1/2">
<h2 class="font-headline-xl text-headline-xl mb-6">Enterprise Ecosystem Connectivity</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10">
Flowgenix seamlessly integrates with your existing tech stack. From HRIS and Directories to SIEM and ERP systems, we ensure identity is consistent across every layer of the enterprise.
</p>
<div class="grid grid-cols-2 md:grid-cols-3 gap-6">
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="grid_view">grid_view</span>
</div>
<span class="font-bold text-sm">Entra ID</span>
</div>
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="storage">storage</span>
</div>
<span class="font-bold text-sm">SAP HANA</span>
</div>
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="work">work</span>
</div>
<span class="font-bold text-sm">Workday</span>
</div>
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="cloud">cloud</span>
</div>
<span class="font-bold text-sm">AWS IAM</span>
</div>
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="shield">shield</span>
</div>
<span class="font-bold text-sm">Splunk</span>
</div>
<div class="flex items-center gap-3 p-4 glass-card rounded-xl">
<div class="w-8 h-8 bg-surface-container flex items-center justify-center rounded">
<span class="material-symbols-outlined text-primary text-xl" data-icon="api">api</span>
</div>
<span class="font-bold text-sm">Salesforce</span>
</div>
</div>
</div>
<div class="lg:w-1/2 mt-12 lg:mt-0">
<div class="glass-card p-10 rounded-[2rem] bg-surface-container-high/30">
<h4 class="font-headline-lg text-headline-lg mb-6">Compliance Ready</h4>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-status-success/10 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-status-success" data-icon="verified">verified</span>
</div>
<div>
<p class="font-bold">SOC2 Type II & ISO 27001</p>
<p class="text-sm text-on-surface-variant">Built on security-first principles with annual third-party audits.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-status-success/10 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-status-success" data-icon="verified">verified</span>
</div>
<div>
<p class="font-bold">GDPR & CCPA Compliant</p>
<p class="text-sm text-on-surface-variant">Advanced privacy controls and data residency options for global teams.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 bg-status-success/10 rounded-full flex items-center justify-center flex-shrink-0">
<span class="material-symbols-outlined text-status-success" data-icon="verified">verified</span>
</div>
<div>
<p class="font-bold">HIPAA & FedRAMP Ready</p>
<p class="text-sm text-on-surface-variant">Meeting the most stringent regulatory requirements for sensitive data.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Comparison Table -->
<section class="py-24 bg-white border-y border-outline-variant/20">
<div class="max-w-container-max mx-auto px-margin-desktop">
<h2 class="font-headline-xl text-headline-xl mb-16 text-center">Traditional vs. Flowgenix Adaptive IAM</h2>
<div class="overflow-x-auto">
<table class="w-full border-collapse">
<thead>
<tr class="border-b-2 border-outline-variant">
<th class="text-left py-6 px-4 font-headline-lg text-headline-lg">Feature</th>
<th class="text-left py-6 px-4 font-headline-lg text-headline-lg text-on-surface-variant">Traditional IAM</th>
<th class="text-left py-6 px-4 font-headline-lg text-headline-lg text-primary">Flowgenix Adaptive</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant/30">
<tr>
<td class="py-6 px-4 font-bold">Authentication</td>
<td class="py-6 px-4 text-on-surface-variant italic">Static passwords and SMS OTP</td>
<td class="py-6 px-4 font-semibold text-primary">Passwordless, FIDO2, Continuous Auth</td>
</tr>
<tr>
<td class="py-6 px-4 font-bold">Risk Management</td>
<td class="py-6 px-4 text-on-surface-variant italic">Binary Allow/Block logic</td>
<td class="py-6 px-4 font-semibold text-primary">Granular AI-driven Risk Scoring</td>
</tr>
<tr>
<td class="py-6 px-4 font-bold">Policy Enforcement</td>
<td class="py-6 px-4 text-on-surface-variant italic">Manual RBAC maintenance</td>
<td class="py-6 px-4 font-semibold text-primary">Dynamic ABAC & AI Governance</td>
</tr>
<tr>
<td class="py-6 px-4 font-bold">User Experience</td>
<td class="py-6 px-4 text-on-surface-variant italic">High friction, frequent re-logins</td>
<td class="py-6 px-4 font-semibold text-primary">Seamless, session-intelligent access</td>
</tr>
<tr>
<td class="py-6 px-4 font-bold">Deployment</td>
<td class="py-6 px-4 text-on-surface-variant italic">Months of professional services</td>
<td class="py-6 px-4 font-semibold text-primary">Rapid Cloud-native instantiation</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-32 relative overflow-hidden">
<div class="absolute inset-0 bg-primary">
</div>
<div class="max-w-container-max mx-auto px-margin-desktop relative z-10 text-center">
<h2 class="font-display-lg text-display-lg text-on-primary mb-8 max-w-4xl mx-auto">Secure Every Identity. Empower Every User.</h2>
<p class="font-body-lg text-body-lg text-primary-fixed mb-12 max-w-2xl mx-auto">
Join the 500+ enterprises that have eliminated credential-based attacks with Flowgenix. Start your Zero Trust identity journey today.
</p>
<div class="flex flex-col sm:flex-row gap-6 justify-center">
<button class="bg-secondary-container text-on-secondary-container px-10 py-5 rounded-xl font-bold text-xl hover:bg-white transition-all transform hover:scale-105 shadow-2xl">
Request Custom Demo
</button>
<button class="bg-white/10 backdrop-blur-md text-white border border-white/20 px-10 py-5 rounded-xl font-bold text-xl hover:bg-white/20 transition-all">
Talk to an Architect
</button>
</div>
<p class="mt-8 text-primary-fixed/60 font-label-md text-label-md">No credit card required • Free trial for 14 days • Full enterprise support</p>
</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 effects
document.querySelectorAll('.glass-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
});
});
// Sticky header transition
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
if (window.scrollY > 20) {
header.classList.add('shadow-md');
header.classList.remove('shadow-sm');
} else {
header.classList.remove('shadow-md');
header.classList.add('shadow-sm');
}
});
</script>
</body></html>