Update index.html

index.html

@@ -7,6 +7,7 @@
     <meta name="description" content="Experience the WordLift AI SEO Agent - An intelligent marketing assistant that helps optimize your content, improve rankings, and drive organic traffic. Try our advanced SEO automation tool today!">
     <meta name="keywords" content="SEO, AI SEO Agent, SEO Agent, marketing agent, AI marketing assistant, content optimization, WordLift">
     <link rel="canonical" href="https://wordlift.io/agent/">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
     
     <!-- Open Graph tags -->
     <meta property="og:title" content="WordLift AI SEO Agent - Your Marketing & SEO Assistant">
@@ -17,45 +18,73 @@
     <meta name="twitter:title" content="WordLift AI SEO Agent - Your Marketing & SEO Assistant">
     <meta name="twitter:description" content="Experience the WordLift AI SEO Agent - An intelligent marketing assistant that helps optimize your content, improve rankings, and drive organic traffic.">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
+        :root {
+            --white: #fff;
+            --white-01: hsla(0, 0%, 100%, .102);
+            --white-02: hsla(0, 0%, 100%, .2);
+            --white-03: hsla(0, 0%, 100%, .302);
+            --white-05: hsla(0, 0%, 100%, .502);
+            --white-07: hsla(0, 0%, 100%, .698);
+            --white-09: hsla(0, 0%, 100%, .898);
+            --neutral-50: #f6f6f7;
+            --neutral-800: #64676f;
+            --neutral-950: #191919;
+            --sky-500: #3452db;
+            --font-family-open-sauce: 'Open Sans', sans-serif;
+            --font-size-mobile-xl: 18px;
+            --font-weight-regular: 400;
+            --line-height-mobile-xl: 28px;
+        }
+
+        *, :after, :before {
             box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: auto !important;
         }
-        
+
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background-color: #ffffff;
-            line-height: 1.6;
+            font-family: var(--font-family-open-sauce);
+            background-color: #000000;
+            color: var(--white);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            margin: 0;
+            padding: 0;
+            font-size: var(--font-size-mobile-xl);
+            line-height: var(--line-height-mobile-xl);
         }
 
         header {
-            background-color: #ffffff;
-            padding: 1.5rem;
-            border-bottom: 1px solid #eaeaea;
+            padding: 2rem 1.5rem;
+            border-bottom: 1px solid var(--white-02);
         }
 
         h1 {
-            color: #1a1a1a;
-            font-size: 1.75rem;
+            color: var(--white);
+            font-size: 2rem;
             text-align: center;
             max-width: 800px;
             margin: 0 auto;
+            font-weight: var(--font-weight-regular);
         }
 
         main {
+            flex: 1;
             padding: 2rem;
             max-width: 1200px;
             margin: 0 auto;
+            width: 100%;
         }
 
         .iframe-container {
             width: 100%;
             height: 80vh;
-            border: 1px solid #eaeaea;
+            border: 1px solid var(--white-02);
             border-radius: 8px;
             overflow: hidden;
-            background: #ffffff;
+            background: var(--white);
         }
 
         iframe {
@@ -67,16 +96,18 @@
         footer {
             padding: 1rem;
             text-align: center;
-            border-top: 1px solid #eaeaea;
+            border-top: 1px solid var(--white-02);
+            color: var(--white-07);
         }
 
         footer a {
-            color: #0066cc;
+            color: var(--sky-500);
             text-decoration: none;
+            transition: color 0.2s ease;
         }
 
         footer a:hover {
-            text-decoration: underline;
+            color: var(--white);
         }
 
         @media (max-width: 768px) {