Загрузка...
HTML/CSS шаблон лендинга для креативного агентства. Современный дизайн, идеально подходит для студий, фрилансеров и портфолио.
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio — Design & Digital Experiences</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<style>
/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
/* Typography Setup */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Space Grotesk', sans-serif; }
/* Custom Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Animation for Hero */
@keyframes heroFade {
0%, 20% { opacity: 1; transform: scale(1.05); }
25%, 95% { opacity: 0; transform: scale(1); }
100% { opacity: 1; transform: scale(1.05); }
}
.hero-slide {
opacity: 0;
animation: heroFade 18s ease-in-out infinite;
will-change: opacity, transform;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
/* Smooth Scrolling */
html { scroll-behavior: smooth; }
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }</style></head>
<body class="antialiased selection:bg-[#D6FF4F] selection:text-[#0E0F11] text-[#A1A1A6] bg-[#0E0F11]">
<!-- Background (component) added by Aura -->
<div class="aura-background-component fixed top-0 w-full h-screen -z-10" data-alpha-mask="80" style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent)"><div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="NMlvqnkICwYYJ6lYb064" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div></div>
<!-- Main Wrapper -->
<div class="max-w-[1600px] mx-auto min-h-screen bg-[#0E0F11] relative overflow-hidden">
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="fixed inset-0 bg-[#0E0F11]/95 backdrop-blur-xl z-[100] hidden opacity-0 transition-opacity duration-300 flex flex-col items-center justify-center">
<button id="close-menu-btn" class="absolute top-6 right-6 p-2 text-[#F5F5F5]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:x" data-width="32" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"></path>
</svg>
</button>
<nav class="flex flex-col gap-8 text-center text-3xl font-heading font-medium tracking-tight text-[#F5F5F5]">
<a href="#" class="hover:text-[#D6FF4F] transition-colors">Work</a>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Services
</a>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">Studio</a>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">Journal</a>
<a href="#" class="mt-6 inline-flex items-center justify-center rounded-full bg-[#F5F5F5] hover:bg-[#D6FF4F] text-[#0E0F11] px-8 py-3 text-sm font-semibold uppercase tracking-wider transition-colors">
Start a Project
</a>
<span class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]">
Brief form · 48h response
</span>
</nav>
</div>
<!-- Floating Navigation -->
<div class="fixed flex z-50 pt-6 pr-4 pl-4 top-0 right-0 left-0 justify-center">
<nav class="flex shadow-black/50 bg-[#15171B]/80 w-full max-w-[1500px] border-[#23252B] border rounded-full pt-3 pr-6 pb-3 pl-6 shadow-2xl backdrop-blur-md items-center justify-between">
<!-- Desktop Left Nav -->
<div class="hidden md:flex gap-8 items-center">
<a href="/work" class="hover:text-[#D6FF4F] transition-colors text-sm font-medium text-[#F5F5F5]">
Work
</a>
<a href="/services" class="hover:text-[#F5F5F5] transition-colors text-sm font-medium text-[#A1A1A6]">
Services
</a>
<a href="/studio" class="hover:text-[#F5F5F5] transition-colors text-sm font-medium text-[#A1A1A6]">
Studio
</a>
<a href="/journal" class="hover:text-[#F5F5F5] transition-colors text-sm font-medium text-[#A1A1A6]">
Journal
</a>
</div>
<!-- Mobile Hamburger -->
<button id="open-menu-btn" class="md:hidden p-1 text-[#F5F5F5]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:menu" data-width="24" data-stroke-width="1.5">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5h16M4 12h16M4 19h16"></path>
</svg>
</button>
<!-- Logo -->
<div class="absolute left-1/2 -translate-x-1/2">
<a href="/home" class="flex items-center gap-2">
<div class="w-3 h-3 bg-[#D6FF4F] rounded-full"></div>
<span class="uppercase text-lg font-semibold text-[#F5F5F5] tracking-tight font-heading">
STUDIO
</span>
</a>
</div>
<!-- Desktop Right Nav -->
<div class="hidden md:flex gap-8 items-center">
<a href="/project" class="hover:bg-[#D6FF4F] uppercase transition-colors text-xs font-semibold text-[#0E0F11] tracking-wider bg-[#F5F5F5] rounded-full pt-2 pr-5 pb-2 pl-5">
Start a Project
</a>
</div>
<!-- Mobile User Icon (Placeholder for contact) -->
</nav>
</div>
<main class="w-full mt-24">
<!-- Hero Section -->
<div class="pt-10 px-4 pb-10 md:px-8 md:pt-12 md:pb-12 max-w-[1550px] mx-auto">
<h1 class="text-[14vw] md:text-[11vw] leading-[0.85] font-heading font-medium text-[#F5F5F5] tracking-tight text-center w-full mb-8 sm:mb-12 break-words">
Visual
<br>
<span class="text-[#23252B] stroke-text">Language</span>
</h1>
<div class="flex flex-col sm:flex-row items-start sm:items-end justify-between gap-6 sm:gap-8 text-sm sm:text-base text-[#A1A1A6] mb-8 md:px-4">
<p class="leading-relaxed max-w-xs sm:max-w-sm">
<span class="block text-[#F5F5F5]">
Digital-first branding agency.
</span>
<span class="block">
Crafting identities for future-tech leaders.
</span>
</p>
<p class="leading-relaxed text-left sm:text-right max-w-xs sm:max-w-sm">
<span class="block text-[#F5F5F5]">
We build systems, not just pages.
</span>
<span class="block">London based, globally connected.</span>
</p>
</div>
<p class="text-[11px] uppercase sm:text-xs sm:text-left md:px-4 md:mb-4 md:mt-4 text-[#A1A1A6]/70 tracking-widest text-center mt-1 mb-4 px-4">
Working with funded startups, scale-ups, and ambitious brands
</p>
<!-- Hero Slider -->
<div class="relative w-full h-[50vh] sm:h-[60vh] md:h-[75vh] overflow-hidden group rounded-[2.5rem] border border-[#23252B] bg-[#15171B]">
<div id="hero-slideshow" class="absolute inset-0 w-full h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/68c70ed3-3617-478c-b904-4a86ef50ff12_3840w.webp" class="hero-slide absolute inset-0 w-full h-full object-cover opacity-80" alt="Abstract 3D Design" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/feda1066-8c70-434c-9899-9f49ec90da32_3840w.webp" class="hero-slide absolute inset-0 w-full h-full object-cover opacity-80" alt="Liquid Metal" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ad12226b-9c56-48b6-81b8-bf1ef9f0cb87_3840w.webp" class="hero-slide absolute inset-0 w-full h-full object-cover opacity-80" alt="Dark Architecture" style="">
</div>
<div class="absolute bottom-6 right-6 md:bottom-10 md:right-10 z-10">
<button class="bg-[#D6FF4F] text-[#0E0F11] pl-6 pr-2 py-2 rounded-full flex items-center gap-4 text-xs font-bold uppercase tracking-widest hover:bg-[#F5F5F5] transition-all hover:pr-6 hover:pl-6 duration-300">
View Showreel
<div class="w-8 h-8 bg-[#0E0F11] rounded-full flex items-center justify-center text-[#D6FF4F]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 24 24" data-icon="lucide:play" data-width="12" data-stroke-width="3">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<!-- Categories Section (Was Collections) -->
<div class="py-12 px-4 md:px-8 max-w-[1550px] mx-auto">
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
<div>
<span class="text-[10px] font-mono text-[#D6FF4F] block mb-4 border-b border-[#23252B] w-fit pb-1 tracking-widest">
01 — EXPERTISE
</span>
<h2 class="text-3xl md:text-5xl text-[#F5F5F5] font-heading font-medium tracking-tight leading-tight">
Core Capabilities
</h2>
<a href="#" class="mt-8 inline-flex items-center gap-3 bg-[#23252B] px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-widest text-[#F5F5F5] transition-colors hover:bg-[#D6FF4F] hover:text-[#0E0F11]">
All Services
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path>
</svg>
</a>
</div>
<p class="leading-relaxed text-[#A1A1A6] max-w-sm md:text-right">
<span class="block">Holistic design systems for brands</span>
<span class="block">ready to define their category.</span>
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<!-- Card 1 -->
<a href="#" class="group relative aspect-[3/4] overflow-hidden rounded-3xl border border-[#23252B] bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/46281a5c-f67e-419c-9644-02c7d3b25deb_800w.webp" class="opacity-60 group-hover:opacity-90 group-hover:scale-110 transition-all duration-700 w-full h-full object-cover" style="">
<div class="bg-gradient-to-t from-[#0E0F11] via-transparent to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-0 left-0 p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-[#D6FF4F] mb-1 block">
Category
</span>
<h3 class="text-xl md:text-2xl font-heading font-medium text-[#F5F5F5]">
Branding
</h3>
<p class="mt-2 text-[11px] leading-relaxed text-[#A1A1A6] opacity-100 sm:opacity-0 sm:translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
Positioning, identity systems, brand architecture
</p>
</div>
</a>
<!-- Card 2 -->
<a href="#" class="group relative aspect-[3/4] overflow-hidden rounded-3xl border border-[#23252B] bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/bde9069b-1960-4868-9138-c74f2a623acd_800w.webp" class="opacity-60 group-hover:opacity-90 group-hover:scale-110 transition-all duration-700 w-full h-full object-cover" style="">
<div class="absolute inset-0 bg-gradient-to-t from-[#0E0F11] via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-[#D6FF4F] mb-1 block">
Category
</span>
<h3 class="text-xl md:text-2xl font-heading font-medium text-[#F5F5F5]">
Product
</h3>
<p class="mt-2 text-[11px] leading-relaxed text-[#A1A1A6] opacity-100 sm:opacity-0 sm:translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
UX strategy, design systems, SaaS interfaces
</p>
</div>
</a>
<!-- Card 3 -->
<a href="#" class="group relative aspect-[3/4] overflow-hidden rounded-3xl border border-[#23252B] bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/039a9170-346c-47e5-8218-e281b3d525dd_800w.webp" class="opacity-60 group-hover:opacity-90 group-hover:scale-110 transition-all duration-700 w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-[#0E0F11] via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-[#D6FF4F] mb-1 block">
Category
</span>
<h3 class="text-xl md:text-2xl font-heading font-medium text-[#F5F5F5]">
Motion
</h3>
<p class="mt-2 text-[11px] leading-relaxed text-[#A1A1A6] opacity-100 sm:opacity-0 sm:translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
Brand motion, launch assets, micro-interactions
</p>
</div>
</a>
<!-- Card 4 -->
<a href="#" class="group relative aspect-[3/4] overflow-hidden rounded-3xl border border-[#23252B] bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/981546c5-4246-4dec-90f8-8fba1e9dd71d_800w.webp" class="opacity-60 group-hover:opacity-90 group-hover:scale-110 transition-all duration-700 w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-[#0E0F11] via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 w-full">
<span class="text-[10px] font-sans uppercase tracking-widest text-[#D6FF4F] mb-1 block">
Category
</span>
<h3 class="text-xl md:text-2xl font-heading font-medium text-[#F5F5F5]">
Web
</h3>
<p class="mt-2 text-[11px] leading-relaxed text-[#A1A1A6] opacity-100 sm:opacity-0 sm:translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
High-performance websites, marketing platforms
</p>
</div>
</a>
</div>
</div>
<!-- Filter/Search Bar (Replaced Search) -->
<div class="sticky top-24 z-40 px-4 md:px-8 py-4 mb-8">
<div class="max-w-[1550px] mx-auto">
<div class="flex flex-col md:flex-row bg-[#15171B]/90 border-[#23252B] border rounded-3xl pt-2 pr-2 pb-2 pl-2 shadow-xl backdrop-blur-xl gap-x-4 gap-y-4 items-center justify-between">
<div class="flex items-center px-4 w-full md:w-auto">
<span class="text-sm font-heading font-medium text-[#F5F5F5] whitespace-nowrap mr-4">
Filter Projects
</span>
</div>
<div class="flex flex-col sm:flex-row w-full gap-2 md:contents">
<!-- Dropdown 1 -->
<div class="flex items-center bg-[#0E0F11] rounded-full px-4 py-2 gap-3 w-full sm:w-auto md:w-auto border border-[#23252B] focus-within:border-[#D6FF4F] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:layers" data-width="14">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
</g>
</svg>
<input type="text" placeholder="Discipline" class="bg-transparent border-none text-xs font-medium text-[#F5F5F5] placeholder-[#52525B] focus:outline-none w-full sm:w-28 uppercase tracking-wide">
</div>
<!-- Dropdown 2 -->
<div class="flex items-center bg-[#0E0F11] rounded-full px-4 py-2 gap-3 w-full sm:w-auto md:w-auto border border-[#23252B] focus-within:border-[#D6FF4F] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:clock" data-width="14">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M12 6v6l4 2"></path>
<circle cx="12" cy="12" r="10"></circle>
</g>
</svg>
<input type="text" placeholder="Timeline" class="bg-transparent border-none text-xs font-medium text-[#F5F5F5] placeholder-[#52525B] focus:outline-none w-full sm:w-28 uppercase tracking-wide">
</div>
<!-- Dropdown 3 -->
<div class="flex items-center bg-[#0E0F11] rounded-full px-4 py-2 gap-3 w-full sm:w-auto md:w-auto border border-[#23252B] focus-within:border-[#D6FF4F] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="14" height="14" viewBox="0 0 24 24" data-icon="lucide:wallet" data-width="14">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"></path>
</g>
</svg>
<input type="text" placeholder="Budget" class="bg-transparent border-none text-xs font-medium text-[#F5F5F5] placeholder-[#52525B] focus:outline-none w-full sm:w-28 uppercase tracking-wide">
</div>
<button class="px-6 py-2 bg-[#D6FF4F] text-[#0E0F11] rounded-full text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-2 hover:bg-[#F5F5F5] transition-colors w-full md:w-auto">
Search
</button>
</div>
</div>
</div>
</div>
<!-- Case Studies Grid (Was Listings) -->
<div class="border-t border-[#23252B] bg-[#0E0F11]">
<div class="max-w-[1550px] mx-auto grid grid-cols-1 md:grid-cols-12">
<!-- Sidebar Info -->
<div class="md:col-span-3 p-6 md:p-8 md:border-r border-[#23252B] flex flex-col justify-between h-auto md:min-h-[600px]">
<div class="md:hidden mb-6">
<p class="text-sm text-[#A1A1A6] leading-relaxed">
<span class="text-[#F5F5F5]">
Selected engagements from the last 24 months
</span>
<span class="block">
across fintech, SaaS, and culture-driven brands.
</span>
</p>
<p class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
All projects shown are client-approved
</p>
</div>
<div class="md:sticky md:top-48">
<span class="text-[10px] font-mono text-[#D6FF4F] block mb-4 border-b border-[#23252B] w-fit pb-1 tracking-widest">
02 — WORK
</span>
<h2 class="text-4xl md:text-5xl font-heading font-medium tracking-tight leading-[0.95] mb-4 text-[#F5F5F5]">
Selected Case Studies
</h2>
<p class="text-sm text-[#A1A1A6] leading-relaxed max-w-[240px]">
<span class="text-[#F5F5F5]">
Selected engagements from the last 24 months
</span>
across fintech, SaaS, and culture-driven brands.
</p>
<p class="mt-4 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
All projects shown are client-approved
</p>
<div class="mt-12 w-full h-px bg-[#23252B] hidden md:block"></div>
</div>
<div class="mt-8 md:mt-0">
<button class="w-full bg-[#15171B] border border-[#23252B] rounded-full text-[#F5F5F5] px-6 py-4 flex items-center justify-between gap-4 text-xs font-semibold uppercase tracking-widest hover:border-[#D6FF4F] hover:text-[#D6FF4F] transition-colors group">
View Archive
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="16">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path>
</svg>
</button>
</div>
</div>
<!-- Listings -->
<div class="md:col-span-9 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-px bg-[#23252B]">
<!-- Case Study 1 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c55b9091-b0ca-4842-92d7-7be239f76440_800w.webp" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover">
<div class="absolute top-3 right-3 bg-[#0E0F11]/80 backdrop-blur border border-[#23252B] px-3 py-1 rounded-full text-[10px] font-medium text-[#F5F5F5] uppercase tracking-wider">
Featured
</div>
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Nexus Protocol
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
Fintech / Web3
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">4 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$50k — $80k</span>
</div>
</div>
<!-- Case Study 2 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d3d4d588-f8cc-4129-8a9b-d0f004d15ab4_800w.webp" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Aether Labs
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
AI Research
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">8 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$100k+</span>
</div>
</div>
<!-- Case Study 3 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3d80181f-00cd-4e1e-9a4b-d2a9c4811268_800w.webp" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover" style="">
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Mono Objects
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
E-Commerce
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">6 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$30k — $50k</span>
</div>
</div>
<!-- Case Study 4 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ce5b89c0-9457-4f7b-8448-33b0e21f643a_800w.webp" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover">
<div class="absolute top-3 right-3 bg-[#0E0F11]/80 backdrop-blur border border-[#23252B] px-3 py-1 rounded-full text-[10px] font-medium text-[#F5F5F5] uppercase tracking-wider">
Awarded
</div>
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Lumina
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
SaaS Platform
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">12 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$80k — $120k</span>
</div>
</div>
<!-- Case Study 5 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/809511d8-3f42-4b75-a11a-ae6515af0d22_800w.webp" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Carbon
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
Sustainability
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">5 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$40k — $60k</span>
</div>
</div>
<!-- Case Study 6 -->
<div class="group cursor-pointer bg-[#0E0F11] p-6 hover:bg-[#15171B] transition-colors">
<div class="relative aspect-[4/3] bg-[#15171B] rounded-2xl overflow-hidden mb-5 border border-[#23252B]">
<img src="https://images.unsplash.com/photo-1515462277126-2dd0c162007a?q=80&w=1600&auto=format&fit=crop" class="opacity-80 group-hover:scale-110 transition-transform duration-700 w-full h-full object-cover">
</div>
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5] tracking-tight">
Vanguard
</h3>
<p class="uppercase text-[10px] text-[#A1A1A6] tracking-widest">
Architecture
</p>
</div>
</div>
<div class="flex justify-between items-center text-xs text-[#52525B] mt-4 pt-4 border-t border-[#23252B]">
<span class="font-medium text-[#A1A1A6]">10 Weeks</span>
<span class="text-[#F5F5F5] font-medium">$90k+</span>
</div>
</div>
</div>
</div>
</div>
<!-- Process Section (Was How It Works) -->
<div class="border-t border-[#23252B] bg-[#0E0F11] py-24 px-6">
<div class="max-w-5xl mx-auto text-center">
<span class="block text-[10px] text-[#D6FF4F] font-mono w-fit border-b border-[#23252B] mx-auto mb-8 pb-1 tracking-widest">
03 — METHODOLOGY
</span>
<h2 class="text-4xl md:text-5xl font-medium font-heading text-[#F5F5F5] tracking-tight mb-16">
Precision in Process
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
<!-- Connector Line -->
<div class="hidden md:block absolute top-[28px] left-0 right-0 h-px border-t border-dashed border-[#23252B] z-0"></div>
<div class="flex flex-col items-center gap-4 relative z-10 group">
<div class="w-14 h-14 rounded-full bg-[#15171B] border border-[#23252B] flex items-center justify-center text-[#A1A1A6] group-hover:text-[#D6FF4F] group-hover:border-[#D6FF4F] transition-all">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:telescope" data-width="24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="m10.065 12.493l-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44m-2.875 6.493l4.332-.924M16 21l-3.105-6.21"></path>
<path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455zM6.158 8.633l1.114 4.456M8 21l3.105-6.21"></path>
<circle cx="12" cy="13" r="2"></circle>
</g>
</svg>
</div>
<h3 class="text-xl font-heading font-medium text-[#F5F5F5]">
Strategy
</h3>
<p class="text-[#A1A1A6] text-sm leading-relaxed max-w-[240px]">
<span class="block">We challenge assumptions,</span>
<span class="block">not just collect requirements.</span>
</p>
</div>
<div class="flex flex-col items-center gap-4 relative z-10 group">
<div class="w-14 h-14 rounded-full bg-[#15171B] border border-[#23252B] flex items-center justify-center text-[#A1A1A6] group-hover:text-[#D6FF4F] group-hover:border-[#D6FF4F] transition-all">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:pen-tool" data-width="24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"></path>
<path d="m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286"></path>
<circle cx="11" cy="11" r="2"></circle>
</g>
</svg>
</div>
<h3 class="text-xl font-heading font-medium text-[#F5F5F5]">
Design
</h3>
<p class="text-[#A1A1A6] text-sm leading-relaxed max-w-[240px]">
<span class="block">Systems first,</span>
<span class="block">screens second.</span>
</p>
</div>
<div class="flex flex-col items-center gap-4 relative z-10 group">
<div class="w-14 h-14 rounded-full bg-[#15171B] border border-[#23252B] flex items-center justify-center text-[#A1A1A6] group-hover:text-[#D6FF4F] group-hover:border-[#D6FF4F] transition-all">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:code-2" data-width="24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 16l4-4l-4-4M6 8l-4 4l4 4m8.5-12l-5 16"></path>
</svg>
</div>
<h3 class="text-xl font-heading font-medium text-[#F5F5F5]">
Develop
</h3>
<p class="text-[#A1A1A6] text-sm leading-relaxed max-w-[240px]">
<span class="block">Built for scale,</span>
<span class="block">not demos.</span>
</p>
</div>
</div>
</div>
</div>
<!-- Studio Philosophy (Was Value Proposition) -->
<div class="border-t border-[#23252B] max-w-[1550px] mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-12">
<!-- Text Area -->
<div class="lg:col-span-5 p-8 md:p-16 lg:border-r border-[#23252B] flex flex-col justify-center bg-[#0E0F11]">
<div class="max-w-lg">
<span class="text-[10px] font-mono text-[#D6FF4F] block mb-6 border-b border-[#23252B] w-fit pb-1 tracking-widest">
04 — STUDIO PHILOSOPHY
</span>
<h2 class="text-3xl md:text-5xl font-heading font-medium tracking-tight mb-4 text-[#F5F5F5]">
The Studio Standard
</h2>
<p class="text-xl md:text-2xl font-heading font-medium tracking-tight text-[#F5F5F5]/90 mb-8">
Good design is quiet. Bad design is expensive.
</p>
<p class="text-lg text-[#A1A1A6] mb-12 leading-relaxed">
We believe in design that serves a function. No fluff, no
templates. Just rigorous attention to detail and a commitment
to future-proof aesthetics.
</p>
<div class="space-y-10">
<div class="flex gap-5 group">
<div class="shrink-0 text-[#23252B] group-hover:text-[#D6FF4F] transition-colors mt-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:scan-face" data-width="24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2m5-3s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01"></path>
</svg>
</div>
<div>
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#F5F5F5] mb-2">
User Centric
</h3>
<p class="text-sm text-[#A1A1A6] leading-relaxed">
Every pixel is placed with intent. We design for the
human on the other side of the screen.
</p>
</div>
</div>
<div class="flex gap-5 group">
<div class="shrink-0 text-[#23252B] group-hover:text-[#D6FF4F] transition-colors mt-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:diamond" data-width="24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z"></path>
</svg>
</div>
<div>
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#F5F5F5] mb-2">
Pixel Perfection
</h3>
<p class="text-sm text-[#A1A1A6] leading-relaxed">
We obsess over the details that others miss. Typography,
spacing, and micro-interactions.
</p>
</div>
</div>
<div class="flex gap-5 group">
<div class="shrink-0 text-[#23252B] group-hover:text-[#D6FF4F] transition-colors mt-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" data-icon="lucide:zap" data-width="24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
</svg>
</div>
<div class="">
<h3 class="text-sm font-bold font-sans uppercase tracking-widest text-[#F5F5F5] mb-2">
Performance First
</h3>
<p class="leading-relaxed text-sm text-[#A1A1A6]" style="">
Beauty means nothing if it doesn't load instantly. We
optimize for speed and efficiency.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Images Grid -->
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-px bg-[#23252B]">
<div class="relative overflow-hidden group h-[400px] sm:h-auto bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a795a8d9-4bac-4f56-b06c-0cfaba3dbc9a_1600w.webp" class="group-hover:scale-105 transition-transform duration-700 opacity-60 w-full h-full object-cover">
<div class="absolute bottom-6 left-6 bg-[#0E0F11]/80 backdrop-blur px-4 py-2 rounded-full text-[10px] text-[#F5F5F5] font-mono border border-[#23252B]">
Fig. 01 — Workspace
</div>
</div>
<div class="grid grid-rows-2 gap-px">
<div class="relative overflow-hidden group h-[300px] sm:h-auto bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b9fdfc28-8272-467a-b305-f09454abb35a_1600w.webp" class="group-hover:scale-105 transition-transform duration-700 opacity-60 w-full h-full object-cover" style="">
<div class="absolute bottom-6 left-6 bg-[#0E0F11]/80 backdrop-blur px-4 py-2 rounded-full text-[10px] text-[#F5F5F5] font-mono border border-[#23252B]">
Fig. 02 — Materials
</div>
</div>
<div class="relative overflow-hidden group h-[300px] sm:h-auto bg-[#15171B]">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3a6e12d2-345b-4681-a0ae-d817646753f8_1600w.webp" class="group-hover:scale-105 transition-transform duration-700 opacity-60 w-full h-full object-cover" style="">
<div class="absolute bottom-6 left-6 bg-[#0E0F11]/80 backdrop-blur px-4 py-2 rounded-full text-[10px] text-[#F5F5F5] font-mono border border-[#23252B]">
Fig. 03 — Output
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonials (Was Inspiration) -->
<div class="border-t border-[#23252B] bg-[#0E0F11] py-24 px-6 md:px-8">
<div class="max-w-[1550px] mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
<div class="lg:col-span-4">
<span class="text-[10px] font-mono text-[#D6FF4F] block mb-4 border-b border-[#23252B] w-fit pb-1 tracking-widest">
05 — FIT
</span>
<h2 class="text-3xl md:text-5xl font-heading font-medium tracking-tight text-[#F5F5F5] mb-6">
Who We Work With
</h2>
<p class="text-[#A1A1A6] text-sm leading-relaxed mb-8">
We build partnerships, not just pages. We are selective to
ensure we deliver maximum impact for teams ready to scale.
</p>
</div>
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-[#15171B] border border-[#23252B] rounded-3xl p-8 flex flex-col h-full">
<div class="flex items-center gap-3 mb-6">
<div class="w-8 h-8 rounded-full bg-[#D6FF4F]/10 flex items-center justify-center text-[#D6FF4F]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check">
<path d="M20 6 9 17 4 12"></path>
</svg>
</div>
<h3 class="text-lg font-heading font-medium text-[#F5F5F5]">
Good Fit
</h3>
</div>
<ul class="space-y-4 flex-1">
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#D6FF4F] shrink-0"></span>
<span class="text-sm text-[#A1A1A6] leading-relaxed">
with product-market clarity
</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#D6FF4F] shrink-0"></span>
<span class="text-sm text-[#A1A1A6] leading-relaxed">
preparing for launch or rebrand
</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#D6FF4F] shrink-0"></span>
<span class="text-sm text-[#A1A1A6] leading-relaxed">
who value systems over trends
</span>
</li>
</ul>
</div>
<div class="bg-[#0E0F11] border border-[#23252B] rounded-3xl p-8 flex flex-col h-full opacity-60 hover:opacity-100 transition-opacity">
<div class="flex items-center gap-3 mb-6">
<div class="w-8 h-8 rounded-full bg-[#23252B] flex items-center justify-center text-[#A1A1A6]">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
<path d="M18 6 6 18"></path>
<path d="M6 6 18 18"></path>
</svg>
</div>
<h3 class="text-lg font-heading font-medium text-[#A1A1A6]">
Not a Fit
</h3>
</div>
<ul class="space-y-4 flex-1">
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#23252B] shrink-0"></span>
<span class="text-sm text-[#52525B] leading-relaxed">
One-off logo requests
</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#23252B] shrink-0"></span>
<span class="text-sm text-[#52525B] leading-relaxed">
Tight overnight deadlines
</span>
</li>
<li class="flex items-start gap-3">
<span class="mt-2 w-1.5 h-1.5 rounded-full bg-[#23252B] shrink-0"></span>
<span class="text-sm text-[#52525B] leading-relaxed">
Design without strategic context
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bg-[#15171B] border-t border-[#23252B] py-20 px-4 md:px-8">
<div class="max-w-6xl mx-auto">
<div class="flex flex-col text-center pb-12 items-center justify-center">
<span class="block text-[10px] text-[#D6FF4F] font-mono w-fit border-b border-[#23252B] mb-4 pb-1 tracking-widest">
06 — CLIENT VOICES
</span>
</div>
<div class="relative min-h-[500px]">
<!-- Slide 1 -->
<div class="guest-story-slide transition-opacity duration-500 ease-in-out opacity-100 z-10 grid grid-cols-1 md:grid-cols-12 gap-8 items-center bg-[#0E0F11] rounded-[2rem] border border-[#23252B] p-6 md:p-12">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] rounded-2xl overflow-hidden border border-[#23252B] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d3da1789-0f7a-4fbc-b7b6-606f9b85b083_3840w.jpg?w=800&q=80" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500">
</div>
</div>
<div class="md:col-span-7 flex flex-col justify-center">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:quote" data-width="32">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
</svg>
</div>
<blockquote class="text-2xl md:text-4xl font-heading leading-tight text-[#F5F5F5] mb-8 font-semibold">
"They didn't just redesign our website; they reimagined how
we communicate as a brand."
</blockquote>
<div>
<div class="text-[#F5F5F5] font-semibold text-lg">
Alex Fast
</div>
<div class="text-[#A1A1A6] text-sm uppercase tracking-widest mt-1">
CTO, Nexus Protocol
</div>
<div class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
Series A fintech · 6-week engagement
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="guest-story-slide absolute top-0 left-0 w-full transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 grid grid-cols-1 md:grid-cols-12 gap-8 items-center bg-[#0E0F11] rounded-[2rem] border border-[#23252B] p-6 md:p-12">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] rounded-2xl overflow-hidden border border-[#23252B] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/bc6f2c9a-f51b-4d76-a0af-37c36400e46b_3840w.jpg?w=800&q=80" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500">
</div>
</div>
<div class="md:col-span-7 flex flex-col justify-center">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:quote" data-width="32">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
</svg>
</div>
<blockquote class="text-2xl md:text-4xl font-heading leading-tight text-[#F5F5F5] mb-8 font-semibold">
"The attention to detail is unmatched. Our conversion rates
doubled within a month of launch."
</blockquote>
<div>
<div class="text-[#F5F5F5] font-semibold text-lg">
Sarah Jenkins
</div>
<div class="text-[#A1A1A6] text-sm uppercase tracking-widest mt-1">
CMO, Lumina SaaS
</div>
<div class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
SaaS rebrand · Global launch
</div>
</div>
</div>
</div>
<div class="guest-story-slide absolute top-0 left-0 w-full transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 grid grid-cols-1 md:grid-cols-12 gap-8 items-center bg-[#0E0F11] rounded-[2rem] border border-[#23252B] p-6 md:p-12">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] rounded-2xl overflow-hidden border border-[#23252B] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f84e0ac4-082e-4160-8877-3043e2a8b63a_3840w.jpg?w=800&q=80" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" alt="Client portrait">
</div>
</div>
<div class="md:col-span-7 flex flex-col justify-center">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:quote" data-width="32">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
</svg>
</div>
<blockquote class="text-2xl md:text-4xl font-heading leading-tight text-[#F5F5F5] mb-8 font-semibold">
"They moved fast, asked the right questions, and delivered a
design system our team actually uses."
</blockquote>
<div>
<div class="text-[#F5F5F5] font-semibold text-lg">
Maya Patel
</div>
<div class="text-[#A1A1A6] text-sm uppercase tracking-widest mt-1">
Head of Product, Aether Labs
</div>
<div class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
AI research · Design system rollout
</div>
</div>
</div>
</div>
<div class="guest-story-slide absolute top-0 left-0 w-full transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 grid grid-cols-1 md:grid-cols-12 gap-8 items-center bg-[#0E0F11] rounded-[2rem] border border-[#23252B] p-6 md:p-12">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] rounded-2xl overflow-hidden border border-[#23252B] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/61711827-1dac-47d1-adf8-adb0cf8dd596_3840w.webp?w=800&q=80" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" alt="Client portrait">
</div>
</div>
<div class="md:col-span-7 flex flex-col justify-center">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:quote" data-width="32">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
</svg>
</div>
<blockquote class="text-2xl md:text-4xl font-heading leading-tight text-[#F5F5F5] mb-8 font-semibold">
"From discovery to launch, everything felt intentional. The
new site finally matches our product quality."
</blockquote>
<div>
<div class="text-[#F5F5F5] font-semibold text-lg">
Jordan Lee
</div>
<div class="text-[#A1A1A6] text-sm uppercase tracking-widest mt-1">
Founder, Mono Objects
</div>
<div class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
E-commerce · High-performance build
</div>
</div>
</div>
</div>
<div class="guest-story-slide absolute top-0 left-0 w-full transition-opacity duration-500 ease-in-out opacity-0 pointer-events-none z-0 grid grid-cols-1 md:grid-cols-12 gap-8 items-center bg-[#0E0F11] rounded-[2rem] border border-[#23252B] p-6 md:p-12">
<div class="md:col-span-5 h-full">
<div class="aspect-[4/5] rounded-2xl overflow-hidden border border-[#23252B] relative h-full">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c547d889-f49f-4ac7-abd8-c889b4b523d5_3840w.jpg?w=800&q=80" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" alt="Client portrait">
</div>
</div>
<div class="md:col-span-7 flex flex-col justify-center">
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="32" height="32" viewBox="0 0 24 24" data-icon="lucide:quote" data-width="32">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2zM5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1a6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"></path>
</svg>
</div>
<blockquote class="text-2xl md:text-4xl font-heading leading-tight text-[#F5F5F5] mb-8 font-semibold">
"Clear communication, strong taste, and a process that kept
stakeholders aligned. We'd hire them again."
</blockquote>
<div>
<div class="text-[#F5F5F5] font-semibold text-lg">
Elena García
</div>
<div class="text-[#A1A1A6] text-sm uppercase tracking-widest mt-1">
VP Marketing, Carbon
</div>
<div class="mt-3 text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/60">
Sustainability brand · 5-week sprint
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<div class="flex justify-center gap-4 mt-8">
<button id="story-prev" class="w-12 h-12 rounded-full border border-[#23252B] bg-[#0E0F11] flex items-center justify-center text-[#A1A1A6] hover:text-[#0E0F11] hover:bg-[#D6FF4F] transition-all">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="lucide:arrow-left" data-width="20">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 19l-7-7l7-7m7 7H5"></path>
</svg>
</button>
<button id="story-next" class="w-12 h-12 rounded-full border border-[#23252B] bg-[#0E0F11] flex items-center justify-center text-[#A1A1A6] hover:text-[#0E0F11] hover:bg-[#D6FF4F] transition-all">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="20" height="20" viewBox="0 0 24 24" data-icon="lucide:arrow-right" data-width="20">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
<script>
(function() {
const container = document.querySelector('.guest-story-slide').parentElement;
const slides = document.querySelectorAll('.guest-story-slide');
const prev = document.getElementById('story-prev');
const next = document.getElementById('story-next');
let idx = 0;
const total = slides.length;
function update() {
slides.forEach((s, i) => {
if (i === idx) {
s.classList.remove('opacity-0', 'pointer-events-none', 'z-0');
s.classList.add('opacity-100', 'z-10', 'relative');
s.classList.remove('absolute');
} else {
s.classList.remove('opacity-100', 'z-10', 'relative');
s.classList.add('opacity-0', 'pointer-events-none', 'z-0', 'absolute');
}
});
}
next.addEventListener('click', () => {
idx = (idx + 1) % total;
update();
});
prev.addEventListener('click', () => {
idx = (idx - 1 + total) % total;
update();
});
})();
</script>
<!-- Footer -->
<section aria-label="Start a project" class="bg-[#0E0F11] border-t border-[#23252B]">
<div class="max-w-[1550px] mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
<div class="md:p-12 flex flex-col md:flex-row md:items-center bg-[#15171B] border-[#23252B] border rounded-[2rem] pt-8 pr-8 pb-8 pl-8 gap-x-8 gap-y-8 items-start justify-between">
<div class="max-w-xl">
<span class="text-[10px] font-mono text-[#D6FF4F] block mb-4 border-b border-[#23252B] w-fit pb-1 tracking-widest">
07 — NEW BUSINESS
</span>
<h2 class="text-3xl md:text-4xl font-heading font-medium tracking-tight leading-tight text-[#F5F5F5]">
Ready to start a project?
</h2>
<p class="mt-3 text-sm text-[#A1A1A6] leading-relaxed">
Tell us what you’re building — we’ll reply with next steps.
</p>
</div>
<div class="flex flex-col items-start md:items-end gap-3">
<a href="#" class="inline-flex items-center justify-center rounded-full bg-[#F5F5F5] hover:bg-[#D6FF4F] text-[#0E0F11] px-8 py-3 text-xs font-semibold uppercase tracking-wider transition-colors">
Start a Project
</a>
<span class="text-[10px] font-sans uppercase tracking-[0.2em] text-[#A1A1A6]/70">
Brief form · 48h response
</span>
</div>
</div>
</div>
</section>
<footer class="text-[#F5F5F5] bg-[#0E0F11] border-[#23252B] border-t pt-20 pb-10">
<div class="w-full text-center text-[10px] uppercase tracking-[0.3em] text-[#A1A1A6]/50 mb-16 font-sans select-none">
Design for the digital age
</div>
<div class="max-w-[1550px] mx-auto px-6 grid grid-cols-1 md:grid-cols-12 gap-12 mb-20 border-b border-[#23252B] pb-16">
<!-- Brand -->
<div class="md:col-span-4 pr-0 md:pr-12">
<a href="#" class="flex items-center gap-2 mb-6">
<div class="w-2 h-2 bg-[#D6FF4F] rounded-full"></div>
<span class="text-xl tracking-tight font-heading font-semibold uppercase">
STUDIO
</span>
</a>
<p class="leading-relaxed text-[#A1A1A6] max-w-sm mb-8 text-sm">
We help ambitious companies build future-proof brands and
digital products that stand the test of time.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full border border-[#23252B] flex items-center justify-center hover:bg-[#F5F5F5] hover:text-[#0E0F11] transition-colors text-[#A1A1A6]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:instagram" data-width="18">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8A4 4 0 0 1 16 11.37m1.5-4.87h.01"></path>
</g>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-full border border-[#23252B] flex items-center justify-center hover:bg-[#F5F5F5] hover:text-[#0E0F11] transition-colors text-[#A1A1A6]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:twitter" data-width="18">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6c2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4c-.9-4.2 4-6.6 7-3.8c1.1 0 3-1.2 3-1.2"></path>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-full border border-[#23252B] flex items-center justify-center hover:bg-[#F5F5F5] hover:text-[#0E0F11] transition-colors text-[#A1A1A6]">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="18" height="18" viewBox="0 0 24 24" data-icon="lucide:linkedin" data-width="18">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2a2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6M2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2"></circle>
</g>
</svg>
</a>
</div>
</div>
<!-- Links -->
<div class="grid grid-cols-2 gap-8 md:contents">
<div class="md:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest text-[#52525B] mb-6 font-sans">
Sitemap
</h4>
<ul class="space-y-4 text-sm text-[#A1A1A6]">
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Projects
</a>
</li>
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Services
</a>
</li>
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Studio
</a>
</li>
</ul>
</div>
<div class="md:col-span-2">
<h4 class="text-xs font-bold uppercase tracking-widest text-[#52525B] mb-6 font-sans">
Socials
</h4>
<ul class="space-y-4 text-sm text-[#A1A1A6]">
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Instagram
</a>
</li>
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
Twitter
</a>
</li>
<li>
<a href="#" class="hover:text-[#D6FF4F] transition-colors">
LinkedIn
</a>
</li>
</ul>
</div>
</div>
<!-- Newsletter -->
<div class="md:col-span-4">
<h4 class="text-xs font-bold uppercase tracking-widest text-[#52525B] mb-6 font-sans">
New Business
</h4>
<p class="text-[#A1A1A6] text-sm mb-6">
Currently accepting new projects for Q3 2024. Let's build
something great.
</p>
<a href="mailto:hello@studio.com" class="text-2xl md:text-3xl font-heading font-medium text-[#F5F5F5] hover:text-[#D6FF4F] transition-colors underline decoration-[#23252B] underline-offset-8 decoration-1">
hello@studio.com
</a>
</div>
</div>
<div class="max-w-[1550px] mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-[10px] text-[#52525B] font-sans tracking-wide uppercase">
<div class="flex gap-6 mb-4 md:mb-0">
<a href="#" class="hover:text-[#F5F5F5]">Privacy</a>
<a href="#" class="hover:text-[#F5F5F5]">Terms</a>
</div>
<span>© 2025 Studio Inc.</span>
</div>
</footer>
</main>
</div>
<script>
// Mobile Menu Logic
const menuBtn = document.getElementById('open-menu-btn');
const closeBtn = document.getElementById('close-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const body = document.body;
function toggleMenu() {
const isHidden = mobileMenu.classList.contains('hidden');
if (isHidden) {
mobileMenu.classList.remove('hidden');
setTimeout(() => {
mobileMenu.classList.remove('opacity-0');
}, 10);
body.style.overflow = 'hidden';
} else {
mobileMenu.classList.add('opacity-0');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300);
body.style.overflow = '';
}
}
menuBtn.addEventListener('click', toggleMenu);
closeBtn.addEventListener('click', toggleMenu);
</script>
</body></html>