<!doctype html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>پارس جمر | کالبدشکافی فوق‌دقیق سخت‌افزار (Pars Jammer)</title>
    
    <!-- Professional SEO Meta Tags -->
    <meta name="description" content="کالبدشکافی سه‌بعدی تعاملی و بررسی فوق‌دقیق مهندسی سخت‌افزار دستگاه پارس جمر (Pars Jammer). کشف معماری چندلایه، آنتن آبکاری طلا MIFA و هسته پردازشی قدرتمند ESP32." />
    <meta name="keywords" content="پارس جمر, کالبدشکافی سخت افزار, برد پی سی بی, آنتن میفا, طلا, الکترونیک سه بعدی, شبیه ساز سخت افزار, رادیو فرکانس, Pars Jammer, 3D hardware deconstruction, Esp32, MIFA gold" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <link rel="canonical" href="https://ais-pre-7nwmrhdvmkhvp4zbrrf3z7-33945938991.europe-west2.run.app" />

    <!-- Open Graph for Social Networks (Facebook, Link, Telegram, etc.) -->
    <meta property="og:locale" content="fa_IR" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="پارس جمر | کالبدشکافی فوق‌دقیق و تعاملی سخت‌افزار (Pars Jammer)" />
    <meta property="og:description" content="کالبدشکافی سه‌بعدی تعاملی و بررسی فوق‌دقیق مهندسی سخت‌افزار دستگاه پارس جمر (Pars Jammer)." />
    <meta property="og:url" content="https://ais-pre-7nwmrhdvmkhvp4zbrrf3z7-33945938991.europe-west2.run.app" />
    <meta property="og:site_name" content="پارس جمر" />
    <meta property="og:image" content="/logo-512.png" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />
    <meta property="og:image:type" content="image/png" />

    <!-- Twitter Card metadata -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="پارس جمر | کالبدشکافی فوق‌دقیق و تعاملی سخت‌افزار (Pars Jammer)" />
    <meta name="twitter:description" content="کالبدشکافی سه‌بعدی تعاملی و بررسی فوق‌دقیق مهندسی سخت‌افزار دستگاه پارس جمر (Pars Jammer)." />
    <meta name="twitter:image" content="/logo-512.png" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/logo-512.png" />
    <link rel="shortcut icon" type="image/png" href="/logo-512.png" />
    
    <!-- PWA primary meta tags -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#060410" />
    
    <!-- iOS / Safari web app capability -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Pars Jammer" />
    <link rel="apple-touch-icon" href="/logo-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="/logo-512.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/logo-512.png" />
    
    <!-- Preconnect / DNS-Prefetch for Speed Optimization (Saves critical round-trip times) -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://ajax.googleapis.com" />
    
    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://ajax.googleapis.com" />

    <!-- Structured Data Schema JSON-LD (Search Engines love this!) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Product",
      "name": "پارس جمر (Pars Jammer)",
      "image": "/logo-512.png",
      "description": "دستگاه شبیه‌ساز و کالبدشکافی فوق‌دقیق سخت‌افزاری پارس جمر مجهز به آنتن آبکاری طلا و هسته پردازشی پیشرفته.",
      "brand": {
        "@type": "Brand",
        "name": "Pars Jammer"
      },
      "offers": {
        "@type": "Offer",
        "priceCurrency": "IRR",
        "price": "0",
        "availability": "https://schema.org/InStock",
        "url": "https://ais-pre-7nwmrhdvmkhvp4zbrrf3z7-33945938991.europe-west2.run.app"
      }
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "TechArticle",
      "headline": "پارس جمر | کالبدشکافی فوق‌دقیق سخت‌افزار",
      "description": "کالبدشکافی سه‌بعدی تعاملی و بررسی فوق‌دقیق مهندسی سخت‌افزار دستگاه پارس جمر (Pars Jammer). کشف معماری چندلایه، آنتن آبکاری طلا MIFA و هسته پردازشی قدرتمند ESP32.",
      "image": "/logo-512.png",
      "author": {
        "@type": "Organization",
        "name": "پارس جمر"
      },
      "publisher": {
        "@type": "Organization",
        "name": "پارس جمر",
        "logo": {
          "@type": "ImageObject",
          "url": "/logo-512.png"
        }
      },
      "mainEntityOfPage": "https://ais-pre-7nwmrhdvmkhvp4zbrrf3z7-33945938991.europe-west2.run.app"
    }
    </script>

    <!-- CDNs of Google Model Viewer, GSAP, and Plugins (Deferred for speed) -->
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollToPlugin.min.js" defer></script>

    <!-- Source Stylesheet (processed through Vite Tailwind) -->
    <link rel="stylesheet" href="/src/index.css" />
  </head>
  <body class="bg-[#0d091e] text-white overflow-x-hidden select-none">
    
    <!-- 1. Cinematic Intro Loader Screen (Faded out upon completion of intro paths) -->
    <div id="intro-loader" class="fixed inset-0 z-[9999] bg-[#000000] flex items-center justify-center flex-col pointer-events-none">
      <div class="relative w-32 h-32 md:w-48 md:h-48 flex items-center justify-center filter drop-shadow-[0_0_20px_rgba(122,101,237,0.85)]">
        <svg id="loader-logo-svg" viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full text-transparent overflow-visible">
            <polygon points="50,4 92,28 92,72 50,96 8,72 8,28" />
            <path d="M 50,22 L 75,36 L 75,45 L 35,68 L 35,78 L 50,86" />
            <path d="M 50,78 L 25,64 L 25,55 L 65,32 L 65,22 L 50,14" />
            <path d="M 40,30 L 40,42 L 60,53 L 60,70" />
        </svg>
      </div>
    </div>

    <!-- 2. Main Content Wrapper -->
    <div id="app-content" class="min-h-screen font-sans selection:bg-[#7a65ed] selection:text-white bg-[#0d091e]" style="opacity: 0; visibility: hidden;">
      
      <!-- HERO SECTION -->
      <section class="min-h-screen relative flex flex-col justify-center items-center px-6 overflow-hidden border-b border-white/5 pb-24 md:pb-32 pt-20">
        <!-- Background grid tracker scanning lines -->
        <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.01)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.01)_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-35 pointer-events-none"></div>
        
        <!-- Glowing Scanner Circle -->
        <div class="absolute w-[350px] h-[350px] md:w-[500px] md:h-[500px] rounded-full border border-[#7a65ed]/10 flex items-center justify-center animate-pulse pointer-events-none z-0">
          <div class="w-[80%] h-[80%] rounded-full border border-[#7a65ed]/5 flex items-center justify-center">
            <div class="w-[60%] h-[60%] rounded-full border border-[#7a65ed]/20 animate-ping" style="animation-duration: 4s;"></div>
          </div>
        </div>

        <!-- Typography -->
        <div class="text-center relative z-10 max-w-4xl mx-auto flex flex-col items-center">
          <h1 class="text-5xl md:text-8xl font-display font-medium tracking-[0.16em] text-white uppercase text-center relative z-10 w-full leading-tight drop-shadow-[0_0_30px_rgba(122,101,237,0.35)]">
            Pars Jammer
          </h1>
          
          <p class="mt-6 text-sm md:text-lg tracking-[0.18em] uppercase text-zinc-300 font-light max-w-2xl text-center leading-relaxed font-sans px-4">
            اوج اختلال طیف فرکانسی چندبانده، مهندسی پیشرفته و قدرت سیگنال خالص.
          </p>

          <div class="h-16 w-[1px] bg-gradient-to-b from-[#7a65ed] to-transparent my-10 opacity-60"></div>
          
          <!-- Features blocks -->
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-12 w-full max-w-3xl mt-2 px-4 shadow-[0_15px_40px_rgba(122,101,237,0.05)]">
            
            <div class="hero-scroll-fade flex flex-col items-center text-center p-6 bg-white/[0.02] border border-white/5 rounded-2xl backdrop-blur-md hover:border-purple-500/30 transition-all duration-300">
              <span class="text-zinc-500 text-[10px] font-mono uppercase tracking-widest mb-1.5">01 / DISRUPTION | اختلال سیگنال</span>
              <h3 class="text-white text-base font-bold tracking-wide uppercase font-display">Pure Resonance</h3>
              <h4 class="text-purple-400 text-xs font-semibold mt-1 font-sans">رزونانس خالص رادیویی</h4>
              <p class="text-zinc-400 text-xs mt-3 leading-relaxed font-sans text-right rtl">
                انتشار فرکانس‌های بهینه‌سازی شده در گستره طیف چندبانده برای بالاترین همپوشانی و کارایی اختلال سیگنال.
              </p>
            </div>
            
            <div class="hero-scroll-fade flex flex-col items-center text-center p-6 bg-white/[0.02] border border-white/5 rounded-2xl backdrop-blur-md border-b-purple-500/30 hover:border-purple-500/40 transition-all duration-300">
              <span class="text-zinc-500 text-[10px] font-mono uppercase tracking-widest mb-1.5">02 / STRUCTURE | ساختار چندلایه</span>
              <h3 class="text-[#7a65ed] text-base font-bold tracking-wide uppercase font-display">Minimal Form</h3>
              <h4 class="text-zinc-300 text-xs font-semibold mt-1 font-sans">طراحی مینیاتوری نفیس</h4>
              <p class="text-zinc-400 text-xs mt-3 leading-relaxed font-sans text-right rtl">
                شاسی چندلایه آکریلیک دودی باکیفیت بالا، برش‌خورده توسط فرز فوق دقیق CNC برای استواری بدنه.
              </p>
            </div>

            <div class="hero-scroll-fade flex flex-col items-center text-center p-6 bg-white/[0.02] border border-white/5 rounded-2xl backdrop-blur-md hover:border-purple-500/30 transition-all duration-300">
              <span class="text-zinc-500 text-[10px] font-mono uppercase tracking-widest mb-1.5">03 / TRANSCEIVER | سیستم آنتن</span>
              <h3 class="text-white text-base font-bold tracking-wide uppercase font-display">MIFA Gold Array</h3>
              <h4 class="text-yellow-500 text-xs font-semibold mt-1 font-sans">آرایه طلای MIFA</h4>
              <p class="text-zinc-400 text-xs mt-3 leading-relaxed font-sans text-right rtl">
                آبکاری طلای ۲۴ عیار گلد تریس برای بهینه‌سازی توزیع توان و تشدید موج رادیویی بدون هیچ‌گونه تلفات.
              </p>
            </div>
            
          </div>

          <!-- Mouse scroll prompt guide -->
          <div class="mt-16 flex flex-col items-center gap-2 opacity-60 animate-bounce">
            <span class="text-[9px] font-mono text-zinc-400 uppercase tracking-widest font-sans">برای کالبدشکافی و مشاهده جزئیات اسکرول کنید</span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4 text-[#7a65ed]">
              <line x1="12" y1="5" x2="12" y2="19" />
              <polyline points="19 12 12 19 5 12" />
            </svg>
          </div>
        </div>
      </section>

      <!-- EXPLAINER SECTION -->
      <section class="py-24 relative overflow-hidden flex flex-col items-center justify-center text-center px-6 border-t border-b border-white/5 bg-gradient-to-b from-[#090616] to-[#0d091e]">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(122,101,237,0.04)_0%,transparent_70%)] pointer-events-none"></div>
        <div class="max-w-4xl mx-auto flex flex-col items-center relative z-10 hero-scroll-fade">
          <span class="text-[10px] md:text-xs font-mono uppercase tracking-[0.25em] text-purple-400 mb-3 block">
            EXPERIENCE DECONSTRUCTION | نما کارخانه‌ای و مهندسی
          </span>
          <div class="w-12 h-[1px] bg-purple-500/30 mb-6"></div>
          <h2 class="text-4xl md:text-6xl font-display font-medium text-white tracking-[0.12em] uppercase leading-tight drop-shadow-[0_0_20px_rgba(122,101,237,0.2)]">
            Pars Jammer Core
          </h2>
          <p class="mt-4 text-xs md:text-sm text-zinc-400 max-w-xl leading-relaxed font-sans text-center rtl px-4">
            در بخش زیر، با اسکرول کردن صفحه می‌توانید لایه‌های مختلف سخت‌افزار پارس جمر را کالبدشکافی کنید. لایه‌های محافظ، بوردهای الکترونیکی و آنتن گلد تریس به صورت سه‌بعدی و تعاملی از یکدیگر تفکیک می‌شوند.
          </p>
          <p class="text-[10px] md:text-xs text-zinc-500 font-sans leading-relaxed mt-2 tracking-wide uppercase px-4">
            Scroll down to dissect the internal multi-layer architecture in real-time.
          </p>
          <div class="mt-8 flex flex-col items-center gap-1.5 opacity-50">
            <span class="text-[8px] font-mono text-zinc-400 uppercase tracking-widest animate-pulse">interactive module below</span>
            <div class="w-1 h-8 bg-gradient-to-b from-purple-500 to-transparent rounded animate-bounce"></div>
          </div>
        </div>
      </section>

      <!-- 450vh SCROLL TRIGGERS CONTINUOUS EXPLODED VIEW CONTAINER -->
      <div id="exploded-section" class="relative h-[450vh] w-full">
        <div class="sticky top-0 h-[100dvh] w-full flex items-center justify-center overflow-hidden perspective-[2000px] transform-style-3d">
          
          <!-- LEFT SCROLL VERTICAL INDICATOR BAR -->
          <div class="absolute left-3 md:left-12 top-1/2 -translate-y-1/2 flex flex-col items-center gap-2 md:gap-4 z-[90] pointer-events-none mix-blend-screen opacity-80">
             <div class="h-24 md:h-48 w-[2px] bg-white/10 rounded-full overflow-hidden relative shadow-[0_0_10px_rgba(255,255,255,0.05)]">
                <div id="progress-line" class="absolute top-0 w-full bg-[#7a65ed] rounded-full shadow-[0_0_8px_#7a65ed] h-0"></div>
             </div>
             <div class="flex flex-col items-center gap-0.5 md:gap-1">
               <div id="progress-text" class="text-[8px] md:text-[10px] font-mono text-[#7a65ed] tracking-widest font-bold">0%</div>
               <div class="text-[7px] md:text-[8px] font-sans text-zinc-400 uppercase tracking-wider scale-90 md:scale-100">کالبدشکافی</div>
             </div>
          </div>

          <!-- FRONT DYNAMIC TITLE OVERLAYS -->
          <div class="absolute top-[8%] md:top-[10%] left-0 w-full text-center z-50 pointer-events-none px-4">
            <div class="title-breakdown opacity-0 translate-y-8 absolute w-full inset-0">
              <h2 class="text-xl md:text-5xl font-display font-medium text-white mb-1.5 md:mb-3 whitespace-nowrap overflow-hidden text-ellipsis">مهندسی فوق‌دقیق سخت‌افزار</h2>
              <p class="text-[#7a65ed] text-[10px] md:text-sm uppercase opacity-90 font-sans tracking-wider">کالبدشکافی زنده و نمایش جداگانه لایه‌ها</p>
            </div>
          </div>

          <!-- ========================================================== -->
          <!-- 3D INTERACTIVE DEVICE DRAW STACK STAGE -->
          <!-- ========================================================== -->
          <div id="scene-3d" style="transform: rotateX(60deg) rotateZ(-45deg);" class="relative w-[180px] h-[340px] md:w-[240px] md:h-[440px] scale-[0.6] sm:scale-85 md:scale-100 flex items-center justify-center cursor-grab active:cursor-grabbing select-none transition-transform duration-100 ease-out transform-style-3d">
            
            <div class="absolute -bottom-8 md:-bottom-10 left-1/2 -translate-x-1/2 pointer-events-none text-[8px] md:text-[9px] text-zinc-500 font-mono tracking-widest uppercase flex items-center gap-1 opacity-70 whitespace-nowrapShared">
              <span>← DRAG TO ROTATE | کشیدن برای چرخش →</span>
            </div>

            <!-- LAYER 0: WIREFRAME VECTOR CAD BLUEPRINT -->
            <div id="part-blueprint" class="part absolute w-[150%] h-[150%] pointer-events-none z-0 flex items-center justify-center">
               <svg class="w-full h-full text-[#7a65ed] opacity-40 drop-shadow-[0_0_5px_currentColor]" viewBox="0 0 400 600" fill="none" stroke="currentColor" stroke-width="0.5" stroke-dasharray="4 4" vector-effect="non-scaling-stroke">
                 <rect x="100" y="80" width="200" height="440" rx="6" />
                 <rect x="120" y="100" width="160" height="400" rx="4" />
                 <circle cx="200" cy="300" r="100" stroke-dasharray="2 4" stroke-width="0.5" />
                 <circle cx="200" cy="300" r="180" stroke-dasharray="1 5" stroke-width="0.5" />
                 <circle cx="200" cy="300" r="280" stroke-dasharray="3 8" stroke-width="0.25" opacity="0.5" />
                 <line x1="200" y1="0" x2="200" y2="600" stroke-width="0.25" stroke-dasharray="1 3" opacity="0.6" />
                 <line x1="0" y1="300" x2="400" y2="300" stroke-width="0.25" stroke-dasharray="1 3" opacity="0.6" />
                 <path d="M 200 300 L 320 180" />
                 <path d="M 200 300 L 280 280" />
                 <path d="M 200 300 L 140 200" />
                 <path d="M 200 300 L 120 360" />
                 <path d="M 200 300 L 50 450" />
                 <path d="M 200 300 L 160 380" />
                 <text x="325" y="175" class="text-[6px] font-mono fill-currentColor tracking-widest" stroke="none">LID_Z_250</text>
                 <text x="285" y="275" class="text-[6px] font-mono fill-currentColor tracking-widest" stroke="none">ESP_Z_150</text>
                 <text x="110" y="375" class="text-[6px] font-mono fill-currentColor tracking-widest" stroke="none">PCB_Z_20</text>
                 <text x="30" y="465" class="text-[6px] font-mono fill-currentColor tracking-widest" stroke="none">BASE_Z_N150</text>
                 <path d="M 10 10 L 30 10 M 10 10 L 10 30" stroke-width="1" stroke-dasharray="none" />
                 <path d="M 390 10 L 370 10 M 390 10 L 390 30" stroke-width="1" stroke-dasharray="none" />
                 <path d="M 10 590 L 30 590 M 10 590 L 10 570" stroke-width="1" stroke-dasharray="none" />
                 <path d="M 390 590 L 370 590 M 390 590 L 390 570" stroke-width="1" stroke-dasharray="none" />
               </svg>
            </div>

            <!-- LAYER 1: BASE MATTE CHASSIS ENCLOSURE -->
            <div id="part-base" class="part inset-0 w-full h-full bg-[#111113] border border-[#222] shadow-[40px_40px_80px_rgba(0,0,0,0.95),inset_0_0_10px_rgba(255,255,255,0.02)] thickness-base z-10 rounded-[2px] overflow-hidden">
              <div class="absolute inset-0 opacity-[0.08] bg-[repeating-linear-gradient(0deg,transparent,transparent_1px,#fff_1px,#fff_2px)] pointer-events-none mix-blend-overlay"></div>
              <div class="absolute inset-[10px] md:inset-[14px] bg-[#050505] shadow-[inset_0_20px_40px_rgba(0,0,0,1)] flex flex-col justify-end p-2 opacity-95 rounded-[1px] border border-[#111] z-10">
                  <div class="text-[10px] font-mono text-zinc-700 tracking-widest text-center mt-auto opacity-50 pb-2 drop-shadow-md">PARS-JAMMER-CHASSIS-V2</div>
              </div>
            </div>

            <!-- LAYER 2: MATTE BLACK FR4 PCB INTEGRATION -->
            <div id="part-pcb" class="part top-[6%] left-[7.5%] w-[85%] h-[88%] bg-[#15161a] border border-[#2a2b30] shadow-[0_20px_40px_rgba(0,0,0,0.8)] hover:border-[#7a65ed] hover:shadow-[0_0_30px_rgba(122,101,237,0.3)] transition-colors duration-300 cursor-crosshair flex flex-col items-center z-20 overflow-hidden">
               <div class="absolute inset-0 opacity-20 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:16px_16px]"></div>
               
               <!-- Active Particle animation Canvas flow -->
               <canvas id="pcb-particles-canvas" class="absolute inset-0 w-full h-full pointer-events-none z-10 mix-blend-screen opacity-90"></canvas>
               
               <!-- PCB Pads / Header sockets -->
               <div class="absolute left-[3%] top-[10%] bottom-[10%] w-3 flex flex-col justify-between items-center py-2">
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
               </div>
               <div class="absolute right-[3%] top-[10%] bottom-[10%] w-3 flex flex-col justify-between items-center py-2">
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
                  <div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div><div class="w-1.5 h-1.5 bg-[#222] rounded-full border border-[#d4af37]/30"></div>
               </div>

               <!-- HEADER DYNAMIC PINS FOR PCB 3D ELEVATION -->
               <div id="part-pins-left" class="part absolute left-[4%] top-[11.5%] bottom-[11.5%] flex flex-col justify-between">
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
               </div>
               <div id="part-pins-right" class="part absolute right-[4%] top-[11.5%] bottom-[11.5%] flex flex-col justify-between">
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
                  <div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div><div class="pin-3d w-1.5 h-1.5 -rotate-45 shadow-[2px_2px_2px_rgba(0,0,0,0.8)]"></div>
               </div>

               <!-- MICRO COMPONENT: USB C CONNECTION -->
               <div id="part-usb" class="part absolute top-0 left-1/2 -translate-x-1/2 w-12 h-10 bg-gradient-to-b from-[#e0e0e0] to-[#a0a0a0] rounded-sm shadow-[0_5px_10px_rgba(0,0,0,0.6)] border border-[#fff]/40 hover:border-[#7a65ed] hover:shadow-[0_0_15px_#7a65ed] transition-all duration-300 cursor-crosshair">
                  <div class="absolute top-2 w-8 h-2 left-1/2 -translate-x-1/2 bg-[#111] rounded-[1px] flex justify-center items-center shadow-inner">
                     <div class="w-5 h-0.5 bg-black"></div>
                  </div>
                  <div class="absolute bottom-0 left-2 right-2 h-2 flex justify-around">
                     <div class="w-[2px] h-full bg-[#d4af37]"></div><div class="w-[2px] h-full bg-[#d4af37]"></div><div class="w-[2px] h-full bg-[#d4af37]"></div>
                  </div>
               </div>

               <!-- MICRO COMPONENT: CP2102 UART CONVERTER -->
               <div id="part-uart" class="part absolute top-[15%] right-[20%] w-6 h-6 bg-[#111] rounded shadow-md border border-[#222] hover:border-[#7a65ed] hover:shadow-[0_0_15px_#7a65ed] transition-all duration-300 cursor-crosshair flex flex-col justify-between p-0.5">
                  <div class="flex justify-between w-full h-[1px]"><div class="w-[1px] h-full bg-zinc-400"></div><div class="w-[1px] h-full bg-zinc-400"></div></div>
                  <div class="flex justify-between w-full h-[1px]"><div class="w-[1px] h-full bg-zinc-400"></div><div class="w-[1px] h-full bg-zinc-400"></div></div>
               </div>

               <!-- MICRO COMPONENT: CAPACITORS -->
               <div id="part-caps" class="part absolute top-[30%] right-[15%] w-12 h-12 pointer-events-none">
                  <div class="absolute top-2 left-2 w-3 h-5 bg-[#b58c5c] rounded-[1px] shadow border border-[#8a6842]"></div>
                  <div class="absolute bottom-2 left-6 w-2.5 h-3 bg-[#808080] rounded-[1px] shadow border border-[#666]"></div>
               </div>

               <!-- MICRO COMPONENT: ESP32 MOTHER CORE SHIELD -->
               <div id="part-esp" class="part absolute top-[25%] left-1/2 -translate-x-1/2 w-[65%] h-[40%] texture-brushed rounded-[2px] shadow-[0_15px_25px_rgba(0,0,0,0.8)] border border-white/20 hover:border-[#7a65ed] hover:shadow-[0_0_25px_#7a65ed] transition-all duration-300 cursor-crosshair thickness-shield flex flex-col items-center justify-end pb-3">
                   <div class="text-[6px] md:text-[8px] font-mono text-black/40 font-bold tracking-widest uppercase mb-1">ESP-WROOM-32</div>
                   <div class="mt-1 flex gap-1 opacity-40">
                      <div class="w-6 h-6 border border-black/50 rounded-full flex items-center justify-center">
                         <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M5 12.55a11 11 0 0 1 14.08 0 M1.42 9a16 16 0 0 1 21.16 0 M8.53 16.11a6 6 0 0 1 6.95 0 M12 20h.01"/></svg>
                      </div>
                   </div>
               </div>

               <!-- MICRO COMPONENT: GOLD TRACE MIFA ANTENNA -->
               <div id="part-antenna" class="part absolute bottom-[6%] left-[12%] w-[45%] h-[15%] z-30 flex items-end group cursor-crosshair">
                  <svg viewBox="0 0 100 50" preserveAspectRatio="none" class="w-full h-full drop-shadow-[0_2px_3px_rgba(212,175,55,0.4)] group-hover:drop-shadow-[0_0_10px_#7a65ed] transition-all duration-300">
                     <path d="M 0 5 L 80 5 L 80 15 L 10 15 L 10 25 L 90 25 L 90 35 L 20 35 L 20 45 L 100 45" 
                           fill="none" stroke="#d4af37" stroke-width="6" stroke-linecap="square" stroke-linejoin="miter" 
                           class="group-hover:stroke-[#7a65ed] transition-colors duration-300" />
                  </svg>
               </div>

            </div>

            <!-- LAYER 3: COFFEE TRANSMISSION ACRYLIC PROTECTOR SHIELD -->
            <div id="part-lid" class="part inset-0 w-full h-full bg-gradient-to-br from-[#2a2a2e]/80 to-[#121214]/90 backdrop-blur-[6px] border border-white/20 shadow-[0_30px_60px_rgba(0,0,0,0.95),inset_0_1px_1px_rgba(255,255,255,0.2)] hover:border-[#7a65ed] hover:shadow-[0_0_40px_rgba(122,101,237,0.3)] transition-all duration-300 cursor-crosshair thickness-lid z-30 flex items-center justify-center overflow-hidden rounded-[1px] lid-glow-pulse-ani">
              <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-transparent -translate-x-[0%] translate-y-[0%] w-[150%] h-[150%] transform -rotate-45 pointer-events-none"></div>
              <div class="absolute inset-0 opacity-[0.06] pointer-events-none mix-blend-overlay" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 /%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E')"></div>
              
              <!-- Pars Jammer Logo Emblem -->
              <div class="relative w-[45%] aspect-square flex items-center justify-center [transform:translateZ(3px)] drop-shadow-[0_1px_2px_rgba(255,255,255,0.8)] filter contrast-125">
                <div class="relative w-full aspect-square text-white/90 opacity-90 drop-shadow-[0_0_8px_rgba(255,255,255,0.4)]">
                  <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="w-full h-full">
                     <polygon points="50,4 92,28 92,72 50,96 8,72 8,28" />
                     <path d="M 50,22 L 75,36 L 75,45 L 35,68 L 35,78 L 50,86" />
                     <path d="M 50,78 L 25,64 L 25,55 L 65,32 L 65,22 L 50,14" />
                     <path d="M 40,30 L 40,42 L 60,53 L 60,70" />
                  </svg>
                </div>
              </div>
            </div>

          </div>

          <!-- ========================================================== -->
          <!-- STEP-BY-STEP DESCRIPTIONS LABELS OVERLAYS -->
          <!-- ========================================================== -->
          
          <!-- Label State 0: Acrylic Shield -->
          <div class="absolute inset-0 pointer-events-none z-50 max-w-7xl mx-auto flex items-start md:items-center justify-center md:justify-start pt-16 sm:pt-24 md:pt-0 px-6 md:px-12">
              <div class="label-lid opacity-0 translate-y-4 flex flex-col gap-1.5 md:gap-2 bg-zinc-950/90 border border-zinc-500/40 p-3.5 md:p-5 rounded-2xl max-w-[270px] sm:max-w-[290px] md:max-w-[320px] shadow-[0_15px_40px_rgba(0,0,0,0.95)] pointer-events-auto backdrop-blur-md">
                 <h3 class="text-sm md:text-lg font-bold tracking-wide uppercase text-white flex items-center gap-1.5">
                    <span class="text-zinc-400 font-mono">00.</span>
                    Smoked Acrylic Shield
                 </h3>
                 <div class="w-12 md:w-16 h-[2px] bg-zinc-500 mb-0.5"></div>
                 <p class="text-[11px] sm:text-xs md:text-sm text-zinc-100 font-sans font-medium leading-relaxed text-right rtl">
                    روکش آکریلیک دودی برش‌خورده با دستگاه CNC. حکاکی دقیق لیزری جهت نمایش ساختار درونی دستگاه.
                 </p>
                 <p class="hidden md:block text-[10px] md:text-xs text-zinc-400 font-sans leading-relaxed mt-2 border-t border-white/10 pt-1">
                    Precision CNC milled dark translucent acrylic. Laser engraved to reveal the strict geometry of the core.
                 </p>
              </div>
          </div>

          <!-- Label State 1 & 2: MIFA Antenna & ESP Chipset -->
          <div class="absolute inset-0 pointer-events-none z-50 max-w-7xl mx-auto flex flex-col md:flex-row h-full w-full items-center justify-between py-12 sm:py-20 md:py-0 px-6 md:px-12 gap-4 md:gap-0">
              
              <div class="label-chips opacity-0 translate-y-4 flex flex-col items-start gap-1.5 md:gap-2 bg-zinc-950/90 border border-yellow-500/40 p-3.5 md:p-5 rounded-2xl max-w-[270px] sm:max-w-[290px] md:max-w-[320px] shadow-[0_15px_40px_rgba(0,0,0,0.95)] pointer-events-auto backdrop-blur-md">
                 <h3 class="text-sm md:text-lg font-bold tracking-wide uppercase text-white flex items-center gap-1.5">
                    <span class="text-yellow-500 font-mono">01.</span>
                    Gold Trace MIFA
                 </h3>
                 <div class="w-12 md:w-16 h-[2px] bg-yellow-500 mb-0.5"></div>
                 <p class="text-[11px] sm:text-xs md:text-sm text-yellow-100 font-sans font-medium leading-relaxed text-right rtl w-full">
                    گلد تریس میفا: آنتن مارپیچی معکوس F. روکش طلای خالص برای حداکثر رزونانس سیگنال و پخش بی‌نقص.
                 </p>
                 <p class="hidden md:block text-[10px] md:text-xs text-zinc-400 font-sans leading-relaxed mt-2 border-t border-white/10 pt-1">
                    Meandered Inverted-F Antenna. Pure gold plated for maximum signal resonance and flawless broadcasting.
                 </p>
              </div>

              <div class="label-chips opacity-0 translate-y-4 flex flex-col items-end text-right gap-1.5 md:gap-2 bg-zinc-950/90 border border-purple-500/40 p-3.5 md:p-5 rounded-2xl max-w-[270px] sm:max-w-[290px] md:max-w-[320px] shadow-[0_15px_40px_rgba(0,0,0,0.95)] pointer-events-auto backdrop-blur-md">
                 <h3 class="text-sm md:text-lg font-bold tracking-wide uppercase text-white flex items-center gap-1.5">
                    ESP32 Multi-Core
                    <span class="text-[#7a65ed] font-mono">.02</span>
                 </h3>
                 <div class="w-12 md:w-16 h-[2px] bg-[#7a65ed] mb-0.5"></div>
                 <p class="text-[11px] sm:text-xs md:text-sm text-purple-100 font-sans font-medium leading-relaxed text-right rtl w-full">
                    هسته پردازشی توانا. معماری دو هسته‌ای Xtensa جهت پیاده‌سازی الگوریتم‌های پیشرفته مدولاسیون سیگنال.
                 </p>
                 <p class="hidden md:block text-[10px] md:text-xs text-zinc-400 font-sans leading-relaxed mt-2 border-t border-white/10 pt-1 text-left">
                    The processing heart. Dual-core Xtensa microarchitecture driving complex RF sequencing.
                  </p>
              </div>
          </div>

          <!-- Label State 3: Matte FR4 PCB Board -->
          <div class="absolute inset-0 pointer-events-none z-50 max-w-7xl mx-auto flex items-end justify-center pb-16 sm:pb-24 md:pb-32 px-6">
              <div class="label-board opacity-0 translate-y-4 text-center flex flex-col items-center gap-1.5 md:gap-2 bg-zinc-950/90 border border-teal-500/40 p-3.5 md:p-5 rounded-2xl max-w-[270px] sm:max-w-[320px] md:max-w-[420px] shadow-[0_15px_40px_rgba(0,0,0,0.95)] pointer-events-auto backdrop-blur-md">
                 <h3 class="text-sm md:text-lg font-bold tracking-wide uppercase text-white flex items-center gap-1.5">
                    <span class="text-teal-400 font-mono">03.</span>
                    Matte Black FR4 PCB
                 </h3>
                 <div class="w-16 md:w-24 h-[2px] bg-teal-500 mb-0.5"></div>
                 <p class="text-[11px] sm:text-xs md:text-sm text-teal-100 font-sans font-medium leading-relaxed text-right rtl w-full">
                    برد چهار لایه فیبر استخوانی (FR4) با تراکم اتصالات بالا و طراحی بهینه مدار چاپی مجهز به خطوط انتقال همامپدانس.
                 </p>
                 <p class="hidden md:block text-[10px] md:text-xs text-zinc-400 font-sans leading-relaxed mt-2 border-t border-white/10 pt-1">
                    4-layer high density routing board nested perfectly inside the 3D-printed textured chassis.
                 </p>
              </div>
          </div>

          <!-- Label State 4: Final grid layout view -->
          <div class="absolute inset-0 pointer-events-none z-50 max-w-7xl mx-auto p-6 md:p-12 overflow-hidden flex items-center md:items-start justify-center md:justify-start">
              <div class="label-final opacity-0 -translate-x-8 md:mt-[15%] text-center md:text-right rtl flex flex-col items-center md:items-end">
                 <h2 class="text-2xl md:text-5xl font-display font-bold text-white leading-snug">
                    معماری پیشرفته و<br/>سازش‌ناپذیر
                 </h2>
                 <p class="mt-4 text-[#7a65ed] font-semibold tracking-wider text-xs md:text-sm animate-pulse font-sans">جهت مونتاژ مجدد به بالا اسکرول کنید</p>
              </div>
          </div>

          <!-- DYNAMIC HOVER DESCRIPTIONS POPOVER SPECIFICATION CARD -->
          <div id="spec-card" class="fixed bottom-24 md:bottom-12 left-1/2 -translate-x-1/2 md:left-auto md:right-12 md:translate-x-0 z-[100] w-[85%] sm:w-72 bg-[#0d091e]/95 backdrop-blur-xl border border-white/10 p-4 md:p-6 rounded-2xl shadow-2xl transition-all duration-500 transform pointer-events-none opacity-0 translate-y-8 scale-95">
             <div class="w-12 h-[2px] bg-[#7a65ed] mb-4"></div>
             <h4 id="spec-title" class="text-white font-display font-bold text-lg mb-2 uppercase tracking-wide">
               Component Title
             </h4>
             <p id="spec-desc" class="text-zinc-400 text-sm leading-relaxed">
               Hover on hardware modules to inspect their electrical details.
             </p>
          </div>

          <!-- FLOATING FOOTER NAVIGATION CONTROLS -->
          <div class="fixed bottom-5 md:bottom-8 left-1/2 -translate-x-1/2 z-[100] flex flex-col sm:flex-row items-center gap-2 md:gap-4 w-[85%] sm:w-auto">
            
            <!-- Cycle Explorations Button -->
            <button id="cycle-btn" class="w-full sm:w-auto justify-center bg-[#111]/85 hover:bg-[#222]/95 text-white border border-white/20 hover:border-[#7a65ed] hover:shadow-[0_0_25px_#7a65ed] backdrop-blur-md px-5 py-2.5 md:px-6 md:py-3 rounded-full font-sans text-[10px] md:text-xs tracking-widest uppercase transition-all shadow-[0_0_20px_rgba(0,0,0,0.5)] flex items-center gap-2 cursor-pointer">
              <div id="cycle-btn-pulse" class="w-2 h-2 rounded-full bg-[#7a65ed]"></div>
              <span id="cycle-btn-text">کالبدشکافی زنده قطعات</span>
            </button>

            <!-- Augmented Reality Link triggers -->
            <button id="ar-btn" class="w-full sm:w-auto justify-center bg-[#7a65ed]/10 hover:bg-[#7a65ed]/20 backdrop-blur-md text-[#7a65ed] px-5 py-2.5 md:px-6 md:py-3 rounded-full font-sans text-[10px] md:text-xs tracking-widest uppercase border border-[#7a65ed]/50 hover:border-[#7a65ed] transition-all flex items-center gap-2 cursor-pointer shadow-[0_0_15px_rgba(122,101,237,0.2)] hover:shadow-[0_0_25px_rgba(122,101,237,0.5)]">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                 <polyline points="21 8 21 21 3 21 3 8" />
                 <rect x="1" y="3" width="22" height="5" />
                 <line x1="10" y1="12" x2="14" y2="12" />
              </svg>
              نمای واقعیت افزوده (AR)
            </button>
            
          </div>

        </div>
      </div>

      <!-- TECHNICAL DETAILED SPECIFICATION SECTION -->
      <section class="relative z-30 bg-[#0d091e]/80 backdrop-blur-md pt-12 pb-24 border-y border-white/5 mx-auto w-full text-right rtl">
        <div class="max-w-6xl mx-auto px-6">
          <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16 reveal-text">
              <div>
                 <h2 class="text-3xl md:text-5xl font-display font-medium tracking-wide text-white animate-fade-in-down">
                   مشخصات فنی دستگاه / Specifications
                 </h2>
                 <p class="text-[#7a65ed] tracking-widest uppercase text-sm mt-4 opacity-80 font-mono">Hardware Parameters | پارامترهای فنی سخت‌افزار</p>
              </div>
              <div class="w-24 h-1 bg-[#7a65ed] mb-2 md:mb-4 opacity-50"></div>
          </div>
          
          <!-- Mobile view Specifications elements blocks -->
          <div class="md:hidden flex flex-col gap-4 reveal-text">
            
            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">هسته اصلی / Core</span>
                <span class="text-sm font-medium text-white">پردازنده / CPU</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                دو هسته‌ای Xtensa® ۳۲ بیتی LX6 با فرکانس ۲۴۰ مگاهرتز (Dual-Core @ 240MHz)
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">هسته اصلی / Core</span>
                <span class="text-sm font-medium text-white">فرکانس کاری / Freq.</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                رنج ۲.۴ گیگاهرتز الی ۲.۵ گیگاهرتز (2.4 GHz ~ 2.5 GHz)
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">هسته اصلی / Core</span>
                <span class="text-sm font-medium text-white">پروتکل‌ها / Protocols</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                802.11 b/g/n, Bluetooth v4.2 BR/EDR & BLE
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">تغذیه و توان / Power</span>
                <span class="text-sm font-medium text-white">ولتاژ کاری / Voltage</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                ۳.۳ ولت جریان مستقیم (از طریق مبدل کاهنده یواس‌بی تایپ‌سی ۵ ولت)
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">تغذیه و توان / Power</span>
                <span class="text-sm font-medium text-white">جریان مصرفی / Current</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                ۲۴۰ میلی‌آمپر (فرستنده فعال)، ۵ میکروآمپر (حالت خواب عمیق)
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">درگاه‌ها / I-O</span>
                <span class="text-sm font-medium text-white">رابط کنترل / Interface</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                USB Type-C (برق و انتقال دیتا توسط تراشه CP2102N)
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">باند رادیویی / RF</span>
                <span class="text-sm font-medium text-white">نوع آنتن / Antenna</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                آنتن تعبیه‌شده روی بورد MIFA با روکش طلای خالص ضد اکسایش
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">فیزیکی / Physical</span>
                <span class="text-sm font-medium text-white">ابعاد نهایی / Dimensions</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                ۵۵ میلی‌متر × ۲۸ میلی‌متر × ۱۴ میلی‌متر
              </div>
            </div>

            <div class="p-5 bg-white/[0.02] border border-white/5 rounded-2xl flex flex-col gap-2">
              <div class="flex items-center justify-between gap-4">
                <span class="text-xs font-semibold text-[#7a65ed] uppercase tracking-wider">فیزیکی / Physical</span>
                <span class="text-sm font-medium text-white">جنس بدنه / Enclosure</span>
              </div>
              <div class="text-zinc-400 font-light text-sm ltr text-left mt-1">
                شاسی رزین SLA با درپوش محافظ پلی‌کربنات مرغوب دودی
              </div>
            </div>

          </div>

          <!-- Desktop Specifications element table -->
          <div class="hidden md:block overflow-x-auto w-full pb-8 reveal-text">
            <table class="w-full text-right border-collapse">
              <tbody>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">هسته اصلی / Core</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">پردازنده / CPU</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">دو هسته‌ای Xtensa® ۳۲ بیتی LX6 با فرکانس ۲۴۰ مگاهرتز (Dual-Core @ 240MHz)</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">هسته اصلی / Core</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">فرکانس کاری / Freq.</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">رنج ۲.۴ گیگاهرتز الی ۲.۵ گیگاهرتز (2.4 GHz ~ 2.5 GHz)</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">هسته اصلی / Core</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">پروتکل‌ها / Protocols</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">802.11 b/g/n, Bluetooth v4.2 BR/EDR & BLE</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">تغذیه و توان / Power</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">ولتاژ کاری / Voltage</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">۳.۳ ولت جریان مستقیم (از طریق مبدل کاهنده یواس‌بی تایپ‌سی ۵ ولت)</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">تغذیه و توان / Power</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">جریان مصرفی / Current</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">۲۴۰ میلی‌آمپر (فرستنده فعال)، ۵ میکروآمپر (حالت خواب عمیق)</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">درگاه‌ها / I-O</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">رابط کنترل / Interface</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">USB Type-C (برق و انتقال دیتا توسط تراشه CP2102N)</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">باند رادیویی / RF</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">نوع آنتن / Antenna</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">آنتن تعبیه‌شده روی بورد MIFA با روکش طلای خالص ضد اکسایش</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">فیزیکی / Physical</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">ابعاد نهایی / Dimensions</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">۵۵ میلی‌متر × ۲۸ میلی‌متر × ۱۴ میلی‌متر</td>
                </tr>
                <tr class="border-b border-white/5 hover:bg-white/[0.02] transition-colors group">
                  <td class="py-6 pr-4 pl-8 text-sm font-semibold text-[#7a65ed] uppercase tracking-widest w-1/4 align-top opacity-80 group-hover:opacity-100 transition-opacity">فیزیکی / Physical</td>
                  <td class="py-6 pl-8 text-white font-medium text-lg w-1/3 align-top">جنس بدنه / Enclosure</td>
                  <td class="py-6 pl-4 text-zinc-400 font-light text-lg w-full align-top ltr text-left">شاسی رزین باکیفیت SLA و درپوش محافظ پلی‌کربنات مرغوب دودی</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- BRAND SUMMARY PARALLAX OUTRO DETAILS -->
      <section id="final-summary-section" class="py-48 px-6 md:px-24 relative z-20 flex flex-col md:flex-row items-center justify-between gap-16 max-w-7xl mx-auto border-t border-white/5">
        
        <div class="flex-1 reveal-text text-right rtl">
          <h2 class="text-4xl md:text-5xl lg:text-6xl font-display font-medium tracking-tight mb-8 leading-[1.3] text-white">
            تک‌تک قطعات،<br/>
            برای یک هدف.<br/>
            قدرتی فراتر از<br/>
            محاسبات.
          </h2>
          <span class="inline-block mt-4 text-[#7a65ed] text-lg uppercase tracking-widest font-semibold hover:text-white transition-colors duration-300">
            فناوری بی همتای پارس جمر
          </span>
        </div>

        <div class="flex-1 final-imagery relative w-full aspect-square md:aspect-video flex items-center justify-center opacity-0 mt-12 md:mt-0">
             <div class="relative w-48 h-48 opacity-20">
                <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="1" stroke-dasharray="2 2" class="w-full h-full animate-spin" style="animation-duration: 15s;">
                   <circle cx="50" cy="50" r="48" />
                   <circle cx="50" cy="50" r="38" />
                   <polygon points="50,14 82,32 82,68 50,86 18,68 18,32" />
                </svg>
                <div class="absolute inset-0 flex items-center justify-center text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
                  <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-16 h-16">
                     <polygon points="50,4 92,28 92,72 50,96 8,72 8,28" />
                     <path d="M 50,22 L 75,36 L 75,45 L 35,68 L 35,78 L 50,86" />
                     <path d="M 50,78 L 25,64 L 25,55 L 65,32 L 65,22 L 50,14" />
                     <path d="M 40,30 L 40,42 L 60,53 L 60,70" />
                  </svg>
                </div>
             </div>
        </div>

      </section>

      <!-- CORPORATE ATTRIBUTION FOOTER -->
      <footer class="relative py-12 border-t border-white/10 bg-gradient-to-b from-[#0e0a22]/40 to-[#060410]/95 backdrop-blur-xl overflow-hidden z-30">
        <!-- Subtle Ambient Shadows -->
        <div class="absolute top-0 left-1/4 -translate-y-1/2 w-80 h-40 bg-[#7a65ed]/10 rounded-full blur-[80px] pointer-events-none"></div>
        <div class="absolute top-0 right-1/4 -translate-y-1/2 w-80 h-40 bg-purple-500/5 rounded-full blur-[80px] pointer-events-none"></div>

        <div class="max-w-7xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-6 relative z-10">
          
          <div class="flex items-center gap-3">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#7a65ed] opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-[#7a65ed]"></span>
            </span>
            <div class="text-[11px] text-zinc-400 flex flex-col sm:flex-row items-center gap-2 sm:gap-3 rtl text-right" dir="rtl">
              <span class="font-sans font-medium">تمامی حقوق مادی و معنوی این اثر متعلق به پارس جمر می‌باشد.</span>
              <span class="hidden sm:inline text-zinc-700">|</span>
              <span class="font-mono text-[10px] tracking-wider text-zinc-500 uppercase">&copy; <span id="footer-year">2026</span> PARS JAMMER</span>
            </div>
          </div>

          <!-- Parsico attribution capsule with hover glow action -->
          <div class="flex items-center gap-4 bg-white/[0.02] border border-white/5 py-2.5 px-5 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] hover:border-[#7a65ed]/30 hover:bg-white/[0.04] transition-all duration-500 group">
            <div class="text-xs text-zinc-400 font-sans select-none" dir="rtl">
              <span class="text-zinc-400 font-sans font-normal">طراحی شده با عشق توسط </span>
              <a 
                href="https://parsico.org/" 
                target="_blank" 
                rel="noopener noreferrer" 
                class="inline-flex items-center gap-1 text-white hover:text-[#7a65ed] font-semibold transition-all duration-300 relative align-middle"
              >
                <span class="relative font-bold font-sans">
                  پارسی کو
                  <span class="absolute bottom-0 left-0 w-full h-[1px] bg-[#7a65ed] transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
                </span>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-3 h-3 text-[#7a65ed] transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300 inline-block">
                  <line x1="7" y1="17" x2="17" y2="7"></line>
                  <polyline points="7 7 17 7 17 17"></polyline>
                </svg>
              </a>
            </div>
          </div>

        </div>
      </footer>

    </div>

    <!-- 3. Augmented Reality (AR) modal overlay windows -->
    <div id="ar-modal" class="fixed inset-0 z-[200] bg-black/95 backdrop-blur-xl hidden pointer-events-none items-center justify-center p-4 transition-all duration-500">
      <button 
        id="close-ar-btn"
        class="absolute top-6 right-6 text-white font-sans uppercase tracking-widest text-xs border border-white/20 px-4 py-2 hover:bg-white/10 rounded transition-colors z-[60] cursor-pointer rtl"
      >
        بستن [X]
      </button>
      
      <div class="w-full max-w-4xl aspect-[3/4] md:aspect-video bg-[#050505] rounded-xl overflow-hidden border border-[#7a65ed]/30 relative flex flex-col shadow-[0_0_50px_rgba(122,101,237,0.15)]">
        
        <div class="absolute top-0 left-0 w-full p-4 flex flex-row-reverse justify-between items-center z-10 pointer-events-none bg-gradient-to-b from-black/80 to-transparent">
             <div class="font-sans text-xs text-[#7a65ed] tracking-wider font-semibold">پارس جمر :: پیش‌نمایش واقعیت افزوده (AR)</div>
             <div class="flex items-center gap-2">
                 <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                 <span class="text-[10px] text-zinc-400 font-sans tracking-wide uppercase">آماده برای WebXR</span>
             </div>
        </div>

        <model-viewer 
          src="https://modelviewer.dev/shared-assets/models/Astronaut.glb" 
          alt="نمونه اولیه سه‌بعدی پارس جمر"
          ar
          ar-modes="webxr scene-viewer quick-look"
          camera-controls
          auto-rotate
          rotation-per-second="30deg"
          class="w-full h-full flex-1"
          style="width: 100%; height: 100%; background-color: #111;"
        >
          <div slot="poster" class="absolute inset-0 flex flex-col items-center justify-center bg-[#111]">
             <div class="animate-spin w-8 h-8 rounded-full border-t-2 border-r-2 border-[#7a65ed]"></div>
          </div>

          <button slot="ar-button" class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white text-black font-semibold px-6 py-3 rounded-full shadow-[0_5px_20px_rgba(255,255,255,0.3)] hover:scale-105 transition-transform font-sans text-sm tracking-wide cursor-pointer focus:outline-none z-50">
            مشاهده مستقیم در فضای شما
          </button>
        </model-viewer>
        
        <div class="absolute bottom-6 w-full text-center pointer-events-none md:block hidden z-40">
          <p class="text-zinc-500 font-sans text-[10px] max-w-md mx-auto bg-black/60 backdrop-blur px-4 py-2 rounded-full border border-white/5 rtl">
            پشتیبانی بومی از سیستم‌های ARKit (اپل) و ARCore (اندروید) به‌وسیله دوربین گوشی.
          </p>
        </div>
      </div>
    </div>

    <!-- Active dynamic backend script -->
    <script src="/src/script.js" type="module"></script>
    
    <!-- PWA Service Worker Registration -->
    <script>
      // Update copyright year reactively
      document.getElementById('footer-year').innerText = new Date().getFullYear();

      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js')
            .then((registration) => {
              console.log('ServiceWorker registered with scope: ', registration.scope);
            })
            .catch((error) => {
              console.log('ServiceWorker registration failed: ', error);
            });
        });
      }
    </script>
  </body>
</html>
