| 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"/>
<link rel="icon" type="image/png" href="assets/favicon.png"/>
<title>Contact Flowgenix | Kinetic Precision AI</title>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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": "#a93629",
"on-tertiary": "#ffffff",
"secondary-container": "#fd7361",
"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-bg {
background-image:
linear-gradient(to right, rgba(0, 71, 141, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 71, 141, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
}
.glass-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border: 1px solid #E2E8F0;
}
.shadow-kinetic {
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
</style>
</head>
<body class="bg-background text-on-surface font-body-md selection:bg-primary-fixed selection:text-on-primary-fixed">
<!-- TopAppBar -->
<nav 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-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>
<div class="hidden md: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></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>
</div>
<button class="bg-primary-container text-on-primary font-medium px-md py-xs rounded-lg cursor-pointer active:opacity-80 transition-all hover:shadow-lg">
Talk to an Expert
</button>
</div>
</nav>
<main class="w-full">
<!-- Hero Section -->
<section class="relative pt-xl pb-lg kinetic-grid-bg overflow-hidden">
<div class="max-w-screen-2xl mx-auto px-margin-desktop flex flex-col md:flex-row items-end justify-between gap-md">
<div class="max-w-3xl">
<div class="flex items-center gap-xs text-primary mb-sm">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">hub</span>
<span class="font-label-md text-label-md uppercase tracking-widest">Connect with Flowgenix</span>
</div>
<h1 class="font-headline-xl text-headline-xl md:text-[64px] leading-tight text-on-surface mb-sm">
Let's <span class="text-primary">Connect.</span>
</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
Optimize your enterprise architecture with autonomous AI precision. Our specialists are ready to architect your future.
</p>
</div>
<div class="hidden lg:block">
<div class="flex flex-col items-end border-r-4 border-primary pr-sm">
<span class="font-headline-md text-headline-md text-primary font-bold">24/7</span>
<span class="font-body-sm text-body-sm text-on-surface-variant uppercase tracking-tighter">Technical Oversight</span>
</div>
</div>
</div>
</section>
<!-- Main Contact Canvas -->
<section class="max-w-screen-2xl mx-auto px-margin-desktop py-xl">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
<!-- Contact Form Card -->
<div class="lg:col-span-7 bg-surface-container-lowest rounded-xl border border-outline-variant p-lg shadow-kinetic">
<h2 class="font-headline-md text-headline-md text-on-surface mb-lg">Send a Strategic Inquiry</h2>
<form class="space-y-md" onsubmit="event.preventDefault(); alert('Inquiry transmitted to Flowgenix Command Center.');">
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant">FULL NAME</label>
<input class="w-full bg-background border border-outline-variant rounded-lg p-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Archie Techt" type="text"/>
</div>
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant">WORK EMAIL</label>
<input class="w-full bg-background border border-outline-variant rounded-lg p-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="archie@enterprise.com" type="email"/>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-md">
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant">COMPANY</label>
<input class="w-full bg-background border border-outline-variant rounded-lg p-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" placeholder="Global Dynamics" type="text"/>
</div>
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant">INQUIRY TYPE</label>
<select class="w-full bg-background border border-outline-variant rounded-lg p-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none appearance-none">
<option>Enterprise Licensing</option>
<option>Technical Support</option>
<option>Strategic Partnership</option>
<option>Media Inquiry</option>
</select>
</div>
</div>
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant">MESSAGE</label>
<textarea class="w-full bg-background border border-outline-variant rounded-lg p-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none resize-none" placeholder="How can we assist in your AI transformation?" rows="4"></textarea>
</div>
<button class="bg-primary text-on-primary font-medium px-xl py-md rounded-lg w-full md:w-auto hover:bg-primary-container transition-all flex items-center justify-center gap-xs" type="submit">
<span>Transmit Inquiry</span>
<span class="material-symbols-outlined">send</span>
</button>
</form>
</div>
<!-- Info Sidebar & Bento Cards -->
<div class="lg:col-span-5 flex flex-col gap-gutter">
<!-- Direct Channels -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-md">
<div class="bg-surface-container-low p-md rounded-xl border border-outline-variant hover:bg-surface-container transition-colors cursor-pointer group">
<div class="flex items-center gap-xs text-primary mb-xs">
<span class="material-symbols-outlined">shopping_cart</span>
<h3 class="font-headline-md text-headline-md text-[18px]">Sales</h3>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-base">Contact@flowgenix.tech</p>
<p class="font-body-sm text-body-sm text-on-surface-variant font-medium">+91-9818430664</p>
</div>
<div class="bg-surface-container-low p-md rounded-xl border border-outline-variant hover:bg-surface-container transition-colors cursor-pointer group">
<div class="flex items-center gap-xs text-secondary mb-xs">
<span class="material-symbols-outlined">support_agent</span>
<h3 class="font-headline-md text-headline-md text-[18px]">Support</h3>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-base">support@flowgenix.tech</p>
<p class="font-body-sm text-body-sm text-on-surface-variant font-medium">Available 24/7</p>
</div>
<div class="bg-surface-container-low p-md rounded-xl border border-outline-variant hover:bg-surface-container transition-colors cursor-pointer group">
<div class="flex items-center gap-xs text-tertiary mb-xs">
<span class="material-symbols-outlined">handshake</span>
<h3 class="font-headline-md text-headline-md text-[18px]">Partners</h3>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-base">partners@flowgenix.tech</p>
<p class="font-body-sm text-body-sm text-on-surface-variant font-medium">Alliance Program</p>
</div>
<div class="bg-surface-container-low p-md rounded-xl border border-outline-variant hover:bg-surface-container transition-colors cursor-pointer group">
<div class="flex items-center gap-xs text-primary-container mb-xs">
<span class="material-symbols-outlined">work</span>
<h3 class="font-headline-md text-headline-md text-[18px]">Careers</h3>
</div>
<p class="font-body-sm text-body-sm text-on-surface-variant mb-base">careers@flowgenix.tech</p>
<p class="font-body-sm text-body-sm text-on-surface-variant font-medium">Join the Vision</p>
</div>
</div>
<!-- Office Location -->
<div class="bg-inverse-surface text-inverse-on-surface rounded-xl p-lg overflow-hidden relative group">
<div class="relative z-10">
<h3 class="font-headline-md text-headline-md mb-xs">Global HQ</h3>
<p class="font-body-md text-body-md opacity-80 mb-md">
Sector 119,<br/>
Noida, UP-201305
</p>
<div class="flex items-center gap-sm mt-lg">
<button class="flex items-center gap-xs font-label-md text-label-md uppercase tracking-wider text-secondary-fixed hover:underline decoration-2">
<span class="material-symbols-outlined text-[18px]">map</span>
Get Directions
</button>
<span class="h-4 w-[1px] bg-outline opacity-30"></span>
<button class="flex items-center gap-xs font-label-md text-label-md uppercase tracking-wider text-secondary-fixed hover:underline decoration-2">
<span class="material-symbols-outlined text-[18px]">near_me</span>
Visit Office
</button>
</div>
</div>
<div class="absolute -right-12 -bottom-12 opacity-10 scale-150 group-hover:scale-125 transition-transform duration-700 pointer-events-none">
<img class="w-64 h-64 object-cover rounded-full" data-alt="A stylized 3D architectural map of a modern corporate business district in Irvine, California. The aesthetic is clean, light-mode modernism with primary blue accents. Tall glass skyscrapers and lush green corporate campuses are depicted with precision and momentum, using a professional, strategic visual language." data-location="Irvine, California" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDDSxm4U6Jt48_VumeZMlsG2cisXMtWHAPdkc8UUhwg23sHbQvt8L22vLp9w9WBfQHeL3pQJtF0QWeXM_aCO1A2xyrj0VvgLW2iZ3Wq5RWnaR7D2nksVmTIFQIZJi8djHwB5-aq1ru9Sc_QRk8iGR-H7EW0iNtOoyNfJ65t43P5IRETIveIBi02Z3eI8vJN4t3e8FFfwwCrWIEbLSqZjBjfEaXiOizrsc-KYW9js10qIX8SnRfyk23l"/>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="bg-surface-container-low py-xl">
<div class="max-w-screen-2xl mx-auto px-margin-desktop">
<div class="text-center mb-xl">
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-xs">Frequently Asked Questions</h2>
<p class="text-on-surface-variant">Instant answers to common architectural inquiries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-md max-w-5xl mx-auto">
<div class="bg-surface-container-lowest p-md rounded-xl border border-outline-variant shadow-kinetic">
<h4 class="font-headline-md text-headline-md text-[18px] mb-xs">How secure is Flowgenix AI?</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Flowgenix utilizes end-to-end encryption and isolated compute environments, meeting SOC2 Type II and HIPAA compliance standards.</p>
</div>
<div class="bg-surface-container-lowest p-md rounded-xl border border-outline-variant shadow-kinetic">
<h4 class="font-headline-md text-headline-md text-[18px] mb-xs">Can I integrate with legacy ERPs?</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Yes, our Kinetic Precision Connectors allow seamless data synchronization with major legacy platforms including SAP, Oracle, and Microsoft Dynamics.</p>
</div>
<div class="bg-surface-container-lowest p-md rounded-xl border border-outline-variant shadow-kinetic">
<h4 class="font-headline-md text-headline-md text-[18px] mb-xs">What is the typical deployment time?</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">Base implementation takes 4-6 weeks, with full autonomous optimization typically reached within the first quarter of deployment.</p>
</div>
<div class="bg-surface-container-lowest p-md rounded-xl border border-outline-variant shadow-kinetic">
<h4 class="font-headline-md text-headline-md text-[18px] mb-xs">Do you offer on-premise solutions?</h4>
<p class="font-body-sm text-body-sm text-on-surface-variant">While we are cloud-native, we offer Private Cloud deployments for organizations requiring absolute data sovereignty.</p>
</div>
</div>
</div>
</section>
<!-- Demo CTA Section -->
<section class="py-xl relative overflow-hidden bg-primary">
<div class="max-w-screen-2xl mx-auto px-margin-desktop relative z-10 flex flex-col items-center text-center">
<h2 class="font-headline-xl text-headline-xl text-on-primary mb-md">Ready to see Kinetic Precision in action?</h2>
<p class="font-body-lg text-body-lg text-on-primary-container max-w-2xl mb-lg">
Join over 500+ global enterprises leveraging Flowgenix to automate their architectural decision-making. Schedule your personalized demo today.
</p>
<div class="flex flex-col sm:flex-row gap-md">
<button class="bg-on-primary text-primary font-bold px-xl py-md rounded-lg hover:bg-primary-fixed transition-all shadow-xl">
Schedule a Demo
</button>
<button class="border border-on-primary text-on-primary font-medium px-xl py-md rounded-lg hover:bg-on-primary/10 transition-all">
View Product Roadmap
</button>
</div>
</div>
<!-- Decorative Pattern -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent opacity-20"></div>
<div class="grid grid-cols-12 h-full w-full">
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
<div class="border-r border-white/20 h-full"></div>
</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-interaction for form inputs
const inputs = document.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
input.addEventListener('focus', () => {
input.parentElement.querySelector('label').style.color = '#1d5ead';
});
input.addEventListener('blur', () => {
input.parentElement.querySelector('label').style.color = '#424751';
});
});
</script>
</body></html>