diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..c010d9c
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+<rect width="200" height="200" fill="#ffffff"/>
+  <rect id="pot1" x="70" y="160" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="70;70;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="160;160;180;180"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="40;40;0;0"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="40;40;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="20;20;0;0"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.52;0.62;1.00" values="20;20;0;0"/>
+  </rect>
+  <rect id="pot2" x="150" y="130" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="160;150;150;185;185"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="150;130;130;165;165"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;40;40;0;0"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;40;40;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;20;20;0;0"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.52;0.62;1.00" values="0;20;20;0;0"/>
+  </rect>
+  <rect id="pot3" x="70" y="50" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="70;90;70;70;70"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="50;70;50;50;160"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;40;40;40"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;40;40;40"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;20;20;20"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.20;0.30;0.80;1.00" values="0;0;20;20;20"/>
+  </rect>
+  <rect id="line1" x="132" y="60" width="14" height="120" rx="7" ry="7" fill="#33BEFF" transform="rotate(-45 139 120)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="132;152;132;132;132;132"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="60;160;60;60;60;60"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;120;120;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line2" x="105" y="105" width="14" height="80" rx="7" ry="7" fill="#33BEFF" transform="rotate(30 112 145)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="105;100;105;105;120;120"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="105;160;105;105;115;115"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;80;80;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line3" x="45" y="80" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 52 105)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="45;90;45;45;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="80;70;80;80;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line4" x="30" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 37 70)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="30;90;30;30;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="45;70;45;45;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line5" x="43" y="8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(135 50 33)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="43;90;43;43;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="8;70;8;8;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line6" x="81" y="-8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="81;90;81;81;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="-8;70;-8;-8;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line7" x="120" y="6" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 127 31)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="120;90;120;120;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="6;70;6;6;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line8" x="135" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 142 70)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="135;90;135;135;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="45;70;45;45;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" values="0;0;7;7;7;7"/>
+  </rect>
+</svg>
diff --git a/logo_spline.svg b/logo_spline.svg
new file mode 100644
index 0000000..cc10134
--- /dev/null
+++ b/logo_spline.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+<rect width="200" height="200" fill="#ffffff"/>
+  <rect id="pot1" x="70" y="160" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="70;70;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="160;160;180;180"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="40;40;0;0"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="40;40;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="20;20;0;0"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="20;20;0;0"/>
+  </rect>
+  <rect id="pot2" x="150" y="130" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="160;150;150;185;185"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="150;130;130;165;165"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;40;40;0;0"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;40;40;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;20;20;0;0"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.52;0.62;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;20;20;0;0"/>
+  </rect>
+  <rect id="pot3" x="70" y="50" width="40" height="40" rx="20" ry="20" fill="#33BEFF">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="70;90;70;70;70"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="50;70;50;50;160"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;40;40;40"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;40;40;40"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;20;20;20"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.20;0.30;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;20;20;20"/>
+  </rect>
+  <rect id="line1" x="132" y="60" width="14" height="120" rx="7" ry="7" fill="#33BEFF" transform="rotate(-45 139 120)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="132;152;132;132;70;70"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="60;160;60;60;60;60"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;120;120;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.62;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line2" x="105" y="105" width="14" height="80" rx="7" ry="7" fill="#33BEFF" transform="rotate(30 112 145)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="105;100;105;105;120;120"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="105;160;105;105;115;115"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;80;80;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.10;0.20;0.60;0.63;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line3" x="45" y="80" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 52 105)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;90;45;45;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="80;70;80;80;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.30;0.32;0.68;0.70;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line4" x="30" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 37 70)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="30;90;30;30;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;70;45;45;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.32;0.34;0.70;0.72;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line5" x="43" y="8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(135 50 33)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="43;90;43;43;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="8;70;8;8;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.34;0.36;0.72;0.74;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line6" x="81" y="-8" width="14" height="50" rx="7" ry="7" fill="#B1B1B1">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="81;90;81;81;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="-8;70;-8;-8;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.36;0.38;0.74;0.76;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line7" x="120" y="6" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(45 127 31)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="120;90;120;120;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="6;70;6;6;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.38;0.40;0.76;0.78;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+  <rect id="line8" x="135" y="45" width="14" height="50" rx="7" ry="7" fill="#B1B1B1" transform="rotate(90 142 70)">
+    <animate attributeName="x" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="135;90;135;135;90;90"/>
+    <animate attributeName="y" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="45;70;45;45;70;70"/>
+    <animate attributeName="width" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;14;14;14;14"/>
+    <animate attributeName="height" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;50;50;0;0"/>
+    <animate attributeName="rx" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+    <animate attributeName="ry" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0.00;0.40;0.42;0.78;0.80;1.00" keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0" values="0;0;7;7;7;7"/>
+  </rect>
+</svg>
diff --git a/vpn-logo-v2-tunnel.svg b/vpn-logo-v2-tunnel.svg
new file mode 100644
index 0000000..5265a8e
--- /dev/null
+++ b/vpn-logo-v2-tunnel.svg
@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
+      .tunnel-outer { stroke: #4687F4; stroke-width: 20; stroke-linecap: round; fill: none; opacity: 0.25; }
+      .tunnel-inner { stroke: #4687F4; stroke-width: 8; stroke-linecap: round; fill: none; }
+      .tunnel-dash { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; fill: none; stroke-dasharray: 8 12; }
+      .node-fill { fill: #4687F4; }
+      .node-stroke { stroke: #4687F4; stroke-width: 4; fill: none; }
+      .lock-fill { fill: #1E1E1E; }
+      .lock-hole { fill: #ffffff; }
+      .data-dot { fill: #4687F4; }
+    </style>
+  </defs>
+  
+  <rect class="bg" width="512" height="512" rx="64"/>
+  
+  <!-- Burst lines (global network) -->
+  <line class="burst" x1="256" y1="256" x2="256" y2="72"/>
+  <line class="burst" x1="256" y1="256" x2="382" y2="118"/>
+  <line class="burst" x1="256" y1="256" x2="130" y2="118"/>
+  <line class="burst" x1="256" y1="256" x2="440" y2="256"/>
+  <line class="burst" x1="256" y1="256" x2="72" y2="256"/>
+  <line class="burst" x1="256" y1="256" x2="340" y2="80"/>
+  <line class="burst" x1="256" y1="256" x2="172" y2="80"/>
+  
+  <!-- VPN Tunnel: encrypted data pipe going through the center -->
+  <!-- Tunnel outer glow -->
+  <path class="tunnel-outer" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
+  
+  <!-- Tunnel inner pipe -->
+  <path class="tunnel-inner" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
+  
+  <!-- Dashed encryption markers along tunnel -->
+  <path class="tunnel-dash" d="M 80 400 Q 160 320 256 300 Q 352 320 432 400"/>
+  
+  <!-- Entry/Exit nodes -->
+  <circle class="node-fill" cx="80" cy="400" r="16"/>
+  <circle class="node-fill" cx="432" cy="400" r="16"/>
+  
+  <!-- Data packets moving through tunnel -->
+  <circle class="data-dot" cx="160" cy="352" r="6"/>
+  <circle class="data-dot" cx="220" cy="318" r="6"/>
+  <circle class="data-dot" cx="292" cy="318" r="6"/>
+  <circle class="data-dot" cx="352" cy="352" r="6"/>
+  
+  <!-- Central Lock (encryption hub) -->
+  <rect class="lock-fill" x="228" y="270" width="56" height="42" rx="8"/>
+  <!-- Lock shackle -->
+  <path class="lock-fill" d="M 240 270 L 240 252 Q 240 238 256 238 Q 272 238 272 252 L 272 270" 
+        fill="none" stroke="#1E1E1E" stroke-width="8" stroke-linecap="round"/>
+  <!-- Keyhole -->
+  <circle class="lock-hole" cx="256" cy="288" r="6"/>
+  <rect class="lock-hole" x="252" y="293" width="8" height="12" rx="3"/>
+  
+  <!-- Server nodes (top) -->
+  <circle class="node-stroke" cx="200" cy="160" r="20"/>
+  <rect class="node-fill" x="190" y="150" width="20" height="20" rx="3" opacity="0.8"/>
+  
+  <circle class="node-stroke" cx="312" cy="160" r="20"/>
+  <rect class="node-fill" x="302" y="150" width="20" height="20" rx="3" opacity="0.8"/>
+  
+  <!-- Connection lines from server nodes to hub -->
+  <line class="tunnel-inner" x1="210" y1="178" x2="240" y2="240"/>
+  <line class="tunnel-inner" x1="302" y1="178" x2="272" y2="240"/>
+</svg>
diff --git a/vpn-logo-v3-minimal.svg b/vpn-logo-v3-minimal.svg
new file mode 100644
index 0000000..d3a169e
--- /dev/null
+++ b/vpn-logo-v3-minimal.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .line { stroke: #1E1E1E; stroke-width: 14; stroke-linecap: round; fill: none; }
+      .line-blue { stroke: #4687F4; stroke-width: 14; stroke-linecap: round; fill: none; }
+      .line-thin { stroke: #4687F4; stroke-width: 8; stroke-linecap: round; fill: none; }
+      .fill-blue { fill: #4687F4; }
+      .fill-dark { fill: #1E1E1E; }
+      .fill-white { fill: #ffffff; }
+    </style>
+  </defs>
+  
+  <rect class="bg" width="512" height="512" rx="64"/>
+  
+  <!-- Minimal lock icon as centerpiece -->
+  <!-- Lock body -->
+  <rect class="fill-blue" x="226" y="234" width="60" height="44" rx="10"/>
+  <!-- Lock shackle -->
+  <path class="fill-blue" d="M 246 234 L 246 212 Q 246 192 256 192 Q 266 192 266 212 L 266 234"/>
+  <!-- White keyhole -->
+  <circle class="fill-white" cx="256" cy="252" r="7"/>
+  <rect class="fill-white" x="251" y="258" width="10" height="14" rx="3"/>
+  
+  <!-- Network nodes: 4 client nodes around -->
+  <!-- Top node -->
+  <circle class="fill-dark" cx="256" cy="120" r="16"/>
+  <line class="line" x1="256" y1="136" x2="256" y2="190"/>
+  
+  <!-- Left node -->
+  <circle class="fill-dark" cx="100" cy="256" r="16"/>
+  <line class="line" x1="116" y1="256" x2="188" y2="256"/>
+  
+  <!-- Right node -->
+  <circle class="fill-dark" cx="412" cy="256" r="16"/>
+  <line class="line" x1="396" y1="256" x2="324" y2="256"/>
+  
+  <!-- Bottom-left node -->
+  <circle class="fill-blue" cx="140" cy="400" r="16"/>
+  <!-- Bottom-right node -->
+  <circle class="fill-blue" cx="372" cy="400" r="16"/>
+  
+  <!-- Encrypted tunnel paths (dashed) -->
+  <line class="line-thin" x1="246" y1="290" x2="210" y2="340" stroke-dasharray="6 6"/>
+  <line class="line-thin" x1="266" y1="290" x2="302" y2="340" stroke-dasharray="6 6"/>
+  
+  <line class="line-blue" x1="210" y1="340" x2="152" y2="395"/>
+  <line class="line-blue" x1="302" y1="340" x2="360" y2="395"/>
+  
+  <!-- Data flow dots -->
+  <circle class="fill-blue" cx="228" cy="315" r="5"/>
+  <circle class="fill-blue" cx="284" cy="315" r="5"/>
+</svg>
diff --git a/vpn-logo-v4-hexagon.svg b/vpn-logo-v4-hexagon.svg
new file mode 100644
index 0000000..c78272b
--- /dev/null
+++ b/vpn-logo-v4-hexagon.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .hex { stroke: #4687F4; stroke-width: 5; fill: none; }
+      .hex-fill { fill: #4687F4; }
+      .hex-dark { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
+      .key-body { fill: #1E1E1E; }
+      .key-cut { fill: #ffffff; }
+      .burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
+      .arc { stroke: #4687F4; stroke-width: 12; stroke-linecap: round; fill: none; }
+      .dot { fill: #4687F4; }
+      .dot-dark { fill: #1E1E1E; }
+    </style>
+  </defs>
+  
+  <rect class="bg" width="512" height="512" rx="64"/>
+  
+  <!-- Burst rays (speed/global) -->
+  <line class="burst" x1="256" y1="256" x2="256" y2="56"/>
+  <line class="burst" x1="256" y1="256" x2="394" y2="100"/>
+  <line class="burst" x1="256" y1="256" x2="118" y2="100"/>
+  <line class="burst" x1="256" y1="256" x2="456" y2="256"/>
+  <line class="burst" x1="256" y1="256" x2="56" y2="256"/>
+  <line class="burst" x1="256" y1="256" x2="350" y2="62"/>
+  <line class="burst" x1="256" y1="256" x2="162" y2="62"/>
+  
+  <!-- Central hexagonal hub (honeycomb network) -->
+  <!-- Outer hex ring -->
+  <polygon class="hex-dark" points="256,156 342,206 342,306 256,356 170,306 170,206"/>
+  
+  <!-- Inner hex ring (smaller, nested) -->
+  <polygon class="hex" points="256,186 316,220 316,292 256,326 196,292 196,220"/>
+  
+  <!-- Filled inner hex (core) -->
+  <polygon class="hex-fill" points="256,210 296,234 296,278 256,302 216,278 216,234"/>
+  
+  <!-- Key icon inside the core hex -->
+  <!-- Key shaft -->
+  <rect class="key-cut" x="250" y="244" width="28" height="10" rx="3"/>
+  <!-- Key bow (circle) -->
+  <circle class="key-cut" cx="248" cy="258" r="10" 
+          fill="none" stroke="#ffffff" stroke-width="4"/>
+  <!-- Key teeth -->
+  <rect class="key-cut" x="270" y="250" width="4" height="8" rx="1"/>
+  <rect class="key-cut" x="266" y="246" width="4" height="6" rx="1"/>
+  
+  <!-- Connecting arcs from hex to client nodes -->
+  <!-- Left arc -->
+  <path class="arc" d="M 170 256 Q 100 256 90 320"/>
+  <!-- Right arc -->
+  <path class="arc" d="M 342 256 Q 412 256 422 320"/>
+  <!-- Bottom-left arc -->
+  <path class="arc" d="M 213 356 Q 170 430 120 430"/>
+  <!-- Bottom-right arc -->
+  <path class="arc" d="M 299 356 Q 342 430 392 430"/>
+  
+  <!-- Client nodes -->
+  <circle class="dot" cx="90" cy="320" r="18"/>
+  <circle class="dot" cx="422" cy="320" r="18"/>
+  <circle class="dot" cx="120" cy="430" r="18"/>
+  <circle class="dot" cx="392" cy="430" r="18"/>
+  
+  <!-- Small connection dots along hex edges -->
+  <circle class="dot-dark" cx="256" cy="156" r="5"/>
+  <circle class="dot-dark" cx="342" cy="206" r="5"/>
+  <circle class="dot-dark" cx="342" cy="306" r="5"/>
+  <circle class="dot-dark" cx="256" cy="356" r="5"/>
+  <circle class="dot-dark" cx="170" cy="306" r="5"/>
+  <circle class="dot-dark" cx="170" cy="206" r="5"/>
+</svg>
diff --git a/vpn-logo-v5-radar.svg b/vpn-logo-v5-radar.svg
new file mode 100644
index 0000000..0409ce9
--- /dev/null
+++ b/vpn-logo-v5-radar.svg
@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .ring { stroke: #4687F4; stroke-width: 4; fill: none; opacity: 0.5; }
+      .ring-bold { stroke: #4687F4; stroke-width: 5; fill: none; opacity: 0.8; }
+      .burst { stroke: #1E1E1E; stroke-width: 16; stroke-linecap: round; fill: none; }
+      .shield-fill { fill: #4687F4; }
+      .shield-cut { fill: #ffffff; }
+      .arc { stroke: #4687F4; stroke-width: 10; stroke-linecap: round; fill: none; }
+      .dot-blue { fill: #4687F4; }
+      .dot-dark { fill: #1E1E1E; }
+      .line-dark { stroke: #1E1E1E; stroke-width: 12; stroke-linecap: round; fill: none; }
+    </style>
+  </defs>
+  
+  <rect class="bg" width="512" height="512" rx="64"/>
+  
+  <!-- Concentric security rings (radar / perimeter defense) -->
+  <circle class="ring" cx="256" cy="256" r="100"/>
+  <circle class="ring" cx="256" cy="256" r="140"/>
+  <circle class="ring" cx="256" cy="256" r="180"/>
+  <circle class="ring-bold" cx="256" cy="256" r="220"/>
+  
+  <!-- Scan line (rotating radar beam effect) -->
+  <path class="arc" d="M 256 256 L 130 130" opacity="0.4"/>
+  
+  <!-- Burst rays (external threats / signal reach) -->
+  <line class="burst" x1="256" y1="256" x2="256" y2="48"/>
+  <line class="burst" x1="256" y1="256" x2="410" y2="86"/>
+  <line class="burst" x1="256" y1="256" x2="102" y2="86"/>
+  <line class="burst" x1="256" y1="256" x2="464" y2="256"/>
+  <line class="burst" x1="256" y1="256" x2="48" y2="256"/>
+  
+  <!-- Central shield (protection core) -->
+  <path class="shield-fill" d="M 256 140
+           L 316 168
+           L 316 230
+           Q 316 274 256 296
+           Q 196 274 196 230
+           L 196 168 Z"/>
+  
+  <!-- Keyhole cutout on shield -->
+  <circle class="shield-cut" cx="256" cy="210" r="8"/>
+  <rect class="shield-cut" x="250" y="217" width="12" height="18" rx="4"/>
+  
+  <!-- VPN tunnel arcs from shield to outer nodes -->
+  <path class="arc" d="M 196 280 Q 130 340 110 410"/>
+  <path class="arc" d="M 316 280 Q 382 340 402 410"/>
+  
+  <!-- Outer secure nodes -->
+  <circle class="dot-blue" cx="110" cy="410" r="20"/>
+  <circle class="dot-blue" cx="402" cy="410" r="20"/>
+  
+  <!-- Device icons inside nodes (monitor silhouette) -->
+  <rect class="shield-cut" x="102" y="404" width="16" height="12" rx="2"/>
+  <line class="shield-cut" x1="110" y1="418" x2="110" y2="424" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
+  
+  <rect class="shield-cut" x="394" y="404" width="16" height="12" rx="2"/>
+  <line class="shield-cut" x1="402" y1="418" x2="402" y2="424" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
+  
+  <!-- Top server node -->
+  <circle class="dot-dark" cx="256" cy="72" r="14"/>
+  <!-- Server rack lines -->
+  <line class="shield-cut" x1="248" y1="68" x2="264" y2="68" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+  <line class="shield-cut" x1="248" y1="72" x2="264" y2="72" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+  <line class="shield-cut" x1="248" y1="76" x2="264" y2="76" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+  
+  <!-- Connection from top server to shield -->
+  <line class="line-dark" x1="256" y1="86" x2="256" y2="136"/>
+  
+  <!-- Perimeter dots at ring intersections -->
+  <circle class="dot-blue" cx="256" cy="36" r="5" opacity="0.6"/>
+  <circle class="dot-blue" cx="356" cy="76" r="5" opacity="0.6"/>
+  <circle class="dot-blue" cx="426" cy="176" r="5" opacity="0.6"/>
+  <circle class="dot-blue" cx="476" cy="256" r="5" opacity="0.6"/>
+  <circle class="dot-blue" cx="86" cy="176" r="5" opacity="0.6"/>
+  <circle class="dot-blue" cx="36" cy="256" r="5" opacity="0.6"/>
+</svg>
diff --git a/vpn-logo.svg b/vpn-logo.svg
new file mode 100644
index 0000000..3f6643c
--- /dev/null
+++ b/vpn-logo.svg
@@ -0,0 +1,69 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .bg { fill: #ffffff; }
+      .burst { stroke: #1E1E1E; stroke-width: 18; stroke-linecap: round; fill: none; }
+      .tunnel { stroke: #4687F4; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; fill: none; }
+      .node { fill: #4687F4; }
+      .keyhole { fill: #ffffff; }
+    </style>
+  </defs>
+  
+  <!-- Background -->
+  <rect class="bg" width="512" height="512" rx="64"/>
+  
+  <!-- ===== RADIATING BURST LINES (global server network / speed) ===== -->
+  <!-- Top -->
+  <line class="burst" x1="256" y1="256" x2="256" y2="64"/>
+  <!-- Top-right -->
+  <line class="burst" x1="256" y1="256" x2="390" y2="110"/>
+  <!-- Top-right close -->
+  <line class="burst" x1="256" y1="256" x2="350" y2="72"/>
+  <!-- Top-left -->
+  <line class="burst" x1="256" y1="256" x2="122" y2="110"/>
+  <!-- Top-left close -->
+  <line class="burst" x1="256" y1="256" x2="162" y2="72"/>
+  <!-- Right -->
+  <line class="burst" x1="256" y1="256" x2="448" y2="256"/>
+  <!-- Left -->
+  <line class="burst" x1="256" y1="256" x2="64" y2="256"/>
+  
+  <!-- ===== ENCRYPTED VPN TUNNELS (branches to clients) ===== -->
+  <!-- Left tunnel: curves down-left to client node -->
+  <path class="tunnel" d="M 218 290 Q 170 310 140 370"/>
+  <!-- Right tunnel: curves down-right to client node -->
+  <path class="tunnel" d="M 294 290 Q 342 310 372 370"/>
+  
+  <!-- ===== VPN CLIENT NODES ===== -->
+  <circle class="node" cx="140" cy="370" r="28"/>
+  <circle class="node" cx="372" cy="370" r="28"/>
+  
+  <!-- ===== CENTRAL VPN HUB (shield-hexagon with lock) ===== -->
+  <!-- Shield/Hexagon central hub -->
+  <path class="node" d="M 256 170 
+           L 330 200 
+           L 330 280 
+           Q 330 338 256 370 
+           Q 182 338 182 280 
+           L 182 200 Z"/>
+  
+  <!-- Lock keyhole (encryption symbol) -->
+  <!-- Lock body -->
+  <rect class="keyhole" x="236" y="245" width="40" height="32" rx="5"/>
+  <!-- Lock shackle -->
+  <path class="keyhole" d="M 246 245 
+           L 246 230 
+           Q 246 215 256 215 
+           Q 266 215 266 230 
+           L 266 245" 
+        fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>
+  <!-- Keyhole dot -->
+  <circle class="node" cx="256" cy="258" r="5"/>
+  <!-- Keyhole slot -->
+  <rect class="node" x="253" y="262" width="6" height="10" rx="2"/>
+  
+  <!-- ===== CONNECTION DOTS on shield (data flow indicator) ===== -->
+  <circle cx="256" cy="195" r="4" fill="#ffffff" opacity="0.6"/>
+  <circle cx="310" cy="220" r="3.5" fill="#ffffff" opacity="0.4"/>
+  <circle cx="202" cy="220" r="3.5" fill="#ffffff" opacity="0.4"/>
+</svg>
diff --git a/vpn-v10-interlocking.svg b/vpn-v10-interlocking.svg
new file mode 100644
index 0000000..c5ac256
--- /dev/null
+++ b/vpn-v10-interlocking.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#3B82F6"/>
+      <stop offset="100%" style="stop-color:#8B5CF6"/>
+    </linearGradient>
+    <linearGradient id="g4" x1="100%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#06B6D4"/>
+      <stop offset="100%" style="stop-color:#3B82F6"/>
+    </linearGradient>
+  </defs>
+  
+  <rect width="512" height="512" rx="96" fill="#0F172A"/>
+  
+  <!-- Two interlocking rings - dual VPN tunnel concept -->
+  <g fill="none" stroke-width="20" stroke-linecap="round">
+    <!-- Left ring -->
+    <circle cx="200" cy="300" r="120" stroke="url(#g3)" opacity="0.9"/>
+    <!-- Right ring -->
+    <circle cx="312" cy="300" r="120" stroke="url(#g4)" opacity="0.9"/>
+    
+    <!-- Ring data flow indicators -->
+    <circle cx="200" cy="180" r="6" fill="url(#g3)" stroke="none"/>
+    <circle cx="312" cy="180" r="6" fill="url(#g4)" stroke="none"/>
+    
+    <!-- Bottom ring highlights -->
+    <circle cx="160" cy="380" r="5" fill="url(#g3)" stroke="none"/>
+    <circle cx="352" cy="380" r="5" fill="url(#g4)" stroke="none"/>
+  </g>
+  
+  <!-- Central lock - sits at the intersection of rings -->
+  <g transform="translate(256,300)">
+    <!-- Lock body -->
+    <rect x="-36" y="-8" width="72" height="56" rx="12" fill="#ffffff"/>
+    <!-- Lock shackle -->
+    <path d="M -24 -8 L -24 -32 Q -24 -48 0 -48 Q 24 -48 24 -32 L 24 -8" 
+          fill="none" stroke="#ffffff" stroke-width="10" stroke-linecap="round"/>
+    <!-- Keyhole -->
+    <circle cx="0" cy="14" r="8" fill="#0F172A"/>
+    <path d="M -5 20 L 5 20 L 7 38 L -7 38 Z" fill="#0F172A"/>
+    
+    <!-- Ring intersection glow -->
+    <circle cx="-26" cy="-4" r="10" fill="#0F172A"/>
+    <circle cx="26" cy="-4" r="10" fill="#0F172A"/>
+  </g>
+  
+  <!-- Outer node dots -->
+  <circle cx="110" cy="210" r="8" fill="url(#g3)"/>
+  <circle cx="402" cy="210" r="8" fill="url(#g4)"/>
+</svg>
diff --git a/vpn-v11-tunnel-perspective.svg b/vpn-v11-tunnel-perspective.svg
new file mode 100644
index 0000000..9fea3aa
--- /dev/null
+++ b/vpn-v11-tunnel-perspective.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g5" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#60A5FA"/>
+      <stop offset="100%" style="stop-color:#1D4ED8"/>
+    </linearGradient>
+  </defs>
+  
+  <rect width="512" height="512" rx="96" fill="#ffffff"/>
+  
+  <!-- Perspective tunnel - 3 nested rounded rectangles getting smaller = depth -->
+  <g fill="none" stroke="url(#g5)" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Outermost frame -->
+    <rect x="80" y="80" width="352" height="352" rx="60" stroke-width="6" opacity="0.2"/>
+    <!-- Second frame -->
+    <rect x="120" y="120" width="272" height="272" rx="48" stroke-width="6" opacity="0.35"/>
+    <!-- Third frame -->
+    <rect x="160" y="160" width="192" height="192" rx="36" stroke-width="6" opacity="0.55"/>
+    <!-- Fourth frame -->
+    <rect x="200" y="200" width="112" height="112" rx="24" stroke-width="8" opacity="0.8"/>
+  </g>
+  
+  <!-- Lock at center of tunnel -->
+  <g>
+    <rect x="236" y="240" width="40" height="32" rx="8" fill="#1D4ED8"/>
+    <path d="M 246 240 L 246 222 Q 246 210 256 210 Q 266 210 266 222 L 266 240" 
+          fill="none" stroke="#1D4ED8" stroke-width="7" stroke-linecap="round"/>
+    <circle cx="256" cy="254" r="5" fill="#ffffff"/>
+    <rect x="252" y="258" width="8" height="8" rx="2" fill="#ffffff"/>
+  </g>
+  
+  <!-- Corner network dots -->
+  <circle cx="80" cy="80" r="8" fill="#3B82F6" opacity="0.3"/>
+  <circle cx="432" cy="80" r="8" fill="#3B82F6" opacity="0.3"/>
+  <circle cx="80" cy="432" r="8" fill="#3B82F6" opacity="0.3"/>
+  <circle cx="432" cy="432" r="8" fill="#3B82F6" opacity="0.3"/>
+  
+  <!-- Data flow dots along tunnel edges -->
+  <circle cx="140" cy="140" r="4" fill="#60A5FA"/>
+  <circle cx="372" cy="140" r="4" fill="#60A5FA"/>
+  <circle cx="140" cy="372" r="4" fill="#60A5FA"/>
+  <circle cx="372" cy="372" r="4" fill="#60A5FA"/>
+</svg>
diff --git a/vpn-v12-letterform.svg b/vpn-v12-letterform.svg
new file mode 100644
index 0000000..cd83d91
--- /dev/null
+++ b/vpn-v12-letterform.svg
@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g6" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#2563EB"/>
+      <stop offset="100%" style="stop-color:#7C3AED"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Warm dark bg -->
+  <rect width="512" height="512" rx="96" fill="#1E1B4B"/>
+  
+  <!-- Abstract VPN letterform: V + shield -->
+  <!-- Large V shape forming a shield silhouette -->
+  <g stroke="url(#g6)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <!-- Left shield arm + V leg -->
+    <path d="M 130 110 L 256 340 L 256 420"/>
+    <!-- Right shield arm + V leg -->
+    <path d="M 382 110 L 256 340 L 256 420"/>
+    <!-- Shield top curve -->
+    <path d="M 130 110 Q 256 30 382 110"/>
+  </g>
+  
+  <!-- Inner V (smaller, offset up) -->
+  <path d="M 175 150 L 256 300 M 337 150 L 256 300" 
+        stroke="url(#g6)" stroke-width="8" stroke-linecap="round" fill="none" opacity="0.5"/>
+  
+  <!-- Center dot = keyhole / eye -->
+  <circle cx="256" cy="260" r="16" fill="#1E1B4B" stroke="url(#g6)" stroke-width="6"/>
+  <circle cx="256" cy="260" r="6" fill="url(#g6)"/>
+  
+  <!-- Network nodes at V tips -->
+  <circle cx="130" cy="110" r="10" fill="url(#g6)"/>
+  <circle cx="382" cy="110" r="10" fill="url(#g6)"/>
+  
+  <!-- Bottom client nodes -->
+  <circle cx="190" cy="440" r="10" fill="url(#g6)" opacity="0.7"/>
+  <circle cx="322" cy="440" r="10" fill="url(#g6)" opacity="0.7"/>
+  
+  <!-- Horizontal network line between bottom nodes -->
+  <line x1="200" y1="440" x2="312" y2="440" stroke="url(#g6)" stroke-width="3" opacity="0.3"/>
+</svg>
diff --git a/vpn-v13-circuit.svg b/vpn-v13-circuit.svg
new file mode 100644
index 0000000..559e88d
--- /dev/null
+++ b/vpn-v13-circuit.svg
@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g7" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1E40AF"/>
+      <stop offset="50%" style="stop-color:#3B82F6"/>
+      <stop offset="100%" style="stop-color:#06B6D4"/>
+    </linearGradient>
+  </defs>
+  
+  <rect width="512" height="512" rx="96" fill="#0B1121"/>
+  
+  <!-- Circuit board VPN concept -->
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round">
+    
+    <!-- Main circuit lines -->
+    <!-- Left to center -->
+    <path d="M 60 220 L 160 220 L 200 260" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
+    <!-- Right to center -->  
+    <path d="M 452 220 L 352 220 L 312 260" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
+    <!-- Bottom left to center -->
+    <path d="M 160 440 L 200 380 L 226 340" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
+    <!-- Bottom right to center -->
+    <path d="M 352 440 L 312 380 L 286 340" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
+    <!-- Top to center -->
+    <path d="M 256 60 L 256 180" stroke="url(#g7)" stroke-width="6" opacity="0.4"/>
+    
+    <!-- Circuit node pads -->
+    <circle cx="60" cy="220" r="7" fill="url(#g7)" opacity="0.6"/>
+    <circle cx="452" cy="220" r="7" fill="url(#g7)" opacity="0.6"/>
+    <circle cx="160" cy="440" r="7" fill="url(#g7)" opacity="0.6"/>
+    <circle cx="352" cy="440" r="7" fill="url(#g7)" opacity="0.6"/>
+    <circle cx="256" cy="60" r="7" fill="url(#g7)" opacity="0.6"/>
+    
+    <!-- Corner pads -->
+    <circle cx="160" cy="220" r="5" fill="url(#g7)" opacity="0.5"/>
+    <circle cx="352" cy="220" r="5" fill="url(#g7)" opacity="0.5"/>
+    <circle cx="200" cy="380" r="5" fill="url(#g7)" opacity="0.5"/>
+    <circle cx="312" cy="380" r="5" fill="url(#g7)" opacity="0.5"/>
+  </g>
+  
+  <!-- Central lock - the CPU/chip -->
+  <g>
+    <!-- Chip body -->
+    <rect x="220" y="240" width="72" height="72" rx="16" fill="url(#g7)"/>
+    
+    <!-- Lock shackle on chip -->
+    <path d="M 242 240 L 242 220 Q 242 202 256 202 Q 270 202 270 220 L 270 240" 
+          fill="none" stroke="#0B1121" stroke-width="8" stroke-linecap="round"/>
+    
+    <!-- Chip pins (subtle) -->
+    <rect x="224" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="240" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="264" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="280" y="236" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    
+    <rect x="224" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="240" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="264" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    <rect x="280" y="272" width="8" height="4" rx="1" fill="#0B1121" opacity="0.5"/>
+    
+    <!-- Keyhole -->
+    <circle cx="256" cy="266" r="7" fill="#0B1121"/>
+    <path d="M 252 272 L 260 272 L 262 290 L 250 290 Z" fill="#0B1121"/>
+  </g>
+  
+  <!-- Glow effect around chip -->
+  <rect x="210" y="230" width="92" height="92" rx="20" fill="none" stroke="url(#g7)" stroke-width="3" opacity="0.4"/>
+</svg>
diff --git a/vpn-v6-dark-gradient.svg b/vpn-v6-dark-gradient.svg
new file mode 100644
index 0000000..c7c6278
--- /dev/null
+++ b/vpn-v6-dark-gradient.svg
@@ -0,0 +1,43 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#2563EB"/>
+      <stop offset="100%" style="stop-color:#7C3AED"/>
+    </linearGradient>
+  </defs>
+  
+  <!-- Background -->
+  <rect width="512" height="512" rx="96" fill="#0F172A"/>
+  
+  <!-- Central lock icon - clean geometric -->
+  <g transform="translate(256,256)">
+    <!-- Lock shackle - rounded rectangle with cutout -->
+    <path d="M -48 -20 L -48 -60 Q -48 -90 0 -90 Q 48 -90 48 -60 L 48 -20" 
+          fill="none" stroke="url(#g1)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+    
+    <!-- Lock body -->
+    <rect x="-64" y="-16" width="128" height="100" rx="20" fill="url(#g1)"/>
+    
+    <!-- Keyhole -->
+    <circle cx="0" cy="20" r="12" fill="#0F172A"/>
+    <path d="M -7 30 L 7 30 L 10 58 L -10 58 Z" fill="#0F172A"/>
+  </g>
+  
+  <!-- VPN tunnel arcs around the lock -->
+  <g fill="none" stroke="url(#g1)" stroke-width="6" stroke-linecap="round" opacity="0.6">
+    <!-- Top arc -->
+    <path d="M 140 156 Q 256 60 372 156"/>
+    <!-- Bottom arcs -->
+    <path d="M 120 390 Q 180 350 220 370" stroke-width="4"/>
+    <path d="M 392 390 Q 332 350 292 370" stroke-width="4"/>
+  </g>
+  
+  <!-- Data nodes -->
+  <circle cx="120" cy="390" r="10" fill="url(#g1)"/>
+  <circle cx="392" cy="390" r="10" fill="url(#g1)"/>
+  <circle cx="256" cy="72" r="8" fill="url(#g1)"/>
+  
+  <!-- Small connection dots -->
+  <circle cx="180" cy="310" r="4" fill="url(#g1)" opacity="0.5"/>
+  <circle cx="332" cy="310" r="4" fill="url(#g1)" opacity="0.5"/>
+</svg>
diff --git a/vpn-v7-continuous-line.svg b/vpn-v7-continuous-line.svg
new file mode 100644
index 0000000..8da9942
--- /dev/null
+++ b/vpn-v7-continuous-line.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <!-- Clean white bg -->
+  <rect width="512" height="512" rx="96" fill="#ffffff"/>
+  
+  <!-- Single continuous line VPN tunnel forming a lock shape -->
+  <g fill="none" stroke="#2563EB" stroke-width="16" stroke-linecap="round" stroke-linejoin="round">
+    
+    <!-- Left tunnel from bottom-left node going up -->
+    <path d="M 100 380 Q 100 300 160 240"/>
+    
+    <!-- Lock shackle - continuous from left -->
+    <path d="M 160 240 Q 160 140 256 140 Q 352 140 352 240"/>
+    
+    <!-- Lock body transition -->
+    <path d="M 352 240 Q 340 220 320 220 L 192 220 Q 172 220 160 240"/>
+    
+    <!-- Lock body bottom -->
+    <path d="M 160 240 L 160 340 Q 160 370 192 370 L 320 370 Q 352 370 352 340 L 352 240"/>
+    
+    <!-- Right tunnel going down -->
+    <path d="M 352 240 Q 412 300 412 380"/>
+  </g>
+  
+  <!-- Keyhole negative space -->
+  <circle cx="256" cy="270" r="14" fill="#ffffff"/>
+  <path d="M 246 282 L 266 282 L 270 322 L 242 322 Z" fill="#ffffff"/>
+  
+  <!-- End nodes -->
+  <circle cx="100" cy="380" r="16" fill="#2563EB"/>
+  <circle cx="412" cy="380" r="16" fill="#2563EB"/>
+  
+  <!-- Data flow dots -->
+  <circle cx="130" cy="330" r="5" fill="#60A5FA"/>
+  <circle cx="382" cy="330" r="5" fill="#60A5FA"/>
+  <circle cx="160" cy="180" r="4" fill="#60A5FA"/>
+  <circle cx="352" cy="180" r="4" fill="#60A5FA"/>
+</svg>
diff --git a/vpn-v8-geometric.svg b/vpn-v8-geometric.svg
new file mode 100644
index 0000000..446aa9e
--- /dev/null
+++ b/vpn-v8-geometric.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1D4ED8"/>
+      <stop offset="100%" style="stop-color:#06B6D4"/>
+    </linearGradient>
+  </defs>
+  
+  <rect width="512" height="512" rx="96" fill="#0B1121"/>
+  
+  <!-- Geometric chevron/lock VPN concept -->
+  <g transform="translate(256,230)">
+    
+    <!-- Top chevron - shield outline -->
+    <path d="M -100 -80 L 0 -180 L 100 -80" 
+          fill="none" stroke="url(#g2)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+    
+    <!-- Center chevron -->
+    <path d="M -70 -40 L 0 -120 L 70 -40" 
+          fill="none" stroke="url(#g2)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
+    
+    <!-- Inner chevron -->
+    <path d="M -40 0 L 0 -60 L 40 0" 
+          fill="url(#g2)"/>
+    
+    <!-- Lock dot on inner chevron -->
+    <circle cx="0" cy="-25" r="8" fill="#0B1121"/>
+    
+    <!-- Bottom chevrons - tunnel effect -->
+    <path d="M -100 40 L -40 0 L -40 100" 
+          fill="none" stroke="url(#g2)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
+    <path d="M 100 40 L 40 0 L 40 100" 
+          fill="none" stroke="url(#g2)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
+  </g>
+  
+  <!-- Client nodes -->
+  <circle cx="156" cy="380" r="12" fill="url(#g2)"/>
+  <circle cx="356" cy="380" r="12" fill="url(#g2)"/>
+  
+  <!-- Horizontal network line -->
+  <line x1="168" y1="380" x2="344" y2="380" stroke="url(#g2)" stroke-width="3" opacity="0.3"/>
+</svg>
diff --git a/vpn-v9-negative-space.svg b/vpn-v9-negative-space.svg
new file mode 100644
index 0000000..04bf91a
--- /dev/null
+++ b/vpn-v9-negative-space.svg
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <rect width="512" height="512" rx="96" fill="#ffffff"/>
+  
+  <!-- Negative space approach: the keyhole IS the tunnel -->
+  
+  <!-- Large blue circle base -->
+  <circle cx="256" cy="246" r="130" fill="#2563EB"/>
+  
+  <!-- Negative space keyhole (revealing white bg) -->
+  <!-- Upper circle of keyhole -->
+  <circle cx="256" cy="210" r="28" fill="#ffffff"/>
+  <!-- Lower slot of keyhole - widened to form a tunnel -->
+  <path d="M 242 230 L 270 230 L 278 340 L 234 340 Z" fill="#ffffff"/>
+  
+  <!-- Tunnel exit node (bottom) -->
+  <circle cx="256" cy="390" r="18" fill="#2563EB"/>
+  
+  <!-- Subtle horizontal data lines in the tunnel slot -->
+  <line x1="246" y1="270" x2="266" y2="270" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
+  <line x1="244" y1="290" x2="268" y2="290" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
+  <line x1="242" y1="310" x2="270" y2="310" stroke="#2563EB" stroke-width="3" stroke-linecap="round" opacity="0.3"/>
+  
+  <!-- Client dots -->
+  <circle cx="130" cy="310" r="10" fill="#DBEAFE"/>
+  <circle cx="382" cy="310" r="10" fill="#DBEAFE"/>
+  
+  <!-- Connection lines -->
+  <line x1="156" y1="310" x2="208" y2="280" stroke="#DBEAFE" stroke-width="3" stroke-linecap="round"/>
+  <line x1="356" y1="310" x2="304" y2="280" stroke="#DBEAFE" stroke-width="3" stroke-linecap="round"/>
+</svg>