Spaces:

chandan06
/

anycoder-32c5a03a

Running

App Files Files Community

chandan06 commited on Dec 9, 2025

Commit

de40027

verified ·

1 Parent(s): bde9eed

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1132 -486

index.html CHANGED Viewed

@@ -1,489 +1,1135 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>NeuroOne Future Phone</title>
-<style>
-:root{
-  --bg:#040511;
-  --accent:#7bfffe;
-  --accent-2:#ff8df3;
-  --glass:rgba(255,255,255,0.07);
-  --text:#e8f6ff;
-  --muted:#9cb2c7;
-  --shadow:0 20px 60px rgba(0,0,0,0.4);
-}
-*{margin:0;padding:0;box-sizing:border-box;}
-body{
-  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
-  background:radial-gradient(circle at 20% 20%,rgba(123,255,254,.2),transparent 35%),radial-gradient(circle at 80% 0%,rgba(255,141,243,.25),transparent 38%),var(--bg);
-  color:var(--text);
-  min-height:100vh;
-  overflow-x:hidden;
-  perspective:1600px;
-}
-body::before{
-  content:"";
-  position:fixed;
-  inset:-30% -10% auto;
-  height:120%;
-  background:conic-gradient(from 120deg,#182143,#05050f,#101a3b,#6025ff,#060815);
-  filter:blur(120px);
-  opacity:.45;
-  z-index:-2;
-}
-main{
-  width:min(1200px,100%);
-  margin:0 auto;
-  padding:1.5rem clamp(1rem,5vw,4rem) 4rem;
-}
-.topbar{
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  padding:1rem 0 2rem;
-  position:sticky;
-  top:0;
-  backdrop-filter:blur(24px);
-  background:rgba(4,5,17,.75);
-  z-index:9;
-}
-.logo{
-  font-weight:700;
-  letter-spacing:.2rem;
-  font-size:1rem;
-}
-.logo span{
-  color:var(--accent);
-}
-.topbar nav{
-  display:flex;
-  gap:1.2rem;
-  align-items:center;
-  font-size:.9rem;
-}
-.topbar a{
-  text-decoration:none;
-  color:var(--muted);
-  transition:.3s;
-}
-.topbar a:hover{color:var(--accent);}
-.hero{
-  display:grid;
-  gap:2.5rem;
-  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
-  align-items:center;
-  margin-top:1rem;
-}
-.blurb h1{
-  font-size:clamp(2rem,7vw,3.8rem);
-  line-height:1.05;
-  text-transform:uppercase;
-  letter-spacing:.1rem;
-}
-.blurb p{
-  margin:1.5rem 0;
-  font-size:1rem;
-  color:var(--muted);
-  max-width:40ch;
-}
-.cta{
-  display:flex;
-  flex-wrap:wrap;
-  gap:1rem;
-}
-button.primary{
-  padding:.95rem 2.8rem;
-  border:none;
-  border-radius:999px;
-  font-size:1rem;
-  font-weight:600;
-  color:#010109;
-  cursor:pointer;
-  background:linear-gradient(120deg,var(--accent),var(--accent-2));
-  box-shadow:0 15px 40px rgba(123,255,254,.35);
-}
-button.ghost{
-  padding:.95rem 2.3rem;
-  border:1px solid rgba(255,255,255,.3);
-  border-radius:999px;
-  background:transparent;
-  color:var(--text);
-  font-weight:600;
-  cursor:pointer;
-  transition:.3s;
-}
-button.ghost:hover{
-  border-color:var(--accent);
-  color:var(--accent);
-}
-.stats{
-  display:flex;
-  gap:2.5rem;
-  margin-top:2rem;
-  flex-wrap:wrap;
-}
-.stat{
-  flex:1 1 130px;
-  min-width:120px;
-}
-.stat h3{
-  font-size:2.2rem;
-  margin-bottom:.3rem;
-  color:var(--accent);
-}
-.scene{
-  position:relative;
-  width:100%;
-  min-height:420px;
-  display:flex;
-  justify-content:center;
-}
-.holobox{
-  width:260px;
-  aspect-ratio:9/19.5;
-  border-radius:28px;
-  background:linear-gradient(145deg,#05070f,#111a2a 60%,#060812);
-  position:relative;
-  transform-style:preserve-3d;
-  animation:float 6s ease-in-out infinite;
-  box-shadow:
-    inset 0 0 20px rgba(123,255,254,.2),
-    -30px 40px 80px rgba(0,0,0,.55),
-    0 0 25px rgba(123,255,254,.25);
-}
-.holobox::before,
-.holobox::after{
-  content:"";
-  position:absolute;
-  inset:8px;
-  border-radius:20px;
-  border:1px solid rgba(123,255,254,.18);
-  mix-blend-mode:screen;
-  pointer-events:none;
-}
-.holobox::after{
-  inset:12px;
-  border:1px solid rgba(255,141,243,.18);
-}
-.display{
-  position:absolute;
-  inset:14px;
-  border-radius:18px;
-  overflow:hidden;
-  background:#02060b;
-}
-.matrix{
-  width:100%;
-  height:100%;
-  background:
-    repeating-linear-gradient(90deg,rgba(123,255,254,.3) 0 1px,transparent 1px 16px),
-    repeating-linear-gradient(0deg,rgba(123,255,254,.2) 0 1px,transparent 1px 16px);
-  animation:scan 6s linear infinite;
-  opacity:.28;
-}
-.display canvas{
-  position:absolute;
-  inset:0;
-  width:100%;
-  height:100%;
-  mix-blend-mode:screen;
-}
-.glow-orbit{
-  position:absolute;
-  width:340px;
-  height:340px;
-  border-radius:50%;
-  border:1px solid rgba(123,255,254,.25);
-  top:50%;
-  left:50%;
-  transform:translate(-50%,-50%) rotateX(70deg);
-  animation:orbit 10s linear infinite;
-  filter:drop-shadow(0 0 20px rgba(123,255,254,.4));
-}
-.glow-node{
-  position:absolute;
-  width:12px;
-  height:12px;
-  border-radius:50%;
-  background:var(--accent);
-  top:-6px;
-  left:50%;
-  transform:translateX(-50%);
-  box-shadow:0 0 30px var(--accent);
-}
-.side-rail{
-  position:absolute;
-  right:-6px;
-  top:25%;
-  bottom:25%;
-  width:6px;
-  border-radius:4px;
-  background:linear-gradient(180deg,var(--accent),var(--accent-2));
-  filter:blur(.3px);
-}
-.camera{
-  position:absolute;
-  top:16px;
-  left:50%;
-  transform:translateX(-50%);
-  width:70px;
-  height:8px;
-  border-radius:999px;
-  background:linear-gradient(90deg,#0c101a,#1f2b3f);
-}
-.sensors{
-  position:absolute;
-  top:18px;
-  left:calc(50% - 26px);
-  width:52px;
-  height:4px;
-  display:flex;
-  justify-content:space-between;
-}
-.sensors span{
-  width:8px;
-  height:4px;
-  border-radius:999px;
-  background:radial-gradient(circle,#7bfffe 30%,transparent 70%);
-  opacity:.5;
-}
-.feature-wrap{
-  margin-top:4rem;
-  display:grid;
-  gap:1.5rem;
-}
-.feature-grid{
-  display:grid;
-  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
-  gap:1.5rem;
-}
-.feature-card{
-  border-radius:22px;
-  padding:1.6rem;
-  background:var(--glass);
-  border:1px solid rgba(255,255,255,.1);
-  backdrop-filter:blur(20px);
-  min-height:160px;
-  position:relative;
-  overflow:hidden;
-  isolation:isolate;
-  box-shadow:var(--shadow);
-}
-.feature-card::before{
-  content:"";
-  position:absolute;
-  inset:0;
-  background:radial-gradient(circle at top right,rgba(123,255,254,.3),transparent 40%);
-  opacity:.7;
-  mix-blend-mode:screen;
-  z-index:-1;
-}
-.feature-card h4{
-  font-size:1rem;
-  letter-spacing:.08em;
-  text-transform:uppercase;
-  margin-bottom:.8rem;
-  color:var(--accent);
-}
-.feature-card p{
-  color:var(--muted);
-  font-size:.9rem;
-}
-.feature-card span{
-  position:absolute;
-  bottom:1.2rem;
-  right:1.5rem;
-  font-size:.8rem;
-  color:var(--accent-2);
-  letter-spacing:.2em;
-}
-.timeline{
-  margin-top:4rem;
-  display:grid;
-  gap:1rem;
-}
-.timeline-card{
-  padding:1.5rem;
-  border-radius:24px;
-  border:1px solid rgba(123,255,254,.3);
-  background:linear-gradient(125deg,rgba(123,255,254,.12),rgba(4,5,17,.7));
-  display:flex;
-  flex-wrap:wrap;
-  gap:1rem;
-  align-items:center;
-}
-.timeline-card strong{
-  font-size:1rem;
-  letter-spacing:.18em;
-  text-transform:uppercase;
-  color:var(--accent);
-}
-.timeline-card p{
-  flex:1;
-  min-width:220px;
-  color:var(--muted);
-}
-@keyframes float{
-  0%,100%{transform:rotateX(8deg) rotateY(-12deg) translateY(0);}
-  50%{transform:rotateX(14deg) rotateY(-2deg) translateY(-20px);}
-}
-@keyframes scan{
-  0%{transform:translateY(0);}
-  100%{transform:translateY(-100%);}
-}
-@keyframes orbit{
-  from{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0deg);}
-  to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg);}
-}
-@media(max-width:640px){
-  .topbar{flex-direction:column;gap:.6rem;}
-  .stats{flex-direction:column;}
-  .timeline-card{flex-direction:column;align-items:flex-start;}
-  .holobox{zoom:.85;}
-}
-</style>
-</head>
-<body>
-<header class="topbar">
-  <div class="logo">NEURO<span>ONE</span></div>
-  <nav>
-    <a href="#features">Pulse</a>
-    <a href="#specs">Quantum Core</a>
-    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-  </nav>
-</header>
-<main>
-  <section class="hero">
-    <div class="blurb">
-      <h1>World’s Most Advanced Neuro-Adaptive Mobile</h1>
-      <p>Experience the symbiosis of biomimetic intelligence and tactile engineering. NeuroOne synchronizes quantum-grade neurolinks, 8D haptics, and photonic cooling inside a liquid-lucent monobody. Crafted for pioneers of the next cognition frontier.</p>
-      <div class="cta">
-        <button class="primary">Pre-Launch Access</button>
-        <button class="ghost">See the Neural Flow</button>
-      </div>
-      <div class="stats">
-        <div class="stat">
-          <h3>1.2ms</h3>
-          <small>Neuro latency</small>
-        </div>
-        <div class="stat">
-          <h3>98%</h3>
-          <small>Bio-sync accuracy</small>
-        </div>
-        <div class="stat">
-          <h3>72hr</h3>
-          <small>Quantum endurance</small>
-        </div>
-      </div>
-    </div>
-    <div class="scene" id="scene">
-      <div class="glow-orbit">
-        <div class="glow-node"></div>
-      </div>
-      <div class="holobox" id="holobox">
-        <div class="side-rail"></div>
-        <div class="camera"></div>
-        <div class="sensors">
-          <span></span><span></span><span></span>
-        </div>
-        <div class="display">
-          <div class="matrix"></div>
-          <canvas id="galaxy"></canvas>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="feature-wrap" id="features">
-    <div class="feature-grid">
-      <article class="feature-card">
-        <h4>NeuroLattice OS</h4>
-        <p>Adaptive operating system that bends to neural intent patterns, learning every micro-expression for instantaneous action.</p>
-        <span>01</span>
-      </article>
-      <article class="feature-card">
-        <h4>Photonic Core</h4>
-        <p>Tri-photon chambers actively refract heat into light shards, enabling relentless performance with zero throttling.</p>
-        <span>02</span>
-      </article>
-      <article class="feature-card">
-        <h4>8D HoloSound</h4>
-        <p>Atmospheric audio engine that maps sound into volumetric space, projecting lifelike acoustic halos around you.</p>
-        <span>03</span>
-      </article>
-      <article class="feature-card">
-        <h4>BioSculpt Chassis</h4>
-        <p>Liquid-titanium skin with self-repairing lattice that morphs its grip temperature to your biometric signature.</p>
-        <span>04</span>
-      </article>
-    </div>
-  </section>
-  <section class="timeline" id="specs">
-    <div class="timeline-card">
-      <strong>Quantum Pulse</strong>
-      <p>Trinary neural accelerators deliver decision throughput at 9.3 trillion ops/sec while sipping less than 2W.</p>
-    </div>
-    <div class="timeline-card">
-      <strong>Aurora Mesh</strong>
-      <p>Dynamic antenna array unfolds in nanoseconds to lock multi-spectrum signals from LEO mesh to deep-underground relays.</p>
-    </div>
-    <div class="timeline-card">
-      <strong>Sentient Shield</strong>
-      <p>On-device lattice firewall predicts threat vectors eight moves ahead with self-mutating encryption keys.</p>
-    </div>
-  </section>
-</main>
-<script>
-const holobox=document.getElementById('holobox');
-const scene=document.getElementById('scene');
-scene.addEventListener('pointermove',e=>{
-  const rect=scene.getBoundingClientRect();
-  const x=(e.clientX-rect.left)/rect.width-0.5;
-  const y=(e.clientY-rect.top)/rect.height-0.5;
-  holobox.style.transform=`rotateX(${(y*-20)+10}deg) rotateY(${(x*30)-10}deg) translateY(${y*-20}px)`;
-});
-scene.addEventListener('pointerleave',()=>{
-  holobox.style.transform='';
-});
-const canvas=document.getElementById('galaxy');
-const ctx=canvas.getContext('2d');
-function resize(){
-  canvas.width=canvas.offsetWidth;
-  canvas.height=canvas.offsetHeight;
-}
-resize();
-window.addEventListener('resize',resize);
-const particles=Array.from({length:120},()=>({
-  x:Math.random(),
-  y:Math.random(),
-  z:Math.random(),
-  speed:0.001+Math.random()*0.002
-}));
-function draw(){
-  ctx.clearRect(0,0,canvas.width,canvas.height);
-  particles.forEach(p=>{
-    p.z-=p.speed;
-    if(p.z<=0){
-      p.z=1;
-      p.x=Math.random();
-      p.y=Math.random();
-    }
-    const scale=1/p.z;
-    const x=(p.x-0.5)*canvas.width*scale+canvas.width/2;
-    const y=(p.y-0.5)*canvas.height*scale+canvas.height/2;
-    const size=scale*2;
-    ctx.fillStyle=`rgba(123,255,254,${Math.min(1,scale)})`;
-    ctx.beginPath();
-    ctx.arc(x,y,size,0,Math.PI*2);
-    ctx.fill();
-  });
-  requestAnimationFrame(draw);
-}
-draw();
-</script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NexGen Pro | Revolutionary Mobile Experience</title>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary: #00f0ff;
+            --secondary: #ff00e5;
+            --tertiary: #7b00ff;
+            --dark: #0a0a1a;
+            --darker: #050510;
+            --light: #ffffff;
+            --accent: #00ff88;
+        }
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: var(--darker);
+            color: var(--light);
+            overflow-x: hidden;
+            cursor: none;
+        }
+        /* Custom Cursor */
+        .cursor {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--primary);
+            border-radius: 50%;
+            position: fixed;
+            pointer-events: none;
+            z-index: 10000;
+            transition: transform 0.1s, opacity 0.3s;
+            mix-blend-mode: difference;
+        }
+        .cursor-follower {
+            width: 8px;
+            height: 8px;
+            background: var(--secondary);
+            border-radius: 50%;
+            position: fixed;
+            pointer-events: none;
+            z-index: 10000;
+            transition: transform 0.05s;
+        }
+        /* Loader */
+        .loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--darker);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            transition: opacity 0.8s, visibility 0.8s;
+        }
+        .loader.hidden {
+            opacity: 0;
+            visibility: hidden;
+        }
+        .loader-content {
+            text-align: center;
+        }
+        .loader-ring {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            position: relative;
+            margin: 0 auto 30px;
+        }
+        .loader-ring::before,
+        .loader-ring::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            border: 3px solid transparent;
+        }
+        .loader-ring::before {
+            border-top-color: var(--primary);
+            animation: spin 1.5s linear infinite;
+        }
+        .loader-ring::after {
+            border-bottom-color: var(--secondary);
+            animation: spin 1s linear infinite reverse;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loader-text {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.5rem;
+            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        /* Navigation */
+        nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding: 1.5rem 5%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+            background: rgba(5, 5, 16, 0.8);
+            backdrop-filter: blur(20px);
+            border-bottom: 1px solid rgba(0, 240, 255, 0.1);
+        }
+        .logo {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.8rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+            position: relative;
+        }
+        .logo::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transform: scaleX(0);
+            transition: transform 0.3s;
+        }
+        .logo:hover::after {
+            transform: scaleX(1);
+        }
+        .built-with {
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.6);
+            text-decoration: none;
+            transition: color 0.3s;
+            margin-left: 1rem;
+        }
+        .built-with:hover {
+            color: var(--primary);
+        }
+        .nav-links {
+            display: flex;
+            gap: 2.5rem;
+            list-style: none;
+        }
+        .nav-links a {
+            color: var(--light);
+            text-decoration: none;
+            font-weight: 500;
+            position: relative;
+            padding: 0.5rem 0;
+            transition: color 0.3s;
+        }
+        .nav-links a::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transform: scaleX(0);
+            transform-origin: right;
+            transition: transform 0.3s;
+        }
+        .nav-links a:hover::before {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+        .nav-links a:hover {
+            color: var(--primary);
+        }
+        .nav-cta {
+            padding: 0.8rem 2rem;
+            background: linear-gradient(135deg, var(--primary), var(--tertiary));
+            border: none;
+            border-radius: 50px;
+            color: var(--dark);
+            font-weight: 600;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .nav-cta::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, var(--secondary), var(--primary));
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .nav-cta:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 40px rgba(0, 240, 255, 0.4);
+        }
+        .nav-cta:hover::before {
+            opacity: 1;
+        }
+        .nav-cta span {
+            position: relative;
+            z-index: 1;
+        }
+        .menu-toggle {
+            display: none;
+            flex-direction: column;
+            gap: 6px;
+            cursor: pointer;
+            z-index: 1001;
+        }
+        .menu-toggle span {
+            width: 30px;
+            height: 2px;
+            background: var(--primary);
+            transition: transform 0.3s, opacity 0.3s;
+        }
+        /* Hero Section */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
+            padding: 100px 5% 50px;
+        }
+        .hero-bg {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(ellipse at center, rgba(123, 0, 255, 0.2) 0%, transparent 70%),
+                        radial-gradient(ellipse at 20% 80%, rgba(0, 240, 255, 0.15) 0%, transparent 50%),
+                        radial-gradient(ellipse at 80% 20%, rgba(255, 0, 229, 0.15) 0%, transparent 50%);
+        }
+        .particles {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+        }
+        .particle {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: var(--primary);
+            border-radius: 50%;
+            animation: float 15s infinite;
+            opacity: 0.6;
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(100vh) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 0.6;
+            }
+            90% {
+                opacity: 0.6;
+            }
+            100% {
+                transform: translateY(-100vh) rotate(720deg);
+                opacity: 0;
+            }
+        }
+        .hero-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            max-width: 1400px;
+            width: 100%;
+            position: relative;
+            z-index: 10;
+        }
+        .hero-text {
+            animation: fadeInUp 1s ease-out;
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1.5rem;
+            background: rgba(0, 240, 255, 0.1);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            border-radius: 50px;
+            font-size: 0.9rem;
+            margin-bottom: 1.5rem;
+            animation: glow 2s ease-in-out infinite;
+        }
+        @keyframes glow {
+            0%, 100% {
+                box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
+            }
+            50% {
+                box-shadow: 0 0 40px rgba(0, 240, 255, 0.6);
+            }
+        }
+        .hero-badge i {
+            color: var(--accent);
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+        .hero-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: clamp(2.5rem, 5vw, 4.5rem);
+            font-weight: 900;
+            line-height: 1.1;
+            margin-bottom: 1.5rem;
+        }
+        .hero-title .gradient {
+            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--tertiary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: gradientShift 3s ease infinite;
+            background-size: 200% 200%;
+        }
+        @keyframes gradientShift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 2rem;
+            line-height: 1.8;
+        }
+        .hero-cta {
+            display: flex;
+            gap: 1.5rem;
+            flex-wrap: wrap;
+        }
+        .btn-primary {
+            padding: 1rem 2.5rem;
+            background: linear-gradient(135deg, var(--primary), var(--tertiary));
+            border: none;
+            border-radius: 50px;
+            color: var(--dark);
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .btn-primary:hover {
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: 0 20px 60px rgba(0, 240, 255, 0.4);
+        }
+        .btn-secondary {
+            padding: 1rem 2.5rem;
+            background: transparent;
+            border: 2px solid var(--primary);
+            border-radius: 50px;
+            color: var(--primary);
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .btn-secondary:hover {
+            background: var(--primary);
+            color: var(--dark);
+            box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
+        }
+        /* 3D Phone Container */
+        .hero-visual {
+            perspective: 1500px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        .phone-container {
+            position: relative;
+            transform-style: preserve-3d;
+            animation: floatPhone 6s ease-in-out infinite;
+        }
+        @keyframes floatPhone {
+            0%, 100% {
+                transform: translateY(0) rotateY(-15deg) rotateX(5deg);
+            }
+            50% {
+                transform: translateY(-30px) rotateY(15deg) rotateX(-5deg);
+            }
+        }
+        .phone {
+            width: 280px;
+            height: 560px;
+            background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
+            border-radius: 40px;
+            position: relative;
+            border: 3px solid rgba(0, 240, 255, 0.3);
+            box-shadow:
+                0 0 100px rgba(0, 240, 255, 0.3),
+                0 0 200px rgba(123, 0, 255, 0.2),
+                inset 0 0 60px rgba(0, 240, 255, 0.1);
+            transform-style: preserve-3d;
+        }
+        .phone::before {
+            content: '';
+            position: absolute;
+            top: 15px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 25px;
+            background: #0a0a15;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .phone::after {
+            content: '';
+            position: absolute;
+            top: 22px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 10px;
+            height: 10px;
+            background: radial-gradient(circle, var(--primary), transparent);
+            border-radius: 50%;
+            animation: cameraPulse 2s infinite;
+        }
+        @keyframes cameraPulse {
+            0%, 100% { opacity: 0.5; box-shadow: 0 0 10px var(--primary); }
+            50% { opacity: 1; box-shadow: 0 0 20px var(--primary); }
+        }
+        .phone-screen {
+            position: absolute;
+            top: 50px;
+            left: 12px;
+            right: 12px;
+            bottom: 50px;
+            background: linear-gradient(180deg, #0a0a1a, #1a1a2e);
+            border-radius: 25px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .screen-content {
+            flex: 1;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .screen-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(0, 240, 255, 0.2);
+        }
+        .screen-logo {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 0.9rem;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .screen-icons {
+            display: flex;
+            gap: 8px;
+        }
+        .screen-icons i {
+            font-size: 0.8rem;
+            color: var(--primary);
+        }
+        .screen-card {
+            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(123, 0, 255, 0.1));
+            border-radius: 15px;
+            padding: 15px;
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            animation: cardGlow 3s infinite;
+        }
+        @keyframes cardGlow {
+            0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
+            50% { box-shadow: 0 0 40px rgba(123, 0, 255, 0.3); }
+        }
+        .card-title {
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 5px;
+        }
+        .card-value {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            color: var(--primary);
+        }
+        .screen-graph {
+            height: 80px;
+            background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.1));
+            border-radius: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+        .graph-line {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cpath d='M0,60 Q30,40 50,50 T100,30 T150,45 T200,20' fill='none' stroke='%2300f0ff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
+            background-size: cover;
+            animation: graphMove 3s ease-in-out infinite;
+        }
+        @keyframes graphMove {
+            0%, 100% { transform: translateX(0); }
+            50% { transform: translateX(-10px); }
+        }
+        .screen-buttons {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-top: auto;
+        }
+        .screen-btn {
+            padding: 12px;
+            background: rgba(0, 240, 255, 0.1);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            border-radius: 12px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 5px;
+            transition: all 0.3s;
+        }
+        .screen-btn i {
+            font-size: 1rem;
+            color: var(--primary);
+        }
+        .screen-btn span {
+            font-size: 0.6rem;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        /* Orbiting Elements */
+        .orbit {
+            position: absolute;
+            width: 400px;
+            height: 400px;
+            border: 1px dashed rgba(0, 240, 255, 0.2);
+            border-radius: 50%;
+            animation: orbitRotate 20s linear infinite;
+        }
+        .orbit:nth-child(2) {
+            width: 500px;
+            height: 500px;
+            animation-duration: 25s;
+            animation-direction: reverse;
+        }
+        @keyframes orbitRotate {
+            to { transform: rotate(360deg); }
+        }
+        .orbit-dot {
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            background: var(--primary);
+            border-radius: 50%;
+            box-shadow: 0 0 30px var(--primary);
+        }
+        .orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); }
+        .orbit-dot:nth-child(2) { bottom: 0; left: 50%; transform: translate(-50%, 50%); background: var(--secondary); box-shadow: 0 0 30px var(--secondary); }
+        .orbit-dot:nth-child(3) { left: 0; top: 50%; transform: translate(-50%, -50%); background: var(--tertiary); box-shadow: 0 0 30px var(--tertiary); }
+        .orbit-dot:nth-child(4) { right: 0; top: 50%; transform: translate(50%, -50%); background: var(--accent); box-shadow: 0 0 30px var(--accent); }
+        /* Holographic Elements */
+        .hologram {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            border: 2px solid rgba(0, 240, 255, 0.3);
+            border-radius: 20px;
+            transform: rotate(45deg);
+            animation: hologramFloat 4s ease-in-out infinite;
+        }
+        .hologram:nth-child(1) {
+            top: 10%;
+            right: -50px;
+            animation-delay: 0s;
+        }
+        .hologram:nth-child(2) {
+            bottom: 20%;
+            left: -50px;
+            animation-delay: 2s;
+        }
+        @keyframes hologramFloat {
+            0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.3; }
+            50% { transform: rotate(45deg) translateY(-20px); opacity: 0.6; }
+        }
+        /* Features Section */
+        .features {
+            padding: 150px 5%;
+            position: relative;
+            overflow: hidden;
+        }
+        .section-bg {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(ellipse at 50% 0%, rgba(123, 0, 255, 0.1) 0%, transparent 60%);
+        }
+        .section-header {
+            text-align: center;
+            margin-bottom: 80px;
+            position: relative;
+            z-index: 10;
+        }
+        .section-tag {
+            display: inline-block;
+            padding: 0.5rem 1.5rem;
+            background: rgba(255, 0, 229, 0.1);
+            border: 1px solid rgba(255, 0, 229, 0.3);
+            border-radius: 50px;
+            font-size: 0.9rem;
+            color: var(--secondary);
+            margin-bottom: 1.5rem;
+        }
+        .section-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: clamp(2rem, 4vw, 3.5rem);
+            font-weight: 800;
+            margin-bottom: 1rem;
+        }
+        .section-subtitle {
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.6);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 10;
+        }
+        .feature-card {
+            background: linear-gradient(145deg, rgba(26, 26, 46, 0.8), rgba(10, 10, 26, 0.8));
+            border-radius: 30px;
+            padding: 3rem;
+            border: 1px solid rgba(0, 240, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transform-style: preserve-3d;
+        }
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), transparent, rgba(255, 0, 229, 0.1));
+            opacity: 0;
+            transition: opacity 0.5s;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px) rotateX(5deg) rotateY(-5deg);
+            border-color: var(--primary);
+            box-shadow: 0 30px 80px rgba(0, 240, 255, 0.2);
+        }
+        .feature-card:hover::before {
+            opacity: 1;
+        }
+        .feature-icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, var(--primary), var(--tertiary));
+            border-radius: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            margin-bottom: 1.5rem;
+            position: relative;
+            z-index: 1;
+            animation: iconPulse 3s ease-in-out infinite;
+        }
+        @keyframes iconPulse {
+            0%, 100% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.3); }
+            50% { box-shadow: 0 0 50px rgba(0, 240, 255, 0.6); }
+        }
+        .feature-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.4rem;
+            margin-bottom: 1rem;
+            position: relative;
+            z-index: 1;
+        }
+        .feature-desc {
+            color: rgba(255, 255, 255, 0.6);
+            line-height: 1.8;
+            position: relative;
+            z-index: 1;
+        }
+        .feature-number {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            font-family: 'Orbitron', sans-serif;
+            font-size: 4rem;
+            font-weight: 900;
+            color: rgba(0, 240, 255, 0.05);
+            z-index: 0;
+        }
+        /* Specs Section */
+        .specs {
+            padding: 150px 5%;
+            position: relative;
+            background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.02), transparent);
+        }
+        .specs-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4rem;
+            align-items: center;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .specs-visual {
+            position: relative;
+            perspective: 1000px;
+        }
+        .specs-phone {
+            width: 300px;
+            height: 600px;
+            background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
+            border-radius: 45px;
+            position: relative;
+            margin: 0 auto;
+            border: 3px solid rgba(0, 240, 255, 0.3);
+            transform: rotateY(-20deg);
+            animation: specsFloat 5s ease-in-out infinite;
+        }
+        @keyframes specsFloat {
+            0%, 100% { transform: rotateY(-20deg) translateY(0); }
+            50% { transform: rotateY(-15deg) translateY(-20px); }
+        }
+        .specs-screen {
+            position: absolute;
+            inset: 15px;
+            background: linear-gradient(135deg, var(--primary), var(--tertiary));
+            border-radius: 35px;
+            opacity: 0.3;
+            animation: screenPulse 4s ease-in-out infinite;
+        }
+        @keyframes screenPulse {
+            0%, 100% { opacity: 0.3; }
+            50% { opacity: 0.5; }
+        }
+        .spec-point {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            animation: fadeInPoint 0.5s ease-out forwards;
+            opacity: 0;
+        }
+        @keyframes fadeInPoint {
+            to { opacity: 1; }
+        }
+        .spec-point:nth-child(1) { top: 10%; right: -150px; animation-delay: 0.2s; }
+        .spec-point:nth-child(2) { top: 30%; right: -180px; animation-delay: 0.4s; }
+        .spec-point:nth-child(3) { top: 50%; right: -160px; animation-delay: 0.6s; }
+        .spec-point:nth-child(4) { top: 70%; right: -170px; animation-delay: 0.8s; }
+        .spec-point:nth-child(5) { top: 90%; right: -150px; animation-delay: 1s; }
+        .spec-line {
+            width: 60px;
+            height: 2px;
+            background: linear-gradient(90deg, var(--primary), transparent);
+        }
+        .spec-dot {
+            width: 12px;
+            height: 12px;
+            background: var(--primary);
+            border-radius: 50%;
+            box-shadow: 0 0 20px var(--primary);
+            animation: dotPulse 2s ease-in-out infinite;
+        }
+        @keyframes dotPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.3); }
+        }
+        .spec-text {
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.8);
+            white-space: nowrap;
+        }
+        .specs-info {
+            position: relative;
+            z-index: 10;
+        }
+        .specs-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .spec-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 1.5rem;
+            padding: 2rem;
+            background: rgba(26, 26, 46, 0.5);
+            border-radius: 20px;
+            border: 1px solid rgba(0, 240, 255, 0.1);
+            transition: all 0.3s;
+        }
+        .spec-item:hover {
+            background: rgba(0, 240, 255, 0.05);
+            border-color: var(--primary);
+            transform: translateX(10px);
+        }
+        .spec-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(123, 0, 255, 0.2));
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            color: var(--primary);
+            flex-shrink: 0;
+        }
+        .spec-details h4 {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.2rem;
+            margin-bottom: 0.5rem;
+        }
+        .spec-details p {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.95rem;
+        }
+        /* Gallery Section */
+        .gallery {
+            padding: 150px 5%;
+            position: relative;
+            overflow: hidden;
+        }
+        .gallery-container {
+            display: flex;
+            gap: 2rem;
+            animation: scrollGallery 30s linear infinite;
+        }
+        @keyframes scrollGallery {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .gallery-item {
+            min-width: 350px;
+            height: 500px;
+            background: linear-gradient(145deg, rgba(26, 26, 46, 0.8), rgba(10, 10, 26, 0.8));
+            border-radius: 30px;
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            overflow: hidden;
+            position: relative;
+            transition: all 0.5s;
+        }
+        .gallery-item:hover {
+            transform: scale(1.05);
+            border-color: var(--primary);
+            box-shadow: 0 0 60px rgba(0, 240, 255, 0.3);
+        }
+        .gallery-item::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.8));
+            z-index: 1;
+        }
+        .gallery-image {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, var(--primary), var(--tertiary));
+            opacity: 0.5;
+        }
+        .gallery-content {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 2rem;
+            z-index: 2;
+        }
+        .gallery-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.3rem;
+            margin-bottom: 0.5rem;
+        }
+        .gallery-desc {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.9rem;
+        }
+        /* Testimonials */
+        .testimonials {
+            padding: 150px 5%;
+            position: relative;
+        }
+        .testimonials-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .testimonial-card {
+            background: linear-gradient(145deg, rgba(26, 26, 46, 0.6), rgba(10, 10, 26, 0.6));
+            border-radius: 30px;
+            padding: 3rem;
+            border: 1px solid rgba(0, 240, 255, 0.1);
+            position: relative;
+            transition: all 0.5s;
+        }
+        .testimonial-card:hover {
+            transform: translateY(-10px);
+            border-color: var(--primary);
+            box-shadow: 0 20px 60px rgba(0, 240, 255, 0.15);
+        }
+        .testimonial-quote {
+            font-size: 3rem;
+            color: var(--primary);
+            opacity: 0.3;
+            position: absolute;
+            top: 20px;
+            left: 30px;
+        }
+        .testimonial-text {
+            font-size: 1.1rem;
+            line-height: 1.8;
+            color: rgba(255, 255, 255, 0.8);
+            margin-bottom: 2rem;
+            position: relative;
+            z-index: 1;
+        }
+        .testimonial-author {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .author-avatar {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            font-weight: 700;
+        }
+        .