diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..2290d16
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#6a82fb"/><stop offset="1" stop-color="#fc5c7d"/></linearGradient></defs><circle cx="32" cy="32" r="32" fill="url(#a)"/><text x="50%" y="54%" font-size="32" text-anchor="middle" fill="#fff" font-family="Segoe UI, Arial, sans-serif" dy=".3em">R</text></svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a9eda33
--- /dev/null
+++ b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ReflectOnAI</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+</head>
+<body>
+    <header class="hero">
+        <div class="container">
+            <h1>ReflectOnAI</h1>
+            <p class="subtitle">Unlock insights. Amplify your mind.</p>
+            <a href="#features" class="cta-btn">Learn More</a>
+        </div>
+    </header>
+    <section id="features" class="features">
+        <div class="container">
+            <h2>Why ReflectOnAI?</h2>
+            <div class="features-list">
+                <div class="feature">
+                    <p>This site should trigger us to reflect on the use of AI. The good, the bad and the ugly.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 ReflectOnAI. All rights reserved.</p>
+            <div class="socials">
+                <a href="#">Twitter</a> |
+                <a href="#">LinkedIn</a> |
+                <a href="#">Contact</a>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..5a3b43c
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,108 @@
+/* ReflectOnAI Stylish Landing Page */
+
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Arial, sans-serif;
+    background: linear-gradient(120deg, #f0f4ff 0%, #e7eafc 100%);
+    color: #222;
+}
+
+.container {
+    width: 90%;
+    max-width: 1100px;
+    margin: 0 auto;
+}
+
+.hero {
+    background: linear-gradient(120deg, #6a82fb 0%, #fc5c7d 100%);
+    color: #fff;
+    padding: 80px 0 60px 0;
+    text-align: center;
+    box-shadow: 0 4px 24px rgba(100, 100, 255, 0.08);
+}
+.hero h1 {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+    letter-spacing: 2px;
+}
+.subtitle {
+    font-size: 1.35rem;
+    margin-bottom: 2rem;
+    opacity: 0.95;
+}
+.cta-btn {
+    background: #fff;
+    color: #6a82fb;
+    padding: 0.9em 2.2em;
+    border-radius: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    font-size: 1.1rem;
+    box-shadow: 0 2px 12px rgba(100, 100, 255, 0.09);
+    transition: background 0.2s, color 0.2s;
+}
+.cta-btn:hover {
+    background: #fc5c7d;
+    color: #fff;
+}
+
+.features {
+    padding: 60px 0 40px 0;
+    background: #fff;
+}
+.features h2 {
+    text-align: center;
+    font-size: 2.2rem;
+    margin-bottom: 2.5rem;
+    color: #6a82fb;
+}
+.features-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.5rem;
+    justify-content: center;
+}
+.feature {
+    background: #f0f4ff;
+    border-radius: 18px;
+    box-shadow: 0 2px 10px rgba(100, 100, 255, 0.07);
+    padding: 2.2rem 1.8rem;
+    flex: 1 1 260px;
+    max-width: 320px;
+    min-width: 220px;
+    text-align: center;
+}
+.feature h3 {
+    color: #fc5c7d;
+    margin-bottom: 0.7rem;
+    font-size: 1.25rem;
+}
+
+.footer {
+    background: #6a82fb;
+    color: #fff;
+    padding: 32px 0 18px 0;
+    text-align: center;
+    font-size: 1rem;
+    margin-top: 40px;
+}
+.footer .socials a {
+    color: #fff;
+    text-decoration: underline;
+    margin: 0 8px;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+}
+.footer .socials a:hover {
+    opacity: 1;
+}
+
+@media (max-width: 800px) {
+    .features-list {
+        flex-direction: column;
+        align-items: center;
+    }
+    .feature {
+        max-width: 90vw;
+    }
+}
