diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..a4011e0
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>The SHARP-Raptor Challenge: Surface Pressure Prediction on an F-22 Airfoil Section</title>
+  <meta name="description" content="A high-speed machine learning benchmark for surface pressure prediction on a transonic F-22 airfoil section.">
+
+  <!-- TODO: Open Graph / Twitter card meta tags once the page is hosted, e.g.
+  <meta property="og:title" content="...">
+  <meta property="og:image" content="https://<user>.github.io/<repo>/src/images/og-cover.png">
+  -->
+
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <!-- ============ HEADER ============ -->
+  <header class="hero">
+    <div class="hero-inner">
+      <p class="kicker">Benchmark &amp; Challenge</p>
+      <h1>The SHARP&#8209;Raptor Challenge</h1>
+      <p class="subtitle">A High-Speed Machine Learning Benchmark for Surface Pressure Prediction on an F&#8209;22 Airfoil Section</p>
+
+      <!-- TODO: replace with your real author list / affiliations / superscripts -->
+      <p class="authors">
+        David Ramos<sup>1</sup>,
+        Lucas Lacasa<sup>2</sup>,
+        Fermín Gutiérrez<sup>1</sup>,
+        Eusebio Valero<sup>1,3</sup>,
+        Gonzalo Rubio<sup>1,3</sup>
+      </p>
+      <p class="affiliations">
+        <sup>1</sup> ETSIAE-UPM &middot; School of Aeronautics, Universidad Politécnica de Madrid &nbsp;&nbsp;
+        <sup>2</sup> Institute for Cross-Disciplinary Physics and Complex Systems (IFISC, CSIC-UIB) &nbsp;&nbsp;
+        <sup>3</sup> Center for Computational Simulation, Universidad Politécnica de Madrid
+      </p>
+
+      <!-- TODO: replace logo images and links with your own -->
+      <div class="logos">
+        <a href="https://www.upm.es/" target="_blank" rel="noopener">
+          <img src="src/images/banner_upm.svg" alt="Universidad Politécnica de Madrid">
+        </a>
+        <a href="https://numath.dmae.upm.es/" target="_blank" rel="noopener">
+          <img src="src/images/Logo-Numath-Blue.png" alt="NUMATH group">
+        </a>
+      </div>
+
+      <!-- ============ LINK BUTTONS ============ -->
+      <nav class="link-row">
+        <a class="btn" href="#">📄 Paper</a>
+        <a class="btn" href="#">📚 arXiv</a>
+        <a class="btn" href="https://github.com/TU-USUARIO/TU-REPO" target="_blank" rel="noopener">💻 Code</a>
+        <a class="btn btn-accent" href="#database">📦 Database</a>
+        <a class="btn" href="https://www.codabench.org/" target="_blank" rel="noopener">🏆 Leaderboard</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+
+    <!-- ============ ABSTRACT ============ -->
+    <section id="abstract" class="section">
+      <h2>Abstract</h2>
+      <p class="placeholder">
+        <!-- TODO: write abstract -->
+        Abstract coming soon.
+      </p>
+    </section>
+
+    <!-- ============ DATABASE ============ -->
+    <section id="database" class="section section-alt">
+      <h2>Database</h2>
+      <p class="placeholder">
+        <!-- TODO: describe the dataset: geometry, flow conditions, format, train/test split, size, license, download link -->
+        Database description coming soon.
+      </p>
+    </section>
+
+    <!-- ============ METHODS ============ -->
+    <section id="methods" class="section">
+      <h2>Methods</h2>
+      <p class="placeholder">
+        <!-- TODO: describe baseline models (MLP, KAN, RBF-ELM, diffusion-based) and evaluation protocol -->
+        Methods description coming soon.
+      </p>
+    </section>
+
+    <!-- ============ RESULTS ============ -->
+    <section id="results" class="section section-alt">
+      <h2>Results</h2>
+      <p class="placeholder">
+        <!-- TODO: add results tables / figures / leaderboard snapshot -->
+        Results coming soon.
+      </p>
+    </section>
+
+    <!-- ============ BIBTEX ============ -->
+    <section id="bibtex" class="section">
+      <h2>BibTeX</h2>
+      <div class="code-block">
+        <button class="copy-btn" onclick="copyBibtex()">Copy</button>
+        <pre id="bibtex-content">@misc{sharpraptor2026,
+      title={The SHARP-Raptor Challenge: A High-Speed Machine Learning Benchmark for Surface Pressure Prediction on an F-22 Airfoil Section},
+      author={TODO: author list},
+      year={2026},
+      eprint={TODO},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={TODO},
+}</pre>
+      </div>
+    </section>
+
+    <!-- ============ ACKNOWLEDGEMENTS ============ -->
+    <section id="acknowledgements" class="section section-alt">
+      <h2>Acknowledgements</h2>
+      <p class="placeholder">
+        <!-- TODO: replace text and funder logos -->
+        This work was supported by the following institutions and funding programs.
+      </p>
+      <div class="logos logos-small">
+        <!-- TODO: replace with your funders -->
+        <a href="#"><img src="src/images/funder1.png" alt="Funder 1"></a>
+        <a href="#"><img src="src/images/funder2.png" alt="Funder 2"></a>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- ============ FOOTER ============ -->
+  <footer class="footer">
+    <p>&copy; 2026 SHARP-Raptor Challenge Authors &middot;
+      <a href="#">Paper</a> &middot;
+      <a href="https://github.com/TU-USUARIO/TU-REPO" target="_blank" rel="noopener">Code</a> &middot;
+      <a href="#database">Database</a>
+    </p>
+  </footer>
+
+  <script>
+    function copyBibtex() {
+      const text = document.getElementById('bibtex-content').innerText;
+      navigator.clipboard.writeText(text).then(() => {
+        const btn = document.querySelector('.copy-btn');
+        const original = btn.innerText;
+        btn.innerText = 'Copied!';
+        setTimeout(() => (btn.innerText = original), 1500);
+      });
+    }
+  </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 0000000..e81631e
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,231 @@
+/* ============================================================
+   SHARP-Raptor Challenge — stylesheet
+   Design notes:
+   - Dark "cockpit/HUD" inspired hero, light content sections
+   - Accent color: amber/orange (high-speed, heat, transonic)
+   - Typography: system sans for body, condensed weight for headings
+   ============================================================ */
+
+:root {
+  --bg: #0b0e14;
+  --bg-light: #f7f7f5;
+  --bg-alt: #eef0ec;
+  --ink: #14161a;
+  --ink-soft: #4a4f57;
+  --accent: #ff7a1a;
+  --accent-dark: #c75a00;
+  --line: #d8dad4;
+  --radius: 14px;
+  --max-width: 880px;
+  font-size: 16px;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: var(--ink);
+  background: var(--bg-light);
+  line-height: 1.6;
+}
+
+h1, h2 {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+sup { font-size: 0.65em; }
+
+/* ============ HERO ============ */
+.hero {
+  background:
+    radial-gradient(circle at 20% 0%, rgba(255,122,26,0.18), transparent 55%),
+    var(--bg);
+  color: #f4f4f2;
+  padding: 64px 24px 48px;
+  text-align: center;
+}
+
+.hero-inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+}
+
+.kicker {
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 0.78rem;
+  color: var(--accent);
+  margin: 0 0 12px;
+  font-weight: 600;
+}
+
+.hero h1 {
+  font-size: clamp(1.8rem, 4vw, 2.7rem);
+  margin: 0 0 14px;
+}
+
+.subtitle {
+  font-size: 1.05rem;
+  color: #c9cad0;
+  max-width: 680px;
+  margin: 0 auto 28px;
+}
+
+.authors {
+  font-size: 1rem;
+  margin: 0 0 6px;
+  color: #f4f4f2;
+}
+
+.affiliations {
+  font-size: 0.8rem;
+  color: #9a9da6;
+  max-width: 700px;
+  margin: 0 auto 28px;
+}
+
+.logos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+.logos img {
+  height: 38px;
+  filter: grayscale(1) brightness(1.8);
+  opacity: 0.85;
+  transition: opacity 0.15s ease;
+}
+
+.logos img:hover { opacity: 1; }
+
+.logos-small img { height: 30px; }
+
+/* ============ BUTTONS ============ */
+.link-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 20px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.18);
+  background: rgba(255,255,255,0.04);
+  color: #f4f4f2;
+  text-decoration: none;
+  font-size: 0.92rem;
+  font-weight: 500;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.btn:hover {
+  border-color: var(--accent);
+  background: rgba(255,122,26,0.12);
+}
+
+.btn-accent {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #1a1a1a;
+  font-weight: 700;
+}
+
+.btn-accent:hover {
+  background: var(--accent-dark);
+  border-color: var(--accent-dark);
+  color: #fff;
+}
+
+/* ============ SECTIONS ============ */
+.section {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 56px 24px;
+}
+
+.section-alt {
+  background: var(--bg-alt);
+  max-width: none;
+}
+
+.section-alt > * {
+  max-width: var(--max-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section h2 {
+  font-size: 1.5rem;
+  margin: 0 0 18px;
+  padding-bottom: 10px;
+  border-bottom: 3px solid var(--accent);
+  display: inline-block;
+}
+
+.placeholder {
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+/* ============ BIBTEX BLOCK ============ */
+.code-block {
+  position: relative;
+  background: var(--bg);
+  border-radius: var(--radius);
+  padding: 20px;
+  overflow-x: auto;
+}
+
+.code-block pre {
+  margin: 0;
+  color: #d8e0e8;
+  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  background: var(--accent);
+  color: #1a1a1a;
+  border: none;
+  border-radius: 6px;
+  padding: 6px 12px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.copy-btn:hover { background: var(--accent-dark); color: #fff; }
+
+/* ============ FOOTER ============ */
+.footer {
+  text-align: center;
+  padding: 32px 24px 48px;
+  color: var(--ink-soft);
+  font-size: 0.85rem;
+}
+
+.footer a {
+  color: var(--ink-soft);
+  text-decoration: underline;
+}
+
+.footer a:hover { color: var(--accent-dark); }
+
+/* ============ RESPONSIVE ============ */
+@media (max-width: 600px) {
+  .hero { padding: 48px 16px 36px; }
+  .section { padding: 40px 16px; }
+}
\ No newline at end of file