diff --git a/index.html b/index.html
index c35fd20..e40877b 100644
--- a/index.html
+++ b/index.html
@@ -1,113 +1,532 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Discover Obli.Studios – creators of Shardwalker, a tactical PvP action-RPG with a deep solo campaign. Try our SteamCMD Server Manager.">
-    <meta name="keywords" content="Shardwalker, ObliStudios, indie game, PvP RPG, server manager, SteamCMD, Unity game">
-    <meta name="author" content="ObliStudios">
-    <meta property="og:title" content="Obli.Studios – Indie Games & Tools">
-    <meta property="og:description" content="Explore Shardwalker and Obli.ServerManager – tactical games and server tools from a solo dev studio.">
-    <meta property="og:image" content="img/logo.png">
-    <meta property="og:url" content="https://www.oblistudios.com">
-    <meta name="twitter:card" content="summary_large_image">
-    <title>Obli.Studios</title>
-    <link rel="stylesheet" href="master.css">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ObliStudios — Home of Shardwalker: The Mirror’s Edge</title>
+    <meta name="description" content="ObliStudios — Home of Shardwalker: The Mirror’s Edge. News, trailer, and updates." />
+    <meta property="og:title" content="ObliStudios — Shardwalker: The Mirror’s Edge" />
+    <meta property="og:description" content="Explore Shardwalker: The Mirror’s Edge — a dark, atmospheric adventure by ObliStudios." />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#12FF9D" />
+    <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=Inter:wght@300;400;600;800&family=Cinzel:wght@600;800&display=swap" rel="stylesheet">
     <style>
