Hugging Face's logo

Spaces:
Hussi
/
anycoder-65cd901b
Running

App Files Community
anycoder-65cd901b / index.html
Hussi's picture
Hussi
Upload folder using huggingface_hub
e0e4dc3 verified
Raw
History Blame Contribute Delete
27.5 kB
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AERO X1 | Next Gen Headphones</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 fontFamily: {
 sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
 body: ['Inter', 'system-ui', 'sans-serif'],
 },
 colors: {
 'void': '#05070a',
 'ink': '#080c12',
 'slate-950': '#02040a',
 'slate-900': '#0a0f1a',
 'slate-800': '#111827',
 'slate-700': '#1e293b',
 'slate-600': '#334155',
 'slate-500': '#475569',
 'slate-400': '#64748b',
 'slate-300': '#94a3b8',
 'slate-200': '#cbd5e1',
 'slate-100': '#f1f5f9',
 'slate-50': '#f8fafc',
 'neon': '#00d4ff',
 'neon-dim': 'rgba(0, 212, 255, 0.08)',
 'neon-glow': 'rgba(0, 212, 255, 0.3)',
 'neon-bright': 'rgba(0, 212, 255, 0.15)',
 'mauve': '#a78bfa',
 'mauve-dim': 'rgba(167, 139, 250, 0.06)',
 'mauve-glow': 'rgba(167, 139, 250, 0.2)',
 }
 }
 }
 }
 </script>
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scrollbar-width: thin; scrollbar-color: #1e293b #02040a; }
 body {
 font-family: 'Space Grotesk', system-ui, sans-serif;
 background: #05070a;
 color: #e2e8f0;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }
 ::-webkit-scrollbar { width: 5px; }
 ::-webkit-scrollbar-track { background: #02040a; }
 ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
 ::-webkit-scrollbar-thumb:hover { background: #334155; }
 .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
 .reveal.active { opacity: 1; transform: translateY(0); }
 .reveal-delay-1 { transition-delay: 0.08s; }
 .reveal-delay-2 { transition-delay: 0.16s; }
 .reveal-delay-3 { transition-delay: 0.24s; }
 .reveal-delay-4 { transition-delay: 0.32s; }
 .reveal-delay-5 { transition-delay: 0.4s; }
 .hero-title {
 background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 55%, #475569 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 }
 .sep-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(148,163,184,0.15), transparent); }
 .nav-link { position: relative; padding-bottom: 2px; }
 .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #00d4ff; transition: width 0.35s cubic-bezier(0.16,1,0.3,1); }
 .nav-link:hover::after { width: 100%; }
 .header-bg { transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
 .header-bg.scrolled { background: rgba(5,7,10,0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(30,41,59,0.3); }
 .hero-img-wrap { transition: transform 0.1s linear; will-change: transform; }
 .orbit-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,0.04) 0%, rgba(167,139,250,0.03) 40%, transparent 70%); filter: blur(60px); animation: orbitDrift 20s ease-in-out infinite; pointer-events: none; }
 @keyframes orbitDrift {
 0%, 100% { transform: translate(0,0) scale(1); }
 33% { transform: translate(40px,-30px) scale(1.05); }
 66% { transform: translate(-20px,20px) scale(0.95); }
 }
 @keyframes marquee-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
 @keyframes marquee-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
 .marquee-left { animation: marquee-left 35s linear infinite; }
 .marquee-right { animation: marquee-right 45s linear infinite; }
 .sec-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: #64748b; }
 .abstract-text { font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
 .abstract-line { display: inline; background: linear-gradient(90deg, #334155, #334155); background-repeat: no-repeat; background-size: 0% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-size 0.5s cubic-bezier(0.16,1,0.3,1); }
 .abstract-line.revealed { background-size: 100% 100%; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #f8fafc, #cbd5e1); }
 .progress-bar { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: #1e293b; border-radius: 1px; }
 .progress-fill { width: 100%; background: #00d4ff; border-radius: 1px; transition: height 0.15s ease-out; }
 .spec-card { border: 1px solid rgba(30,41,59,0.4); transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
 .spec-card:hover { border-color: rgba(0,212,255,0.2); background: rgba(0,212,255,0.02); transform: translateY(-4px); }
 .tab-pill { transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; cursor: pointer; }
 .tab-pill.active { background: rgba(0,212,255,0.08); color: #00d4ff; border-color: rgba(0,212,255,0.3); }
 .feat-row { border-bottom: 1px solid rgba(30,41,59,0.3); transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
 .feat-row:hover { background: rgba(0,212,255,0.02); border-bottom-color: rgba(0,212,255,0.15); padding-left: 12px; }
 .gal-img { transition: all 0.6s cubic-bezier(0.16,1,0.3,1); cursor: pointer; }
 .gal-img:hover { transform: scale(1.02); }
 .gal-img:hover .gal-overlay { opacity: 1; }
 .gal-overlay { opacity: 0; transition: opacity 0.4s ease; }
 .color-pick { transition: all 0.3s ease; cursor: pointer; }
 .color-pick:hover { transform: scale(1.15); }
 .color-pick.active { box-shadow: 0 0 0 3px #05070a, 0 0 0 5px #00d4ff; }
 .buy-btn { background: #e2e8f0; color: #02040a; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
 .buy-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.6s ease; }
 .buy-btn:hover::before { transform: translateX(100%); }
 .buy-btn:hover { background: #fff; box-shadow: 0 0 40px rgba(226,232,240,0.15); transform: translateY(-1px); }
 .form-input { background: transparent; border: 1px solid rgba(30,41,59,0.5); transition: all 0.4s ease; color: #f1f5f9; }
 .form-input:focus { border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0,212,255,0.06); outline: none; }
 .form-input::placeholder { color: #475569; }
 .lightbox { transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
 .footer-link { transition: color 0.3s ease; }
 .footer-link:hover { color: #00d4ff; }
 .toast { animation: toastIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
 @keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
 @keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(20px) scale(0.95); } }
 .noise { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; }
 @keyframes pulse-soft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
 .pulse-dot { animation: pulse-soft 2s ease-in-out infinite; }
 .cta-underline { position: relative; }
 .cta-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: #00d4ff; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
 .cta-underline:hover::after { transform: scaleX(1); transform-origin: left; }
 .feature-img { transition: all 0.8s cubic-bezier(0.16,1,0.3,1); opacity: 0; transform: scale(0.95); position: absolute; inset: 0; }
 .feature-img.active { opacity: 1; transform: scale(1); position: relative; }
 .stat-num { font-variant-numeric: tabular-nums; }
 </style>
</head>
<body class="antialiased">
 <div class="noise"></div>
<!-- HEADER -->
 <header id="header" class="fixed top-0 left-0 right-0 z-50 header-bg">
 <div class="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">
 <div class="flex items-center justify-between h-16">
 <a href="#" class="flex items-center gap-2.5 group">
 <div class="w-7 h-7 rounded border border-slate-600 flex items-center justify-center group-hover:border-neon transition-colors duration-500">
 <svg class="w-3.5 h-3.5 text-slate-300 group-hover:text-neon transition-colors duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 <path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
 </svg>
 </div>
 <span class="text-sm font-semibold tracking-wide text-slate-100">AERO<span class="text-slate-500 font-normal">.</span></span>
 </a>
 <nav class="hidden md:flex items-center gap-8">
 <a href="#about" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">About</a>
 <a href="#features" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Features</a>
 <a href="#gallery" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Gallery</a>
 <a href="#specs" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Specs</a>
 </nav>
 <div class="flex items-center gap-5">
 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hidden sm:inline-flex text-[0.65rem] tracking-[0.12em] uppercase text-slate-500 hover:text-neon transition-colors duration-300">Built with anycoder</a>
 <a href="#pricing" class="hidden sm:inline-flex text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-neon transition-colors">Pricing</a>
 <a href="#buy" class="inline-flex items-center gap-2 px-4 py-1.5 bg-slate-100 text-slate-900 rounded text-xs font-semibold tracking-wider hover:bg-white transition-all duration-300 hover:shadow-lg hover:shadow-slate-100/10">
 Order
 <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25" />
 </svg>
 </a>
 </div>
 </div>
 </div>
 </header>
<!-- HERO -->
 <section class="relative min-h-screen flex items-center overflow-hidden" id="hero">
 <canvas id="heroCanvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
 <div class="orbit-glow top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
 <div class="relative z-10 max-w-7xl mx-auto px-5 sm:px-8 lg:px-12 w-full pt-24 pb-16">
 <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
 <div class="order-2 lg:order-1">
 <div class="reveal">
 <div class="flex items-center gap-3 mb-8">
 <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
 <span class="text-[0.65rem] tracking-[0.2em] uppercase text-emerald-400/80 font-medium">In Stock &mdash; Ships in 24h</span>
 </div>
 </div>
 <h1 class="reveal reveal-delay-1 hero-title text-5xl sm:text-6xl lg:text-7xl xl:text-[5.5rem] font-bold leading-[0.95] tracking-tight mb-6">
 Aero<br>
 <span class="text-transparent bg-clip-text" style="background: linear-gradient(180deg, #00d4ff 0%, #0ea5e9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">X1</span>
 </h1>
 <p class="reveal reveal-delay-2 text-slate-400 text-base sm:text-lg font-body leading-relaxed max-w-md mb-10">
 Wireless headphones engineered with graphene drivers, 50-hour battery life, and adaptive ANC that learns your environment.
 </p>
 <div class="reveal reveal-delay-3 flex flex-wrap items-center gap-4">
 <a href="#buy" class="buy-btn inline-flex items-center gap-3 px-7 py-3.5 rounded font-semibold text-sm tracking-wide">
 Buy Now &mdash; $349
 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
 </svg>
 </a>
 <a href="#features" class="cta-underline inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-200 transition-colors">Explore</a>
 </div>
 <div class="reveal reveal-delay-4 mt-14 flex flex-wrap gap-x-8 gap-y-3">
 <div><div class="text-lg font-semibold text-slate-100">50h</div><div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">Battery</div></div>
 <div class="w-px h-8 bg-slate-800"></div>
 <div><div class="text-lg font-semibold text-slate-100">-42dB</div><div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">ANC</div></div>
 <div class="w-px h-8 bg-slate-800"></div>
 <div><div class="text-lg font-semibold text-slate-100">5.3</div><div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">Bluetooth</div></div>
 </div>
 </div>
 <div class="order-1 lg:order-2 flex justify-center lg:justify-end reveal reveal-delay-2">
 <div class="relative hero-img-wrap" id="heroImg">
 <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=700&q=85" alt="Aero X1 Headphones" class="w-full max-w-[420px] lg:max-w-[480px] object-contain drop-shadow-2xl">
 <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-gradient-to-t from-slate-400/5 to-transparent blur-2xl rounded-full"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-void to-transparent pointer-events-none"></div>
 </section>
<!-- MARQUEE -->
 <div class="relative py-5 border-y border-slate-800/50 overflow-hidden">
 <div class="marquee-left flex gap-12 whitespace-nowrap">
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Precision Engineered
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Adaptive ANC
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> 50h Battery
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Spatial Audio
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Graphene Drivers
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Bluetooth 5.3
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Precision Engineered
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Adaptive ANC
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> 50h Battery
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Spatial Audio
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Graphene Drivers
 </span>
 <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
 <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> Bluetooth 5.3
 </span>
 </div>
 </div>
<!-- ABOUT -->
 <section id="about" class="relative py-28 sm:py-36 overflow-hidden">
 <div class="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">
 <div class="grid lg:grid-cols-12 gap-8 lg:gap-16">
 <div class="lg:col-span-5 lg:sticky lg:top-32 lg:self-start">
 <div class="reveal">
 <div class="sec-label mb-3">About</div>
 <h2 class="text-3xl sm:text-4xl font-bold text-slate-100 leading-tight mb-4">Redefining<br>how you listen</h2>
 <p class="text-slate-500 text-sm font-body leading-relaxed max-w-sm">
 The Aero X1 isn't just another pair of headphones. It is a statement of intent &mdash; a commitment to audio perfection in its purest form.
 </p>
 </div>
 <div class="hidden lg:block mt-12 relative pl-6">
 <div class="progress-bar"><div class="progress-fill" id="scrollProgress" style="height: 0%"></div></div>
 <div class="space-y-6">
 <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">01 &mdash; Philosophy</div>
 <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">02 &mdash; Craft</div>
 <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">03 &mdash; Innovation</div>
 <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">04 &mdash; Experience</div>
 </div>
 </div>
 </div>
 <div class="lg:col-span-7">
 <div class="abstract-text text-slate-700 leading-snug" id="abstractText">
 <span class="abstract-line" data-idx="0">Sound that breathes</span>
 <span class="abstract-line" data-idx="1"> with you. Noise that </span>
 <span class="abstract-line" data-idx="2">disappears without a </span>
 <span class="abstract-line" data-idx="3">trace. Comfort that </span>
 <span class="abstract-line" data-idx="4">lasts all day &mdash; and </span>
 <span class="abstract-line" data-idx="5">all night. Every detail, </span>
 <span class="abstract-line" data-idx="6">obsessively refined. </span>
 <span class="abstract-line" data-idx="7">Every frequency, </span>
 <span class="abstract-line" data-idx="8">swept clean.</span>
 </div>
 <div class="reveal mt-16 grid grid-cols-1 sm:grid-cols-3 gap-6">
 <div class="spec-card p-6 rounded-lg">
 <div class="w-8 h-8 rounded-md border border-slate-700 flex items-center justify-center mb-4">
 <svg class="w-4 h-4 text-neon/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
 </svg>
 </div>
 <div class="text-xs font-semibold text-slate-200 mb-1.5">AeroSound 2.0</div>
 <div class="text-[0.7rem] text-slate-500 font-body leading-relaxed">Custom 40mm beryllium-infused drivers tuned for extended low-end and crystalline highs.</div>
 </div>
 <div class="spec-card p-6 rounded-lg">
 <div class="w-8 h-8 rounded-md border border-slate-700 flex items-center justify-center mb-4">
 <svg class="w-4 h-4 text-neon/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
 </svg>
 </div>
 <div class="text-xs font-semibold text-slate-200 mb-1.5">Zero Gravity</div>
 <div class="text-[0.7rem] text-slate-500 font-body leading-relaxed">Memory foam ear cushions with micro-suede lining for weightless extended wear.</div>
 </div>
 <div class="spec-card p-6 rounded-lg">
 <div class="w-8 h-8 rounded-md border border-slate-700 flex items-center justify-center mb-4">
 <svg class="w-4 h-4 text-neon/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
 </svg>
 </div>
 <div class="text-xs font-semibold text-slate-200 mb-1.5">Adaptive ANC</div>
 <div class="text-[0.7rem] text-slate-500 font-body leading-relaxed">AI-driven noise cancellation that adapts in real-time to your surroundings.</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- FEATURES -->
 <section id="features" class="relative py-28 sm:py-36 bg-slate-950/50">
 <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(0,212,255,0.03),transparent_50%)]"></div>
 <div class="relative max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">
 <div class="text-center mb-16 reveal">
 <div class="sec-label mb-3">Features</div>
 <h2 class="text-3xl sm:text-4xl font-bold text-slate-100 leading-tight">Every detail, considered</h2>
 </div>
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
 <div class="reveal">
 <div class="flex flex-wrap gap-2 mb-8">
 <button class="tab-pill active px-5 py-2 rounded-full border border-slate-700 text-[0.75rem] tracking-wide text-slate-400" data-tab="audio">Audio</button>
 <button class="tab-pill px-5 py-2 rounded-full border border-slate-700 text-[0.75rem] tracking-wide text-slate-400" data-tab="comfort">Comfort</button>
 <button class="tab-pill px-5 py-2 rounded-full border border-slate-700 text-[0.75rem] tracking-wide text-slate-400" data-tab="smart">Smart</button>
 <button class="tab-pill px-5 py-2 rounded-full border border-slate-700 text-[0.75rem] tracking-wide text-slate-400" data-tab="connect">Connect</button>
 </div>
<div id="featureContent" class="min-h-[280px]">
 <div class="feature-panel" data-panel="audio">
 <h3 class="text-2xl font-bold text-slate-100 mb-4">AeroSound 2.0 Engine</h3>
 <p class="text-slate-400 text-sm font-body leading-relaxed mb-6">
 Custom-designed 40mm beryllium-infused diaphragms deliver a frequency response from 4Hz to 40kHz. Experience sub-bass you can feel and treble so pristine it reveals details you've never heard before.
 </p>
 <div class="space-y-0">
 <div class="feat-row py-4 flex items-center justify-between">
 <span class="text-sm text-slate-300">Frequency Response</span>
 <span class="text-sm font-semibold text-slate-100">4Hz &ndash; 40kHz</span>
 </div>
 <div class="feat-row py-4 flex items-center justify-between">
 <span class="text-sm text-slate-300">Driver Size</span>
 <span class="text-sm font-semibold text-slate-100">40mm Beryllium</span>
 </