| 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 | Building the Future of Enterprise Automation</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"background": "#f8f9ff",
"secondary-fixed": "#ffdad5",
"on-primary-fixed": "#001b3d",
"surface-variant": "#d3e4fe",
"surface-container-high": "#dce9ff",
"primary-fixed-dim": "#a9c7ff",
"on-tertiary-fixed-variant": "#3f465c",
"inverse-surface": "#213145",
"secondary-fixed-dim": "#ffb4a8",
"outline": "#727782",
"tertiary": "#40475d",
"error": "#ba1a1a",
"on-error": "#ffffff",
"inverse-on-surface": "#eaf1ff",
"surface-dim": "#cbdbf5",
"primary-fixed": "#d6e3ff",
"surface-container-low": "#eff4ff",
"tertiary-fixed-dim": "#bec6e0",
"on-primary-fixed-variant": "#00468b",
"on-secondary-fixed-variant": "#881e14",
"on-secondary-container": "#6f0905",
"inverse-primary": "#a9c7ff",
"primary-container": "#1f5fae",
"on-secondary": "#ffffff",
"error-container": "#ffdad6",
"on-tertiary-fixed": "#131b2e",
"outline-variant": "#c2c6d3",
"on-secondary-fixed": "#410000",
"on-background": "#0b1c30",
"on-surface-variant": "#424751",
"on-primary": "#ffffff",
"tertiary-fixed": "#dae2fd",
"surface-container": "#e5eeff",
"on-surface": "#0b1c30",
"surface-bright": "#f8f9ff",
"surface-container-highest": "#d3e4fe",
"tertiary-container": "#575f75",
"on-error-container": "#93000a",
"surface-tint": "#1d5ead",
"surface-container-lowest": "#ffffff",
"surface": "#f8f9ff",
"on-primary-container": "#c9dbff",
"primary": "#00478d",
"secondary-container": "#fd7361",
"on-tertiary": "#ffffff",
"secondary": "#a93629",
"on-tertiary-container": "#d2d9f4"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"margin-mobile": "16px",
"xl": "64px",
"lg": "40px",
"base": "4px",
"sm": "16px",
"xs": "8px",
"gutter": "24px",
"margin-desktop": "48px",
"md": "24px"
},
"fontFamily": {
"headline-lg": ["IBM Plex Sans"],
"headline-xl": ["IBM Plex Sans"],
"body-md": ["Inter"],
"body-sm": ["Inter"],
"headline-md": ["IBM Plex Sans"],
"body-lg": ["Inter"],
"headline-lg-mobile": ["IBM Plex Sans"],
"label-md": ["Inter"]
},
"fontSize": {
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"headline-xl": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
"body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
"headline-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"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;
}
.kinetic-grid {
background-image: radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0);
background-size: 32px 32px;
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border: 1px solid #E2E8F0;
}
.hero-gradient {
background: linear-gradient(135deg, #f8f9ff 0%, #e5eeff 100%);
}
</style>
</head>
<body class="bg-background text-on-surface font-body-md overflow-x-hidden">
<!-- TopAppBar -->
<header class="w-full top-0 sticky z-50 bg-background border-b border-outline-variant">
<div class="flex justify-between items-center w-full px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto 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 lg:flex items-center gap-lg">
<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-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-primary font-bold border-b-2 border-primary pb-1 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 font-medium px-md py-xs rounded-lg cursor-pointer active:opacity-80 transition-all">
Talk to an Expert
</button>
</div>
</header>
<main>
<!-- Section 1: Hero -->
<section class="relative min-h-[60vh] flex items-center overflow-hidden hero-gradient kinetic-grid">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto w-full grid grid-cols-1 lg:grid-cols-2 gap-xl items-center relative z-10">
<div class="space-y-md">
<div class="inline-flex items-center gap-xs px-sm py-base bg-surface-container rounded-full border border-outline-variant">
<span class="material-symbols-outlined text-primary text-[18px]">verified</span>
<span class="font-label-md text-label-md text-primary uppercase">The Next Evolution</span>
</div>
<h1 class="font-headline-xl text-headline-xl text-on-background leading-tight">
Building the Future of <span class="text-primary">Enterprise Automation</span>
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
Flowgenix delivers kinetic precision architecture for global enterprises, harmonizing AI intelligence with human-centric strategic oversight.
</p>
<div class="flex flex-wrap gap-md pt-sm">
<button class="bg-primary px-lg py-md text-on-primary rounded-lg font-medium shadow-md hover:shadow-lg transition-all">Download Vision Paper</button>
<button class="border border-primary text-primary px-lg py-md rounded-lg font-medium hover:bg-surface-container-low transition-all">Our Story</button>
</div>
</div>
<div class="hidden lg:block relative">
<div class="relative w-full aspect-square bg-surface-container-highest rounded-[40px] overflow-hidden border border-outline-variant shadow-xl">
<img class="w-full h-full object-cover" data-alt="A highly detailed architectural visualization of a futuristic enterprise data center where luminous light-blue data streams connect translucent geometric server modules. The lighting is crisp and cool, reflecting off polished glass and metallic surfaces in a bright, light-mode environment. The composition is balanced and symmetric, conveying stability, high-tech sophistication, and precision. Soft blue accents and white foundational elements dominate the visual aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCdYdqniEJitZJzd5rmEIjrZ97swcv03puICxSZR1Y_PfyDFxHI82ZNpcyFjzCaxfVDyICzh6dklrDoQCQWmtq43SqcVi4C5xXkiXHkxhfljQkGzkwXxrXEr6rIbBR3i49CdL7WIUlJbfnLENqQ4AIHv7cCiIPV-jDBrWc34ZLWccBMXqHKNhM6pxY9tHLk7mHMhs7ktIT4_BrmPTeSNuFJ-Uo95twlpedcy68E-Sc-JCbvYNtTtbB4"/>
<div class="absolute inset-0 bg-gradient-to-t from-on-background/20 to-transparent"></div>
</div>
</div>
</div>
</section>
<!-- Section 2: Who We Are (Split Layout) -->
<section class="py-xl bg-surface-container-lowest">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-xl items-center">
<div class="order-2 lg:order-1">
<div class="grid grid-cols-2 gap-md">
<div class="aspect-square rounded-xl overflow-hidden shadow-sm">
<img class="w-full h-full object-cover" data-alt="A group of diverse, professional enterprise architects in a modern, sun-drenched boardroom featuring clean lines and minimalist furniture. They are collaborating over a digital glass table showing complex architectural diagrams. The color palette is bright and professional with primary blue highlights. The atmosphere is focused and innovative, representing the collaborative spirit of a world-class technology firm." src="https://lh3.googleusercontent.com/aida-public/AB6AXuATaNHzhPlaCR6EPavdc-XSHRkw40_7RaDXUbbO299eTTBEcj2xsiDghVgRIW8JCqvZbRlRoOztXr-KvnJgJC1sdNhneavEAzSGFJUipo1aOJEDPD4JOU0hO4dr3kXUFxWyk4yK9Kv7oBqj9pFGGhS9ekcw4TmhqgP421qB4jNxqr5DZY1qhUEGm9xNWkppNZJdEZVAJ-TltOUzYAgxyZuiCSobhs2tjiNaujpXLsBC_5016u8tnXYh"/>
</div>
<div class="aspect-square rounded-xl overflow-hidden shadow-sm mt-lg">
<img class="w-full h-full object-cover" data-alt="A close-up of a high-end microchip or AI processor showing intricate, glowing golden and blue circuitry paths. The lighting is cinematic, highlighting the microscopic precision and technical power of the hardware. This image symbolizes the deep technological foundation of Flowgenix and its commitment to granular data technicality in an enterprise context." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDv-BG3-z5WoRCmH9g8gZS9WvQ0k9zrx41XTcVITGD874viHb6IzaMtDgUe2lihELOfM7G4319wWTAMa_5SC4_R0gWiZm_qmFkzsB0P2GXzKdZvbNZq_GImmySATC0k3Dj-l5A6QYULN0km7HMJg7AV4VWTLb3FHmduP0WtmRGyEVFwSHqYUv0ilPfxNp18dIoWHs4yNagqSolKhVsU2WW5sjxrvM0peMb1BW4ccVzV_bLaTZe_98c2"/>
</div>
</div>
</div>
<div class="order-1 lg:order-2 space-y-md">
<h2 class="font-headline-lg text-headline-lg text-on-background">Who We Are</h2>
<p class="font-body-md text-body-md text-on-surface-variant">
Founded by a team of enterprise architects and AI researchers, Flowgenix was born from the realization that true automation requires more than just code—it requires a kinetic precision architecture.
</p>
<p class="font-body-md text-body-md text-on-surface-variant">
We bridge the gap between high-level strategic oversight and granular technical execution, providing global leaders with the stability and momentum needed to thrive in an AI-first economy. Our mission is to accelerate the transition to autonomous enterprise operations while maintaining absolute trust and security.
</p>
<ul class="space-y-sm pt-sm">
<li class="flex items-center gap-sm">
<span class="material-symbols-outlined text-primary bg-primary-fixed p-1 rounded-full text-[20px]">check</span>
<span class="font-medium text-on-background">Global presence with offices in 12 tech hubs</span>
</li>
<li class="flex items-center gap-sm">
<span class="material-symbols-outlined text-primary bg-primary-fixed p-1 rounded-full text-[20px]">check</span>
<span class="font-medium text-on-background">Empowering 45% of the Fortune 500</span>
</li>
<li class="flex items-center gap-sm">
<span class="material-symbols-outlined text-primary bg-primary-fixed p-1 rounded-full text-[20px]">check</span>
<span class="font-medium text-on-background">Dedicated R&D Labs for Quantum AI Ethics</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Section 3: Our Values Cards -->
<section class="py-xl bg-surface-container-low kinetic-grid">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto">
<div class="text-center mb-xl">
<h2 class="font-headline-lg text-headline-lg text-on-background mb-xs">Our Core Values</h2>
<p class="text-on-surface-variant max-w-2xl mx-auto">The foundational principles that guide our kinetic precision architecture and every decision we make for our partners.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
<!-- Value 1: Innovation -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">lightbulb</span>
<h3 class="font-headline-md text-headline-md">Innovation</h3>
<p class="font-body-sm text-body-sm opacity-90">Pushing the boundaries of what's possible in enterprise AI and automation through relentless R&D and strategic creativity.</p>
</div>
<!-- Value 2: Customer Success -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">handshake</span>
<h3 class="font-headline-md text-headline-md">Customer Success</h3>
<p class="font-body-sm text-body-sm opacity-90">We measure our performance by the tangible, strategic advantages we deliver to our partners and their stakeholders.</p>
</div>
<!-- Value 3: Enterprise Trust -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">verified_user</span>
<h3 class="font-headline-md text-headline-md">Enterprise Trust</h3>
<p class="font-body-sm text-body-sm opacity-90">Building stability and reliability into every layer of our stack to ensure long-term operational confidence.</p>
</div>
<!-- Value 4: Security -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">lock</span>
<h3 class="font-headline-md text-headline-md">Security</h3>
<p class="font-body-sm text-body-sm opacity-90">Absolute protection of enterprise data and intellectual property through military-grade encryption and zero-trust protocols.</p>
</div>
<!-- Value 5: Scalability -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">trending_up</span>
<h3 class="font-headline-md text-headline-md">Scalability</h3>
<p class="font-body-sm text-body-sm opacity-90">Architectures designed to grow seamlessly with your business, from pilot phases to global multinational deployment.</p>
</div>
<!-- Value 6: Continuous Improvement -->
<div class="glass-card p-lg rounded-xl flex flex-col items-start gap-md group hover:bg-primary-container hover:text-on-primary transition-all duration-300">
<span class="material-symbols-outlined text-primary text-[32px] group-hover:text-on-primary transition-colors">autorenew</span>
<h3 class="font-headline-md text-headline-md">Continuous Improvement</h3>
<p class="font-body-sm text-body-sm opacity-90">Leveraging machine learning loops to constantly refine and optimize processes for peak operational efficiency.</p>
</div>
</div>
</div>
</section>
<!-- Section 4: Company Snapshot Metrics -->
<section class="py-xl bg-inverse-surface text-on-primary-fixed">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl text-center">
<div class="space-y-xs">
<div class="font-headline-xl text-headline-xl text-primary-fixed-dim">500+</div>
<div class="font-label-md text-label-md uppercase tracking-widest text-surface-variant">Global Partners</div>
</div>
<div class="space-y-xs">
<div class="font-headline-xl text-headline-xl text-primary-fixed-dim">99.9%</div>
<div class="font-label-md text-label-md uppercase tracking-widest text-surface-variant">System Uptime</div>
</div>
<div class="space-y-xs">
<div class="font-headline-xl text-headline-xl text-primary-fixed-dim">12</div>
<div class="font-label-md text-label-md uppercase tracking-widest text-surface-variant">Research Centers</div>
</div>
<div class="space-y-xs">
<div class="font-headline-xl text-headline-xl text-primary-fixed-dim">1.2B</div>
<div class="font-label-md text-label-md uppercase tracking-widest text-surface-variant">Tasks Automated</div>
</div>
</div>
</div>
</section>
<!-- Section 5: Company Pages Navigation (Bento) -->
<section class="py-xl bg-background">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto">
<h2 class="font-headline-lg text-headline-lg text-on-background mb-lg">Explore Flowgenix</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-md">
<!-- About -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A minimal white interior with high ceilings and architectural shadows. One single, high-tech primary blue pedestal stands in the center. The aesthetic is extremely clean and futuristic, representing the 'About' section of a high-end AI brand. Light-mode lighting, sharp lines, and spacious composition define this corporate modernist visual." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtC3RrD_wewqf-ztABB--r0POhq1sKNHb8WQEpF2E_azup1oHWqxASJjwz5OYcIb3NE2prZPB52kN8zabed9V5EWKYydT-EEqihCqIi8xubKXmfE1SRA8bHBq1Yn6-A3FVjcUPNciZXJ-p5-odNJ0NXzFSWzoMN8FLCfI6nWtGdevvOyJI4toDUkA55fQJneWQh5MnGXM0CS-B85wYTbqEmyxRK74IWaZtxbEvkU17VIErYY6QzSz1"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">About</h4>
<p class="text-white/80 text-body-sm">Our Heritage & Mission</p>
</div>
</div>
<!-- Vision -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="An abstract visualization of a glowing blue horizon line where digital particles converge into a bright light. The background is a soft, deep navy gradient, evoking a sense of limitless future potential. This visual represents the forward-looking 'Vision' of the company, focusing on light-mode highlights and clean, technological elegance." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2U8n_xaiE63i-GyDX2lTLR9jFLg1Bx6z9Nbh5DDg33WjO8yAha9LHVmSoQYPR9cU40Vg-KWFJYQ6hWZsr71aR5sIDm9ouwMaYmnJTybifYgEPhFgipMV8u4xmsOQsuGu_4qDTFus0NySw0ZYkivZ0hB4BT2PZY5k3wK-OrWwpqKcXPdhLsw4GkV9avPuS9mtx-OJzIdQ1n-m2k71G7RXOVmJMp4xn0HBDTUg2dx3rP1xRkynU8tMG"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Vision</h4>
<p class="text-white/80 text-body-sm">The Road Ahead</p>
</div>
</div>
<!-- Why Flowgenix -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A clean, isometric 3D render of three interlocking gears made of white ceramic and translucent blue glass. They are floating in a bright, white studio space. The lighting is soft and professional, emphasizing the precision and interconnectivity of the Flowgenix platform. This represents 'Why Flowgenix' as the preferred enterprise choice." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0inwkrzOiFiNDlrvqaodfKqi4joaJ_IGnCmFfcoZenjXqQBpjK0SItSAbLrmKUDf3gY3FuehcGtRDDoA3MJhnZKrrpMDE5JXBBKJUNu27GUWy028KcschLvJXCZh_S4hyaSG-jo9OCFXNGVYiyzs4FdEq47BarIE2urVP4zSys9UfTP4JtF9n9ZA1UhdWAl18Ir0vTRHjOTvCCVP0OMZhFCU9R_oJ5rtovuiZhljCscW_39XEiMuQ"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Why Flowgenix</h4>
<p class="text-white/80 text-body-sm">The Platform Advantage</p>
</div>
</div>
<!-- Leadership -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A series of sophisticated, high-end professional headshots arranged in a clean grid, but with a stylized blue tint and modern lighting. Each figure exudes confidence and expertise. The overall aesthetic is one of corporate modernism, reflecting a high-level strategic leadership team in the tech sector." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBPHL7fvHkEImVLZgVAxnWbcwjpGIlOxVZHeajyKyIPfAcI5mxrSGrXu8sqd2NwogCVksCuOFMHxLcZyGsEwNuLts6V0g_7YbA87V2SYttGTQxXXapT33XZAwkTRlFiz6w5JXn8JMOleqcw_5SFdzXsaSKc7mwqNa7c6lWpqtyuKXEYLvQizyYeqCgeSdX40CCE6n3D8OLvQkWyGk4mrr-g1IF9RMMVyiqWDPU85m_OOhyj4U9tZRE_"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Leadership</h4>
<p class="text-white/80 text-body-sm">Expert Governance</p>
</div>
</div>
<!-- Partners -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A network graph visualization where dots represent global nodes and thin white lines represent high-speed connections. The background is a clean, bright-grey gradient with primary blue pulses. It visualizes global partnerships and the strength of a connected enterprise ecosystem in a professional, technical style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuArBqWAeMDPEyAn6B5PtoThdy_ktqghQ2ItYbsvGzAjYBO0nnVFBF-dfPvnB3HVxhoDml3ISnLDhaXLytbQsP6RUz99EfFvEwEwTM3Qv1050yuvtS0p3bYK3s13ozKy7ddQPHdRvZp1TLY4FgcKMaAH49Qr2UktF3T98jIEM5uL5LyznVmM9ljYch4jV1_49WgND8C3TKefZSo7OTYE4iBMMlNyX5Z02zptlcDO1yhojdSl9M1ysstN"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Partners</h4>
<p class="text-white/80 text-body-sm">Our Global Ecosystem</p>
</div>
</div>
<!-- Careers -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A bright, airy modern office space featuring living green walls and sleek ergonomic workspaces. People are walking with energy and purpose through the space. The visual reflects a high-performance, healthy corporate culture that values both innovation and human well-being. Modern light-mode aesthetic with warm timber and cool glass." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKqEQtSkZmEks1HVDf0ATVKwMaxujXPABw1RRGromdzcgjGDDwDQPnGaZI4Nx7_ea3W2pwLzvvrMx8Uc9M-duYfeFXUzcLC5POexRfpYcIdoPJh6_aDh8Dy32gW_hDNQsZV0VaEBmMdg_HmfFPl2VMltsvjX6oVCU9jq0Yi7-_pAA4sgwLYe82YUsqOE54LT9wGzx3eQYEScL9JnOU7Md9Xz_t4qWFQ-z5Sioi5wkQFttB7Bj0tVVC"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Careers</h4>
<p class="text-white/80 text-body-sm">Join the Revolution</p>
</div>
</div>
<!-- News -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A stylish, minimalist newspaper layout displayed on a high-resolution tablet screen. The headlines are bold and the typography is crisp. Background is a blurred, high-end office environment. This visual conveys a sense of timely relevance, authority, and industry-leading insight for the 'News' section." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAnMw7ykdafEUFPogNJaMcVWOKq2VlvBcFV3Iwi-2806vgtAHRN0y8jmQcCnyMotaTBkbBVC_Wi77zV2uR2f8x-7eyEZMJkrP6g4V1sm9pgeSAyuHyEDnM9X0U1S4IMdzNfQdVBkE1ZdXpn4UeoELz6woMs6cS4xnf3b4cz1_QL5IaxorwmFJpmG_7pZXPFiOfB2DHJPxnDxPCOXBFxa4tNBdC5N77G0d9VGPcBUo_6-I6JYhOGo4Jc"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">News</h4>
<p class="text-white/80 text-body-sm">Press & Insights</p>
</div>
</div>
<!-- Contact -->
<div class="relative group aspect-square rounded-xl overflow-hidden cursor-pointer">
<img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" data-alt="A close-up of a sleek, modern touch interface with glowing blue icons for messages and phone calls. The background is a blurred, professional reception area of a tech company. The style is clean, efficient, and welcoming, perfectly suited for a 'Contact' page visual." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCoLBBPj371UiYSGmO6fVGKhbeUkIdFf-7uNgcRFZnGV_o79Lc6LOPvJCcc_ij6F3xy2-Nf47t5nbT-YpsBvKcKutSgG7XfTj5ncP0-eC6gdvSN6XxDO93SJztTbbuqZ2LAUeQBYcLM4gZhSWlUIWFmiG3knnMFx1Gu6R1h29GnK6jkm8I4tEIvARD9xYZ6hR7F_dv9mTHz20NC5cfx7oY0OMH58EcxERKXSaaeQ2lvaFz7hU8QVIwe"/>
<div class="absolute inset-0 bg-on-background/40 group-hover:bg-on-background/20 transition-all"></div>
<div class="absolute bottom-md left-md">
<h4 class="text-headline-md font-bold text-white">Contact</h4>
<p class="text-white/80 text-body-sm">Get in Touch</p>
</div>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-xl bg-on-background relative overflow-hidden">
<div class="px-margin-mobile md:px-margin-desktop max-w-screen-2xl mx-auto text-center relative z-10 space-y-md">
<h2 class="font-headline-xl text-headline-xl text-surface-container-lowest">Let's Build the Future Together</h2>
<p class="text-surface-variant max-w-2xl mx-auto font-body-lg">
Join the world's leading enterprises in redefining the boundaries of automation. Our experts are ready to architect your kinetic future.
</p>
<div class="flex flex-wrap justify-center gap-md pt-lg">
<button class="bg-secondary-container text-on-secondary-container px-xl py-md rounded-lg font-bold text-lg shadow-lg hover:scale-105 transition-transform">Request a Demo</button>
<button class="bg-surface-container-lowest text-on-background px-xl py-md rounded-lg font-bold text-lg hover:bg-surface-dim transition-colors">Contact 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
document.querySelectorAll('.glass-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-4px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
</script>
</body></html>