-        .btn-roadmap {
-            display: inline-block;
-            background: #00bfff;
-            color: white;
-            padding: 10px 20px;
-            margin-left: 12px;
-            border-radius: 6px;
-            font-weight: bold;
-            text-decoration: none;
-            transition: background 0.3s ease;
+        :root {
+            --bg: #0a0b10; /* deep space */
+            --bg-2: #0e1017; /* panels */
+            --text: #e6eef5; /* primary text */
+            --muted: #9aa6b2; /* secondary */
+            --accent: #12FF9D; /* neon shard green */
+            --accent-2: #00c978; /* darker green */
+            --shadow: 0 10px 30px rgba(0,0,0,.45);
+            --radius: 16px;
         }
 
-            .btn-roadmap:hover {
-                background: #0088cc;
+        * {
+            box-sizing: border-box
+        }
+
+        html, body {
+            height: 100%
+        }
+
+        body {
+            margin: 0;
+            font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+            color: var(--text);
+            background: radial-gradient(1200px 600px at 75% -10%, rgba(18,255,157,.12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(18,255,157,.08), transparent 60%), var(--bg);
+            line-height: 1.6;
+        }
+
+        a {
+            color: inherit;
+            text-decoration: none
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px
+        }
+
+        /* Header */
+        header {
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            backdrop-filter: saturate(180%) blur(8px);
+            background: rgba(10,11,16,.6);
+            border-bottom: 1px solid rgba(255,255,255,.06)
+        }
+
+        .nav {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 68px
+        }
+
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: .75rem
+        }
+
+        .logo {
+            width: 34px;
+            height: 34px;
+            filter: drop-shadow(0 0 10px rgba(18,255,157,.5))
+        }
+
+        .wordmark {
+            font-weight: 800;
+            letter-spacing: .2px
+        }
+
+            .wordmark span {
+                color: var(--accent)
             }
 
-        section {
-            padding: 40px;
-        }
-
-        .feature-grid {
+        nav ul {
             display: flex;
-            gap: 30px;
+            gap: 22px;
+            list-style: none;
+            margin: 0;
+            padding: 0
         }
 
-        .feature-box {
-            flex: 1;
-            background: #f5f5f5;
+        nav a {
+            color: var(--muted);
+            font-weight: 600
+        }
+
+            nav a:hover {
+                color: var(--text)
+            }
+
+        .cta {
+            display: inline-flex;
+            align-items: center;
+            gap: .6rem;
+            padding: .7rem 1rem;
+            border-radius: 999px;
+            font-weight: 700;
+            background: linear-gradient(135deg,var(--accent),var(--accent-2));
+            color: #00110a;
+            box-shadow: 0 6px 18px rgba(18,255,157,.25)
+        }
+
+        /* Mobile menu */
+        .menu-btn {
+            display: none;
+            background: none;
+            border: 0;
+            color: var(--text);
+            font-size: 1.2rem
+        }
+
+        @media (max-width:840px) {
+            nav ul {
+                display: none
+            }
+
+            .menu-btn {
+                display: inline-flex
+            }
+
+            .mobile-nav {
+                display: none;
+                background: rgba(14,16,23,.96);
+                border-top: 1px solid rgba(255,255,255,.06)
+            }
+
+                .mobile-nav a {
+                    display: block;
+                    padding: 16px 20px;
+                    color: var(--muted)
+                }
+
+                    .mobile-nav a:hover {
+                        background: rgba(255,255,255,.03);
+                        color: var(--text)
+                    }
+        }
+
+        /* Hero */
+        .hero {
+            position: relative;
+            padding: 96px 0 72px;
+            overflow: hidden
+        }
+
+            .hero:before { /* subtle vignette */
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: radial-gradient(1200px 600px at 50% -20%, rgba(18,255,157,.15), rgba(0,0,0,.0) 45%), radial-gradient(900px 500px at 30% 120%, rgba(0,0,0,.35), transparent 60%);
+                pointer-events: none;
+                z-index: -1;
+            }
+
+        .hero-grid {
+            display: grid;
+            grid-template-columns: 1.1fr .9fr;
+            gap: 48px;
+            align-items: center
+        }
+
+        .eyebrow {
+            color: var(--accent);
+            font-weight: 700;
+            letter-spacing: .2em;
+            text-transform: uppercase
+        }
+
+        h1 {
+            font-family: Cinzel,Inter,serif;
+            font-weight: 800;
+            line-height: 1.05;
+            font-size: clamp(2.2rem, 3.5vw + 1rem, 4rem);
+            margin: .4rem 0 1rem
+        }
+
+        .lead {
+            font-size: 1.1rem;
+            color: var(--muted);
+            max-width: 60ch
+        }
+
+        .actions {
+            display: flex;
+            gap: 14px;
+            margin-top: 22px
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: .5rem;
+            padding: .9rem 1.15rem;
+            border: 1px solid rgba(255,255,255,.12);
+            border-radius: 12px;
+            font-weight: 700
+        }
+
+            .btn.primary {
+                border: none;
+                background: linear-gradient(135deg,var(--accent),var(--accent-2));
+                color: #00110a;
+                box-shadow: 0 12px 36px rgba(18,255,157,.25)
+            }
+
+            .btn:hover {
+                transform: translateY(-1px)
+            }
+
+        .hero-art {
+            position: relative;
+            aspect-ratio: 16/10;
+            border-radius: var(--radius);
+            background: linear-gradient(180deg, rgba(18,255,157,.18), rgba(18,255,157,.05) 30%, rgba(0,0,0,.2) 70%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
+            box-shadow: var(--shadow);
+            border: 1px solid rgba(255,255,255,.06)
+        }
+
+        .badge {
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            padding: .45rem .6rem;
+            border-radius: 999px;
+            font-size: .8rem;
+            font-weight: 800;
+            letter-spacing: .06em;
+            background: rgba(10,11,16,.7);
+            color: var(--accent);
+            border: 1px solid rgba(18,255,157,.35);
+            backdrop-filter: blur(6px)
+        }
+
+        @media (max-width:980px) {
+            .hero-grid {
+                grid-template-columns: 1fr;
+                gap: 28px
+            }
+
+            .hero {
+                padding: 80px 0 56px
+            }
+        }
+
+        /* Features */
+        .section {
+            padding: 64px 0
+        }
+
+            .section h2 {
+                font-family: Cinzel,Inter,serif;
+                font-size: 2rem;
+                margin: 0 0 12px
+            }
+
+        .kicker {
+            color: var(--muted);
+            margin-bottom: 22px
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(3,1fr);
+            gap: 22px
+        }
+
+        .card {
+            background: var(--bg-2);
             padding: 20px;
-            border-radius: 8px;
+            border-radius: var(--radius);
+            border: 1px solid rgba(255,255,255,.06);
+            box-shadow: var(--shadow)
         }
 
-        form input, form button {
-            padding: 10px;
-            margin: 5px;
+            .card h3 {
+                margin: .2rem 0 .4rem;
+                font-size: 1.05rem
+            }
+
+            .card p {
+                color: var(--muted);
+                margin: 0
+            }
+
+        @media (max-width:900px) {
+            .grid {
+                grid-template-columns: 1fr 1fr
+            }
+        }
+
+        @media (max-width:640px) {
+            .grid {
+                grid-template-columns: 1fr
+            }
+        }
+
+        /* Trailer / media */
+        .media {
+            display: grid;
+            grid-template-columns: 1.2fr .8fr;
+            gap: 24px;
+            align-items: center
+        }
+
+            .media .frame {
+                aspect-ratio: 16/9;
+                border-radius: var(--radius);
+                background: #05060a;
+                border: 1px solid rgba(255,255,255,.06);
+                box-shadow: var(--shadow);
+                display: grid;
+                place-items: center;
+                color: var(--muted)
+            }
+
+            .media .note {
+                color: var(--muted)
+            }
+
+        @media (max-width:980px) {
+            .media {
+                grid-template-columns: 1fr
+            }
+        }
+
+        /* Newsletter */
+        .newsletter {
+            background: linear-gradient(180deg, rgba(18,255,157,.06), rgba(18,255,157,.0));
+            border: 1px solid rgba(255,255,255,.06);
+            border-radius: var(--radius);
+            padding: 22px;
+            display: flex;
+            gap: 16px;
+            align-items: center
+        }
+
+            .newsletter input {
+                flex: 1;
+                min-width: 0;
+                background: #0a0c12;
+                color: var(--text);
+                border: 1px solid rgba(255,255,255,.08);
+                border-radius: 10px;
+                padding: .8rem .9rem
+            }
+
+            .newsletter button {
+                white-space: nowrap
+            }
+
+        /* Footer */
+        footer {
+            padding: 40px 0 60px;
+            color: var(--muted)
+        }
+
+        .footer-grid {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 16px;
+            align-items: center
+        }
+
+        .social a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            background: #0a0c12;
+            border: 1px solid rgba(255,255,255,.06);
+            margin-left: 8px
+        }
+
+        /* Simple alien head mark (inline SVG usage) */
+        .alien {
+            width: 34px;
+            height: 34px
+        }
+
+        .glow {
+            filter: drop-shadow(0 0 10px rgba(18,255,157,.55)) drop-shadow(0 0 24px rgba(18,255,157,.2))
         }
     </style>
 </head>
 <body>
-    <nav class="navbar">
-        <a href="https://www.oblistudios.com">🏠 Home</a> |
-        <a href="https://www.oblistudios.com/shardwalker.html">⚔️ Shardwalker</a> |
-        <a href="https://www.oblistudios.com/roadmap.html">🔄️ Roadmap</a>
+    <header>
+        <div class="container nav" aria-label="Main">
+            <a href="#" class="brand" aria-label="ObliStudios Home">
+                <!-- Simple inline alien logo to avoid external assets -->
+                <svg class="alien glow" viewBox="0 0 64 64" aria-hidden="true" role="img">
+                    <defs>
+                        <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%" stop-color="#12FF9D" />
+                            <stop offset="100%" stop-color="#00c978" />
+                        </linearGradient>
+                    </defs>
+                    <path fill="url(#g)" d="M32 6c11 0 20 8 20 20 0 12-9 22-20 22S12 38 12 26C12 14 21 6 32 6Z" />
+                    <ellipse cx="24" cy="28" rx="7" ry="5" fill="#091016" />
+                    <ellipse cx="40" cy="28" rx="7" ry="5" fill="#091016" />
+                </svg>
+                <div class="wordmark">Obli<span>Studios</span></div>
+            </a>
 
-    </nav>
+            <nav>
+                <ul>
+                    <li><a href="#home">Home</a></li>
+                    <li><a href="#game">Games</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#contact">Contact</a></li>
+                </ul>
+            </nav>
+            <a class="cta" href="#game">Playtest Signup</a>
+            <button class="menu-btn" aria-label="Open menu" onclick="document.querySelector('.mobile-nav').style.display = (document.querySelector('.mobile-nav').style.display==='block'?'none':'block')">☰</button>
+        </div>
 
-    <main class="container">
-        <h1>Welcome to ObliStudios</h1>
-        <p>Home of Shardwalker the mirrors edge</p>
+    </header>
 
-        <section >
-            <img >
-            <h2>Discover the Worlds of Shardwalker</h2>
-            <p>A tactical PvP RPG experience with deep solo campaigns and strategic combat.</p>
-            <a href="https://www.oblistudios.com/shardwalker.html" class="btn-roadmap">Learn More</a>
-        </section>
-
-        <section >
-            <h2>About ObliStudios</h2>
-            <p>ObliStudios is an independent game and tool development studio focused on delivering immersive tactical RPG experiences and powerful backend tools for gamers and server administrators alike. Founded by a solo developer, we believe in empowering players with both gameplay and control.</p>
-        </section>
-
-        <section >
-            <h2>Our Creations</h2>
-            <div class="feature-grid">
-                <div class="feature-box">
-                    <h3>⚔️ Shardwalker</h3>
-                    <p>A competitive action-RPG that includes attunement powers and shard-switching mechanics.</p>
+    <main id="home" class="container hero">
+        <div class="hero-grid">
+            <div>
+                <div class="eyebrow">Home of Shardwalker</div>
+                <h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
+                <p class="lead">Step through the fracture and master the art of shard‑switching. Fight across mirrored realms, bend environments to your will, and uncover the truth behind the Edge.</p>
+                <div class="actions">
+                    <a class="btn primary" href="#game">Learn More</a>
+                    <a class="btn" href="#trailer">Watch Trailer</a>
                 </div>
-                
             </div>
-        </section>
-
-        <section id="contact">
-            <h2>Connect with Us</h2>
-            <p>Follow me on social media:</p>
-            <ul>
-                <li>
-                    <a href="https://twitter.com/obli_studios" target="_blank">
-                        <img src="img/Xlogo.png" alt="X.com Logo" style="width:32px; height:32px; vertical-align:middle; margin-right:8px;">
-                        
-                    </a>
-                </li>
-            </ul>
-        </section>
-
-        <section id="tech">
-            <h2>Powered By</h2>
-            <p>Our games are built using Unreal engine.</p>
-        </section>
+            <div class="hero-art" role="img" aria-label="Atmospheric key art for Shardwalker">
+                <div class="badge">FEATURED TITLE</div>
+            </div>
+        </div>
     </main>
 
-    <footer>
-        <p>© 2025 Obli.Studios. All rights reserved.</p>
+    <section id="game" class="container section">
+        <h2>About the Game</h2>
+        <p class="kicker">A fast, tactical, and atmospheric journey through broken worlds.</p>
+        <div class="grid">
+            <article class="card">
+                <h3>Shard‑Switching</h3>
+                <p>Phase between mirrored layers to bypass hazards, expose enemy weaknesses, and solve environmental puzzles.</p>
+            </article>
+            <article class="card">
+                <h3>Combat Mastery</h3>
+                <p>Build attunements, chain abilities, and adapt to enemy factions hunting within the Mirror’s Edge.</p>
+            </article>
+            <article class="card">
+                <h3>World & Lore</h3>
+                <p>Explore ancient structures and living biomes fractured by the Void. Each shard reveals new paths and secrets.</p>
+            </article>
+        </div>
+    </section>
+
+    <section id="trailer" class="container section">
+        <div class="media">
+            <div class="frame">
+                <!-- Replace the placeholder below with your YouTube/Vimeo embed -->
+                <span>Trailer Embed Placeholder (16:9)</span>
+            </div>
+            <div>
+                <h2>Watch the Trailer</h2>
+                <p class="note">
+                    Drop in your trailer iframe here. Example (YouTube):
+                    <code>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;</code>
+                </p>
+                <div class="newsletter" role="form" aria-label="Newsletter signup">
+                    <input type="email" placeholder="Enter your email for updates" aria-label="Email address" />
+                    <button class="btn primary" type="button">Subscribe</button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="about" class="container section">
+        <h2>About ObliStudios</h2>
+        <p class="kicker">We craft atmospheric, mechanics‑driven games with striking identity.</p>
+        <div class="grid">
+            <article class="card">
+                <h3>Indie at Heart</h3>
+                <p>Small team, big worlds. We prototype fast and iterate with our community.</p>
+            </article>
+            <article class="card">
+                <h3>Technical Artistry</h3>
+                <p>From dynamic lighting to systemic encounters, we push tools to serve player stories.</p>
+            </article>
+            <article class="card">
+                <h3>Community</h3>
+                <p>Join playtests, shape balance, and help chart the roadmap across shards.</p>
+            </article>
+        </div>
+    </section>
+
+    <footer id="contact" class="container">
+        <div class="footer-grid">
+            <small>© <span id="y"></span> ObliStudios. All rights reserved.</small>
+            <div class="social" aria-label="Social links">
+                <a href="https://twitter.com/obli_studios" aria-label="X (Twitter)">
+                    <!-- Minimal X icon -->
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><path d="M3 3l18 18M21 3L3 21" /></svg>
+                </a>
+                <a href="#" aria-label="Discord"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><circle cx="12" cy="12" r="9" /></svg></a>
+                <a href="#" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><polygon points="10,8 16,12 10,16" /></svg></a>
+            </div>
+        </div>
     </footer>
+
+    <script>
+        // Year stamp
+        document.getElementById('y').textContent = new Date().getFullYear();
+    </script>
 </body>
 </html>
