Visual overhaul: cinematic dark-neon theme, starfield, glassmorphism, Space Grotesk + JetBrains Mono, gradient glows, featured pricing

templates/base.html

@@ -9,19 +9,25 @@
   <meta property="og:title" content="Clean Proxys — residential SOCKS5 proxies">
   <meta property="og:description" content="Clean, fast, geo-targeted residential proxies. No KYC. Pay with Bitcoin. Built for agents and humans alike.">
   <meta property="og:type" content="website">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css">
   <script async src="https://analytics.thetempleofdoom.com/script.js" data-website-id="0e876bc2-1407-4e05-a8d3-3219ee9e5198"></script>
 </head>
 <body>
+  <canvas id="stars"></canvas>
+  <div class="grid-overlay"></div>
+
   <nav>
     <div class="wrap inner">
-      <a class="logo" href="/">CLEAN<span class="dot">.</span>PROXYS</a>
+      <a class="logo" href="/"><span class="mark"></span>CLEAN<b>.PROXYS</b></a>
       <div class="nav-links">
         <a href="/">Home</a>
         <a href="/plans">Residential</a>
         <a href="/dedicated">Dedicated IPs</a>
         {% if user %}<a href="/dashboard">Dashboard</a><a href="/logout">Logout</a>
-        {% else %}<a href="/login">Login</a><a class="cta" href="/signup">Sign up</a>{% endif %}
+        {% else %}<a href="/login">Login</a><a class="cta" href="/signup">Get proxies</a>{% endif %}
       </div>
     </div>
   </nav>
@@ -40,5 +46,45 @@
       &nbsp;·&nbsp; <a href="/llms.txt">llms.txt</a>
     </div>
   </footer>
+
+  <script>
+  // slow, calm starfield — no fast motion
+  (function(){
+    const c = document.getElementById('stars'), x = c.getContext('2d');
+    let W, H, pts = [];
+    function resize(){
+      W = c.width = innerWidth; H = c.height = innerHeight;
+      const n = Math.min(140, Math.floor(W * H / 9000));
+      pts = Array.from({length: n}, () => ({
+        x: Math.random()*W, y: Math.random()*H,
+        r: Math.random()*1.3 + .3,
+        vx: (Math.random()-.5)*.12, vy: (Math.random()-.5)*.12,
+        a: Math.random()*.5 + .2
+      }));
+    }
+    resize(); addEventListener('resize', resize);
+    function tick(){
+      x.clearRect(0,0,W,H);
+      for (const p of pts){
+        p.x += p.vx; p.y += p.vy;
+        if (p.x<0)p.x=W; if(p.x>W)p.x=0; if(p.y<0)p.y=H; if(p.y>H)p.y=0;
+        x.beginPath(); x.arc(p.x,p.y,p.r,0,7);
+        x.fillStyle = 'rgba(180,230,255,'+p.a+')'; x.fill();
+      }
+      // faint constellation lines between near stars
+      for (let i=0;i<pts.length;i++){
+        for (let j=i+1;j<pts.length;j++){
+          const dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y, d=dx*dx+dy*dy;
+          if (d < 120*120){
+            x.beginPath(); x.moveTo(pts[i].x,pts[i].y); x.lineTo(pts[j].x,pts[j].y);
+            x.strokeStyle = 'rgba(0,229,255,'+(0.05*(1-d/(120*120)))+')'; x.stroke();
+          }
+        }
+      }
+      requestAnimationFrame(tick);
+    }
+    tick();
+  })();
+  </script>
 </body>
 </html>