| 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>Our Vision | Flowgenix AI</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>
.ai-pattern {
background-image: radial-gradient(circle at 2px 2px, rgba(0, 71, 141, 0.05) 1px, transparent 0);
background-size: 24px 24px;
}
.kinetic-border {
position: relative;
}
.kinetic-border::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #1f5fae;
transition: width 0.3s ease;
}
.kinetic-border:hover::after {
width: 100%;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-background font-body-md">
<!-- TopAppBar Navigation -->
<nav class="w-full top-0 sticky z-50 bg-background/80 backdrop-blur-md 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 text-on-primary px-md py-xs rounded-lg font-medium hover:opacity-90 transition-all cursor-pointer">
Talk to an Expert
</button>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="relative overflow-hidden pt-xl pb-24 ai-pattern">
<div class="max-w-screen-2xl mx-auto px-margin-desktop grid lg:grid-cols-2 gap-xl items-center">
<div class="space-y-md">
<div class="inline-flex items-center gap-xs px-sm py-base bg-surface-container-high rounded-full">
<span class="material-symbols-outlined text-primary text-[18px]">auto_awesome</span>
<span class="text-label-md font-label-md text-primary tracking-widest uppercase">The Corporate Vision</span>
</div>
<h1 class="font-headline-xl text-headline-xl text-on-background leading-tight">
Accelerating the Future of <span class="text-primary">Enterprise Transformation</span>
</h1>
<p class="text-body-lg text-on-surface-variant max-w-xl">
At Flowgenix, we are orchestrating a new era of intelligence. We don't just build AI; we architect the kinetic precision required for the world's most complex organizations to move with unprecedented speed.
</p>
<div class="flex gap-md pt-base">
<button class="bg-primary text-on-primary px-xl py-md rounded-lg font-semibold hover:shadow-lg transition-all">Explore Platform</button>
<button class="flex items-center gap-xs text-primary font-semibold hover:underline">
Watch Vision Video <span class="material-symbols-outlined">play_circle</span>
</button>
</div>
</div>
<div class="relative">
<div class="bg-white rounded-[40px] p-base shadow-2xl border border-outline-variant overflow-hidden aspect-square flex items-center justify-center">
<div class="w-full h-full rounded-[36px] bg-surface-container-low relative">
<img class="w-full h-full object-cover rounded-[36px]" data-alt="A high-tech digital render of a glowing blue architectural network composed of interconnected nodes and thin crystalline lines, floating in a clean white minimalist space. The lighting is sharp and cinematic, emphasizing a sense of corporate stability and advanced AI engineering. The aesthetic is professional, modern, and highly technical with a premium blue and white color palette." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCagMu-GdWu1yByxS_LTVVtsrzrkvoaek2w9hxf9dS3cibHF_UM-QtP8P-HInab4ltkB8jhl250C591L4i8B-3NF693GzjDGGnuBXhRlXpUWB5UrwQazrYkiQbelgdJHCsFf5sHuGcoiLpx1lSgBkryOLs8MI6tpviB14cRpat1K7gkeiCMVnt9RDJDjHk8XqqwylzmVAYFTEoc_JTQYWQ6ojsK4yCn8-AVG0tY5hlLYRuT7DyCMkEK"/>
<!-- Floating Metric Cards -->
<div class="absolute top-md right-md bg-white/90 backdrop-blur p-sm rounded-xl border border-outline-variant shadow-lg animate-bounce duration-[3000ms]">
<div class="flex items-center gap-xs">
<span class="w-2 h-2 rounded-full bg-secondary"></span>
<span class="text-label-md font-label-md text-on-surface">OPTIMIZING</span>
</div>
<div class="text-headline-md font-headline-md text-primary">94.2%</div>
</div>
</div>
</div>
<!-- Decorative Element -->
<div class="absolute -bottom-xs -left-xs w-48 h-48 bg-primary/10 rounded-full blur-3xl -z-10"></div>
</div>
</div>
</section>
<!-- Vision & Mission (Asymmetric Layout) -->
<section class="py-xl bg-surface-container-lowest">
<div class="max-w-screen-2xl mx-auto px-margin-desktop grid md:grid-cols-12 gap-gutter">
<!-- Vision -->
<div class="md:col-span-7 bg-surface-container p-xl rounded-[32px] border border-outline-variant flex flex-col justify-between h-full">
<div>
<h2 class="font-headline-lg text-headline-lg text-primary mb-md">Our Vision</h2>
<p class="text-headline-md font-headline-md leading-relaxed text-on-surface">
"To create an interconnected global enterprise ecosystem where AI acts as the central nervous system, driving autonomous growth and strategic resilience at every scale."
</p>
</div>
<div class="mt-lg flex items-center gap-md">
<div class="flex -space-x-4">
<div class="w-12 h-12 rounded-full border-4 border-white bg-surface-variant"></div>
<div class="w-12 h-12 rounded-full border-4 border-white bg-primary"></div>
<div class="w-12 h-12 rounded-full border-4 border-white bg-tertiary"></div>
</div>
<span class="text-body-sm text-on-surface-variant font-medium">Trusted by 200+ Fortune 500 Leaders</span>
</div>
</div>
<!-- Mission -->
<div class="md:col-span-5 bg-inverse-surface text-white p-xl rounded-[32px] shadow-xl flex flex-col h-full">
<h2 class="font-headline-lg text-headline-lg text-primary-fixed-dim mb-md">Our Mission</h2>
<p class="text-body-lg text-surface-variant">
Empowering architects of change with the tools to automate intuition, optimize operations, and unlock hidden value through Kinetic Precision Architecture.
</p>
<div class="mt-auto pt-lg">
<hr class="border-outline mb-md"/>
<div class="grid grid-cols-2 gap-sm">
<div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">10B+</div>
<div class="text-label-md uppercase tracking-widest text-outline-variant">Data Points Daily</div>
</div>
<div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">40%</div>
<div class="text-label-md uppercase tracking-widest text-outline-variant">Efficiency Gain</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- What We Believe (Bento Grid) -->
<section class="py-xl bg-background">
<div class="max-w-screen-2xl mx-auto px-margin-desktop">
<div class="mb-lg text-center max-w-2xl mx-auto">
<h2 class="font-headline-lg text-headline-lg text-on-background mb-base">What We Believe</h2>
<p class="text-body-md text-on-surface-variant">Fundamental principles that guide our innovation and strategic partnerships.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<!-- Belief 1 -->
<div class="group bg-white p-lg rounded-xl border border-outline-variant hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-md group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white transition-colors" style="font-variation-settings: 'FILL' 1;">neurology</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-background mb-sm">Enterprise AI</h3>
<p class="text-body-md text-on-surface-variant">
Artificial intelligence must be secure, transparent, and vertically integrated into core workflows, not just an auxiliary tool.
</p>
</div>
<!-- Belief 2 -->
<div class="group bg-white p-lg rounded-xl border border-outline-variant hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-md group-hover:bg-secondary transition-colors">
<span class="material-symbols-outlined text-secondary group-hover:text-white transition-colors" style="font-variation-settings: 'FILL' 1;">robot_2</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-background mb-sm">Automation for Every Business</h3>
<p class="text-body-md text-on-surface-variant">
Complexity should never be a barrier. We believe in democratizing high-tier automation for organizations of all sizes.
</p>
</div>
<!-- Belief 3 -->
<div class="group bg-white p-lg rounded-xl border border-outline-variant hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 bg-tertiary/10 rounded-lg flex items-center justify-center mb-md group-hover:bg-tertiary transition-colors">
<span class="material-symbols-outlined text-tertiary group-hover:text-white transition-colors" style="font-variation-settings: 'FILL' 1;">query_stats</span>
</div>
<h3 class="font-headline-md text-headline-md text-on-background mb-sm">Digital Transformation</h3>
<p class="text-body-md text-on-surface-variant">
Transformation is a continuous journey of evolution. Our architecture scales as your ambitions expand globally.
</p>
</div>
</div>
</div>
</section>
<!-- Future Roadmap (Horizontal Timeline) -->
<section class="py-xl bg-inverse-surface text-white overflow-hidden">
<div class="max-w-screen-2xl mx-auto px-margin-desktop">
<h2 class="font-headline-lg text-headline-lg mb-xl text-primary-fixed-dim">Future Roadmap</h2>
<div class="relative">
<!-- Line -->
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-outline hidden md:block"></div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-xl relative">
<!-- Step 1 -->
<div class="space-y-sm bg-inverse-surface z-10">
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center font-bold border-4 border-white mb-md mx-auto md:mx-0">1</div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">Q4 2024</div>
<h4 class="font-bold text-lg">Neural Core Launch</h4>
<p class="text-body-sm text-surface-variant">Initial deployment of our proprietary LLM architecture for legacy systems.</p>
</div>
<!-- Step 2 -->
<div class="space-y-sm bg-inverse-surface z-10">
<div class="w-10 h-10 rounded-full bg-outline flex items-center justify-center font-bold border-4 border-white mb-md mx-auto md:mx-0">2</div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">Q2 2025</div>
<h4 class="font-bold text-lg">Predictive Ops 2.0</h4>
<p class="text-body-sm text-surface-variant">Advanced autonomous decision-making engines for supply chain logistics.</p>
</div>
<!-- Step 3 -->
<div class="space-y-sm bg-inverse-surface z-10">
<div class="w-10 h-10 rounded-full bg-outline flex items-center justify-center font-bold border-4 border-white mb-md mx-auto md:mx-0">3</div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">2026</div>
<h4 class="font-bold text-lg">Quantum Integration</h4>
<p class="text-body-sm text-surface-variant">Expanding processing power with cloud-based quantum hybrid clusters.</p>
</div>
<!-- Step 4 -->
<div class="space-y-sm bg-inverse-surface z-10">
<div class="w-10 h-10 rounded-full bg-outline flex items-center justify-center font-bold border-4 border-white mb-md mx-auto md:mx-0">4</div>
<div class="text-headline-md font-headline-md text-primary-fixed-dim">2027</div>
<h4 class="font-bold text-lg">Universal Interface</h4>
<p class="text-body-sm text-surface-variant">The final evolution of zero-touch enterprise orchestration global networks.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Global Impact (Map Visualization) -->
<section class="py-xl bg-background overflow-hidden">
<div class="max-w-screen-2xl mx-auto px-margin-desktop grid lg:grid-cols-2 gap-xl items-center">
<div class="space-y-md">
<h2 class="font-headline-lg text-headline-lg text-on-background">Global Impact</h2>
<p class="text-body-lg text-on-surface-variant">
Our presence spans across 14 global hubs, managing infrastructure for the world's leading economies. We aren't just local; we are the foundation of global trade and innovation.
</p>
<div class="space-y-sm">
<div class="flex items-center gap-md p-md bg-white rounded-lg border border-outline-variant">
<span class="material-symbols-outlined text-primary text-3xl">public</span>
<div>
<div class="font-bold text-on-background">50+ Countries Connected</div>
<div class="text-body-sm text-on-surface-variant">Real-time data synchronization across borders.</div>
</div>
</div>
<div class="flex items-center gap-md p-md bg-white rounded-lg border border-outline-variant">
<span class="material-symbols-outlined text-secondary text-3xl">eco</span>
<div>
<div class="font-bold text-on-background">Carbon Optimized Ops</div>
<div class="text-body-sm text-on-surface-variant">Reducing data center footprints by 65%.</div>
</div>
</div>
</div>
</div>
<div class="relative h-[400px] bg-surface-container rounded-3xl overflow-hidden border border-outline-variant">
<img class="w-full h-full object-cover opacity-80" data-alt="A sophisticated dark-themed world map with glowing pinpoints in major global cities like New York, London, Tokyo, and Singapore. Delicate, flowing light-traces connect the cities, representing high-speed data flow and enterprise connectivity. The style is sleek, architectural, and uses a professional blue, silver, and dark navy color scheme that aligns with a premium AI brand." data-location="San Francisco" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA11iOlVM3MJBk8QBwO0olsi7mUc7yqdesse08IeYxg1tw9C2VRkmVcX1Ad4kIi7kPahOUOg5Zwjvsd_iJORa1ZK2Kzf9IcFyRoiE7u_4Lr6UeamQzBrCwdYTIiwZ90XZ2U0qCf9durTDZ5yc4iYDhsQ6z2jrFawgjHXjOyT_R_rR4l_yCh8-wCItAxDSrDKUu9nyMLHbBgBFJaN3lZz5AhYR-R_8hv08y7u20KWVEsQ9n2xePDnYib"/>
<div class="absolute inset-0 bg-gradient-to-t from-background/40 to-transparent pointer-events-none"></div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-xl px-margin-desktop">
<div class="max-w-screen-xl mx-auto bg-primary text-on-primary p-xl rounded-[40px] text-center space-y-md relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32 blur-3xl"></div>
<h2 class="font-headline-xl text-headline-xl relative z-10">Ready to Architect Your Future?</h2>
<p class="text-body-lg text-on-primary-container max-w-2xl mx-auto relative z-10">Join the leaders who are already leveraging Flowgenix to redefine what is possible in their industry.</p>
<div class="flex justify-center gap-md pt-md relative z-10">
<button class="bg-white text-primary px-xl py-md rounded-lg font-bold hover:bg-surface-variant transition-all">Request Demo</button>
<button class="border border-white/30 text-white px-xl py-md rounded-lg font-bold hover:bg-white/10 transition-all">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-interaction for cards
document.querySelectorAll('.group').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-4px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0px)';
});
});
// Sticky header opacity change
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('shadow-md');
} else {
nav.classList.remove('shadow-md');
}
});
</script>
</body></html>