commit b23585a54cef8ff32a6cb86be10d9a4491500950
Author: Sunil Thakare <sunil@thakares.com>
Date:   Sun Jul 5 17:35:08 2026 +0530

    Initial commit: NX9 philosophy, architecture, roadmap and website

diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..30cf57e
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..5820a91
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/nx9.iml" filepath="$PROJECT_DIR$/.idea/nx9.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/nx9.iml b/.idea/nx9.iml
new file mode 100644
index 0000000..6102194
--- /dev/null
+++ b/.idea/nx9.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="EMPTY_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
new file mode 100644
index 0000000..e118165
--- /dev/null
+++ b/ARCHITECTURE.md
@@ -0,0 +1,108 @@
+# NX9 Architecture
+
+## A Philosophy-Driven Ecosystem for Self-Hosted Infrastructure
+
+**NX9** is an ecosystem of independent, philosophically aligned infrastructure software built by Sunil Thakare (@thakares).
+
+Every project is designed around one simple idea:
+
+> **Infrastructure should belong to its operator — not to a cloud provider, subscription service, or vendor.**
+
+NX9 is not a framework.  
+It is not a platform that requires dozens of services.  
+It is not a cloud product that happens to support self-hosting.
+
+Instead, NX9 is a collection of carefully engineered **single-binary Rust applications** that prioritize:
+
+- Privacy
+- Simplicity
+- Reliability
+- Performance
+- Operational Excellence
+- Long-term Maintainability
+
+Every application is fully open-source, Linux-native, resource-efficient, and designed to run equally well on Raspberry Pi, mini PCs, VPS instances, enterprise servers, air-gapped government infrastructure, or personal homelabs.
+
+**No telemetry. No vendor lock-in. No mandatory cloud. No unnecessary complexity.**
+
+---
+
+## Design Philosophy
+
+The NX9 ecosystem follows several consistent principles across every project.
+
+### 1. Operator Ownership
+
+The operator owns the binaries, the configuration, the databases, the backups, the encryption keys, and the deployment.
+
+No service depends on proprietary APIs or cloud-hosted control planes.
+
+### 2. Self-Hosting First
+
+Every architectural decision begins with one question:
+
+> "Can this be deployed and operated by a single administrator?"
+
+If the answer requires Kubernetes, managed databases, cloud messaging, or external dependencies, the design is reconsidered.
+
+### 3. Simplicity Over Complexity
+
+NX9 intentionally avoids fashionable complexity. Instead of dozens of microservices, service meshes, or distributed databases, NX9 prefers:
+
+- One binary
+- One configuration
+- One (or a few) SQLite databases
+- One administrator
+
+Simple systems are easier to understand, secure, and recover.
+
+### 4. Privacy by Default
+
+Privacy is a design requirement, not an optional feature. Applications never assume cloud connectivity, analytics collection, or third-party tracking.
+
+### 5. Security by Design
+
+Security is embedded throughout the stack:
+
+- Argon2id password hashing
+- Ed25519 signatures
+- BLAKE3 hashing
+- RBAC
+- CSRF protection
+- Secure cookies
+- Transaction-safe audit logs
+- Hardened compilation flags
+
+### 6. Operational Excellence
+
+Every project includes:
+
+- Diagnostics and health checks
+- Backup and restore procedures
+- Migration tools
+- CLI administration
+- Reproducible deployments
+- Structured logging
+- Documentation
+
+### 7. Long-Term Stability
+
+NX9 intentionally avoids dependency churn. Projects are expected to remain understandable and maintainable years into the future.
+
+---
+
+## Core Architectural Pillars
+
+### 1. Pure Rust
+
+All projects are implemented in modern Rust (2021 Edition) for memory safety, predictable performance, and minimal runtime overhead. Typical binaries are around 10–12 MB.
+
+### 2. Single Binary Deployment
+
+One executable contains the HTTP server, business logic, authentication, database migrations, CLI, and templates.
+
+Installation is often as simple as:
+
+```bash
+cargo build --release
+./application serve
\ No newline at end of file
diff --git a/CASE-STUDY.md b/CASE-STUDY.md
new file mode 100644
index 0000000..97aa0ea
--- /dev/null
+++ b/CASE-STUDY.md
@@ -0,0 +1,466 @@
+# NX9 Philosophy: Engineering Beyond Frameworks
+
+## A Real-World Case Study in Software Minimalism, Explicit Routing, and Reduced Attack Surface
+
+> *"The best way to reduce complexity is not to manage more software—it is to deploy less software."*
+
+---
+
+## Executive Summary
+
+This case study examines the first publicly accessible deployment of **NX9** and the unsolicited Internet traffic it received immediately after exposure.
+
+The objective was not to conduct a penetration test or security benchmark. Instead, the production access logs were analyzed to understand how real-world Internet scanners interacted with a deliberately minimal software stack.
+
+The results were revealing.
+
+During the observed period:
+
+* **362 HTTP requests** were received.
+* **331 requests (91.4%)** resulted in **`404 Not Found`**.
+* **20 requests (5.5%)** returned **`304 Not Modified`**, indicating normal browser caching.
+* **11 requests (3.1%)** returned **`200 OK`**, serving legitimate published resources.
+
+The overwhelming majority of incoming requests were **not attempts to use the application**.
+
+They were attempts to identify technologies that were never deployed.
+
+---
+
+# Introduction
+
+Modern software engineering frequently begins with a familiar question:
+
+> **"Which framework should we use?"**
+
+NX9 begins with a different question:
+
+> **"Do we need one at all?"**
+
+This distinction is fundamental.
+
+NX9 is not opposed to frameworks.
+
+Frameworks such as React, Angular, Laravel, Spring Boot, Django, and Next.js have solved genuine engineering problems at enormous scale.
+
+React solved Facebook's UI challenges.
+
+Angular addressed Google's enterprise applications.
+
+Laravel transformed PHP productivity.
+
+Those are significant engineering achievements.
+
+The question NX9 asks is simply:
+
+> **Does our project have those same problems?**
+
+Many self-hosted services do not.
+
+A documentation website.
+
+A URL shortener.
+
+An authentication server.
+
+A digital timestamping service.
+
+A lightweight dashboard.
+
+These applications often require reliability, simplicity, maintainability, and operational transparency far more than they require extensive framework ecosystems.
+
+NX9 therefore adopts a different philosophy.
+
+---
+
+# The NX9 Philosophy
+
+Every NX9 project follows a common set of engineering principles.
+
+* Privacy First
+* Self-Hosted First
+* Linux Native
+* Rust Native
+* Single Binary Applications
+* Explicit Routing
+* Minimal Dependencies
+* Open Source (FOSS)
+* No Vendor Lock-In
+* Operational Simplicity
+
+Rather than beginning with a framework and removing features, NX9 begins with the application itself and adds only the software required to solve the problem.
+
+Nothing more.
+
+Nothing less.
+
+---
+
+# Complexity Is Not Free
+
+Every dependency introduces responsibility.
+
+Someone must eventually:
+
+* install it;
+* configure it;
+* update it;
+* monitor it;
+* patch it;
+* audit it;
+* understand it.
+
+Modern web applications frequently include:
+
+* thousands of npm packages;
+* hundreds of indirect dependencies;
+* build systems;
+* transpilers;
+* runtime environments;
+* middleware layers;
+* plugins;
+* framework conventions.
+
+Each component may be valuable.
+
+Collectively, they also increase operational complexity and expand the software that must be maintained throughout the application's lifetime.
+
+NX9 therefore asks a much simpler engineering question:
+
+> **Can this problem be solved with significantly less software?**
+
+If the answer is yes, simplicity becomes the preferred engineering decision.
+
+---
+
+# Production Snapshot
+
+This study is based entirely on production access logs collected after **nx9.in** became publicly accessible.
+
+This was **not**:
+
+* a penetration test;
+* a laboratory simulation;
+* synthetic benchmark traffic.
+
+It was ordinary Internet traffic.
+
+Within a short period of public exposure:
+
+* automated vulnerability scanners began probing the server;
+* legitimate browsers accessed the published website;
+* Twitter/X generated preview cards;
+* search crawlers indexed the content;
+* additional independent scanners continued probing throughout the observation period.
+
+---
+
+# Observed Traffic
+
+During the observation period:
+
+| Response         |   Count | Percentage |
+| ---------------- | ------: | ---------: |
+| 404 Not Found    | **331** |  **91.4%** |
+| 304 Not Modified |      20 |       5.5% |
+| 200 OK           |      11 |       3.1% |
+
+The most striking observation is that **over 91% of incoming requests were not attempts to use the application.**
+
+They were attempts to discover software that was never deployed.
+
+---
+
+# What Were the Bots Looking For?
+
+Representative examples include:
+
+```text
+/.env
+/vendor/.env
+/wp-admin/
+/wp-content/
+/wp-includes/
+/phpinfo.php
+/admin.php
+/public/css.php
+/f35.php
+/222.php
+/chosen.php
+/vercel.json
+/vite.config.ts
+/vendors~main.bundle.js
+/vue/
+/v1/admin/
+```
+
+These requests reveal remarkably consistent assumptions.
+
+| Requested Resource       | What the Scanner Expected   |
+| ------------------------ | --------------------------- |
+| `.env`                   | Laravel / PHP configuration |
+| `vendor/.env`            | Composer project            |
+| `wp-admin`               | WordPress                   |
+| `wp-content`             | WordPress plugins           |
+| `phpinfo.php`            | PHP runtime                 |
+| `admin.php`              | PHP administration panel    |
+| `f35.php`                | PHP web shell               |
+| `public/css.php`         | Vulnerable PHP application  |
+| `vite.config.ts`         | Vite project                |
+| `vendors~main.bundle.js` | Webpack / React build       |
+| `vercel.json`            | Vercel deployment           |
+| `vue/.env`               | Vue application             |
+
+The scanners were not attempting to identify NX9.
+
+They were attempting to identify technologies commonly deployed across today's Internet.
+
+---
+
+# What Actually Happened?
+
+Every vulnerability probe received essentially the same response.
+
+```text
+404 Not Found
+```
+
+Not because NX9 blocked the request.
+
+Not because a Web Application Firewall intercepted it.
+
+Not because an intrusion detection system analyzed it.
+
+The requested resources simply did not exist.
+
+This distinction is critical.
+
+There is a significant engineering difference between software successfully defending itself and software that was never deployed in the first place.
+
+---
+
+# Explicit Routing
+
+NX9 applications expose only routes intentionally defined by the developer.
+
+Conceptually:
+
+```text
+/
+├── /
+├── /projects
+├── /about
+├── /contact
+└── 404
+```
+
+There is:
+
+* no automatic controller discovery;
+* no runtime file resolution;
+* no directory-based routing;
+* no framework-generated endpoints.
+
+If a route was never implemented, it simply cannot be reached.
+
+Unknown requests terminate immediately at the fallback handler.
+
+---
+
+# Security Begins Before Deployment
+
+Security is often discussed in terms of:
+
+* firewalls;
+* intrusion detection systems;
+* endpoint protection;
+* monitoring platforms.
+
+Those remain valuable.
+
+However, architecture itself is also a security decision.
+
+The NX9 deployment contained:
+
+* no PHP interpreter;
+* no WordPress;
+* no Laravel;
+* no Composer vendor directory;
+* no Node.js runtime;
+* no exposed `.env`;
+* no framework-generated administration interface;
+* no debug endpoints.
+
+Those components were never installed.
+
+Consequently, they never became part of the deployment's attack surface.
+
+This is not **security through obscurity**.
+
+It is **security through intentional software selection**.
+
+---
+
+# A Smaller Stack
+
+Many modern web deployments resemble:
+
+```text
+Internet
+      │
+      ▼
+Reverse Proxy
+      │
+      ▼
+Runtime
+      │
+      ▼
+Framework
+      │
+      ▼
+Middleware
+      │
+      ▼
+Plugins
+      │
+      ▼
+Packages
+      │
+      ▼
+Application
+```
+
+NX9 deliberately reduces the deployment:
+
+```text
+Internet
+      │
+      ▼
+Nginx
+      │
+      ▼
+Rust Binary
+      │
+      ▼
+Explicit Route Table
+      │
+      ▼
+Application Logic
+```
+
+The objective is not minimalism for its own sake.
+
+The objective is engineering proportional to the problem being solved.
+
+---
+
+# Frameworks Are Not the Enemy
+
+This case study should not be interpreted as criticism of frameworks.
+
+Frameworks solve difficult engineering problems.
+
+Many projects genuinely require them.
+
+NX9 simply argues that every dependency should justify its existence.
+
+Engineering is not about choosing the most fashionable technology.
+
+It is about choosing the most appropriate technology.
+
+Sometimes that means a sophisticated framework.
+
+Sometimes that means a single Rust binary.
+
+---
+
+# Legitimate Traffic Continued Normally
+
+An equally important observation is what **did** work.
+
+Legitimate clients successfully accessed the application throughout the observation period.
+
+This included:
+
+* desktop browsers;
+* Android browsers;
+* Twitter/X preview generation;
+* search engine crawlers;
+* browser cache validation (`304 Not Modified`).
+
+The minimal deployment remained fully functional for intended users while exposing no unnecessary application surface.
+
+---
+
+# Non-Goals
+
+This article does **not** claim:
+
+* that Rust is immune to vulnerabilities;
+* that frameworks are insecure;
+* that 404 responses alone provide security;
+* that NX9 cannot contain bugs.
+
+Instead, it demonstrates a much simpler engineering principle:
+
+> **Software that is never deployed cannot become part of your deployment's attack surface.**
+
+---
+
+# Lessons Learned
+
+The production logs reveal a surprisingly simple truth.
+
+The overwhelming majority of unsolicited Internet traffic was not exploring the application itself.
+
+It was exploring assumptions.
+
+The scanners assumed:
+
+* PHP;
+* WordPress;
+* Laravel;
+* Vue;
+* Node.js;
+* Composer;
+* Vite;
+* Vercel;
+* common administration panels.
+
+NX9 deliberately deployed none of them.
+
+The result was not that sophisticated defensive software defeated the attacks.
+
+The result was that the attacks found nothing matching their expectations.
+
+---
+
+# Conclusion
+
+Every NX9 project begins with the same engineering question:
+
+> **What is the smallest amount of software required to solve this problem well?**
+
+Sometimes that answer includes a framework.
+
+Often it does not.
+
+This case study demonstrates that software minimalism is not merely an aesthetic preference.
+
+It is an architectural decision with practical operational consequences.
+
+During the observed period, more than **91%** of incoming requests were attempts to identify technologies that simply were not present.
+
+That outcome was not accidental.
+
+It was the direct consequence of choosing a smaller, simpler, explicitly designed software stack.
+
+**Build only what you need.**
+
+**Deploy only what you trust.**
+
+**Maintain only what you own.**
+
+Because every component you choose **not** to deploy is one less component to configure, patch, monitor, audit—and one less component available to be targeted.
+
+**That is the NX9 philosophy.**
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..3435033
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,52 @@
+# License
+
+Copyright © 2026 Sunil Thakare
+
+This project is licensed under **either** of the following licenses, at your option:
+
+* Apache License, Version 2.0
+* MIT License
+
+You may choose either license for your use of this software.
+
+---
+
+## Apache License 2.0
+
+Copyright © 2026 Sunil Thakare
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+> https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an **"AS IS" BASIS**,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+---
+
+## MIT License
+
+Copyright © 2026 Sunil Thakare
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED **"AS IS"**, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/PHILOSOPHY.md b/PHILOSOPHY.md
new file mode 100644
index 0000000..d870865
--- /dev/null
+++ b/PHILOSOPHY.md
@@ -0,0 +1,122 @@
+# NX9 Philosophy: Engineering Beyond Frameworks
+
+**A real-world case study in software minimalism, explicit routing, and reduced attack surface**
+
+> "The best way to reduce complexity is not to manage more software—it is to deploy less software."
+
+## Introduction
+
+Modern software engineering often begins with a familiar question:
+
+> "Which framework should we use?"
+
+NX9 begins with a different question:
+
+> "Do we need one at all?"
+
+This is not an argument against frameworks. Frameworks like React, Angular, Laravel, Spring Boot, and Next.js have solved incredibly hard problems and transformed development.
+
+But they solved *specific* problems.
+
+A personal website, a self-hosted utility, an authentication service, a URL shortener, or an infrastructure component rarely requires thousands of JavaScript packages, multiple runtimes, extensive middleware chains, complex build pipelines, and enormous dependency trees simply to deliver its intended functionality.
+
+For many projects, complexity becomes the default — not the requirement.
+
+NX9 deliberately chooses another path.
+
+## Production Snapshot
+
+The observations presented in this article come directly from the production logs of **nx9.in** after its first public deployment.
+
+They are **not** the result of a penetration test, laboratory simulation, or synthetic benchmark.
+
+During the observation period:
+
+- Multiple independent vulnerability scanners began probing the server shortly after public exposure.
+- Automated requests targeted common framework artifacts, PHP files, WordPress installations, Laravel configuration, Vue projects, Docker deployments, and build-system outputs.
+- Every vulnerability probe resulted in **404 Not Found**.
+- Legitimate visitors — including desktop browsers, Android devices, Twitter/X crawlers, search crawlers, and internal users — continued to access the published resources normally.
+
+These observations provide a useful real-world case study of the NX9 engineering philosophy.
+
+## Engineering Beyond Frameworks
+
+NX9 is founded on a simple engineering principle:
+
+> Deploy only the software necessary to solve the problem.  
+> Nothing more.  
+> Nothing less.
+
+Every project within the NX9 ecosystem follows the same philosophy:
+
+- Privacy First
+- Self-Hosted First
+- Linux Native
+- Rust Native
+- Single Binary Applications
+- Explicit Routing
+- Minimal Dependencies
+- Open Source (FOSS)
+- No Vendor Lock-In
+- Operational Simplicity
+
+Frameworks are not avoided because they are "bad."
+
+They are avoided when they solve problems the application simply does not have.
+
+Every dependency should justify its existence.  
+Every abstraction should earn its maintenance cost.  
+Every additional component should provide value greater than the complexity it introduces.
+
+## Complexity Has a Cost
+
+Modern applications are often assembled from enormous dependency trees.
+
+A simple "Hello World" project may involve:
+
+- thousands of npm packages
+- hundreds of transitive dependencies
+- multiple build tools
+- package managers
+- runtime environments
+- framework-specific tooling
+- automated code generation
+
+Each component is individually useful.  
+Collectively, they increase operational responsibility.
+
+Every additional dependency must eventually be:
+
+- installed
+- configured
+- updated
+- audited
+- monitored
+- patched
+- understood
+
+NX9 asks a simple engineering question:
+
+> Can this problem be solved with significantly less software?
+
+If the answer is yes, simplicity becomes the preferred design.
+
+## Real-World Validation
+
+Shortly after **nx9.in** became publicly accessible, automated scanners began probing the server.
+
+The requests were not random. They were highly characteristic of Internet-wide reconnaissance targeting common deployment technologies.
+
+Representative examples included:
+
+```text
+/.env
+/vendor/.env
+/wp-admin/
+/wp-content/
+/phpinfo.php
+/vercel.json
+/vite.config.ts
+/vendors~main.bundle.js
+/vue/
+/v1/admin/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3394a2e
--- /dev/null
+++ b/README.md
@@ -0,0 +1,66 @@
+# NX9
+
+**Next Generation 9** — A philosophy-driven ecosystem of self-hosted, privacy-first software.
+
+Every project is built around one core idea:
+
+> **Infrastructure should belong to its operator — not to a cloud provider, subscription service, or vendor.**
+
+### Philosophy
+
+NX9 is not a framework or a platform. It is a collection of independent, single-binary Rust applications designed for:
+
+- Operator ownership
+- Privacy by default
+- Self-hosting first
+- Simplicity over complexity
+- Long-term maintainability
+- Zero telemetry or vendor lock-in
+
+We deliberately choose minimal dependencies, explicit routing, SQLite-first storage, and Linux-native design. The goal is software that is easy to understand, deploy, operate, and trust — even years from now.
+
+### Core Projects
+
+- **[nx9-url-shortener](https://codeberg.org/thakares/nx9-url-shortener)**  
+  Multi-user URL shortener with analytics, QR codes, password protection, expiration, and tenant isolation.
+
+- **[nx9-auth](https://codeberg.org/thakares/nx9-auth)**  
+  Lightweight identity and access management service with sessions, PATs, RBAC, and audit logging.
+
+- **[nx9-dns-server](https://codeberg.org/thakares/nx9-dns-server)**  
+  Authoritative DNS server with DNSSEC support. Lightweight and designed for self-hosted use.
+
+- **[nx9-chronoseal-rs](https://codeberg.org/thakares/nx9-chronoseal-rs)**  
+  Privacy-first browser attestation framework for anti-bot and anti-AI scraping protection.
+
+### Documentation
+
+- [Philosophy → Engineering Beyond Frameworks](https://nx9.in/case-study.html)
+- [Architecture Overview](ARCHITECTURE.md)
+- [Case Study: How Simplicity Defended Against Real Attacks](https://nx9.in/case-study.html)
+- [Roadmap](ROADMAP.md)
+
+### Website
+
+The full website source is available in the [`www/`](www/) directory.
+
+### Values
+
+- Privacy by design
+- Single binary deployments
+- Explicit routing
+- Operator sovereignty
+- Open Source (permissive licenses)
+- No telemetry. No vendor lock-in.
+
+### Get Involved
+
+- Star or fork the projects you find useful
+- Open issues or discussions for feedback
+- All projects are independent but share the same architectural principles
+
+---
+
+**NX9** — Software people can own, understand, and control.
+
+Built by [Sunil Thakare](https://codeberg.org/thakares).
\ No newline at end of file
diff --git a/ROADMAP.md b/ROADMAP.md
new file mode 100644
index 0000000..14db731
--- /dev/null
+++ b/ROADMAP.md
@@ -0,0 +1,440 @@
+# NX9 Roadmap
+
+> **Engineering Beyond Frameworks**
+>
+> *Building a complete ecosystem of self-hosted, privacy-first, single-binary applications.*
+
+---
+
+# Vision
+
+NX9 is not a single application.
+
+It is an ecosystem of independent, interoperable, self-hosted tools designed around a common engineering philosophy:
+
+* Build only what is necessary.
+* Avoid unnecessary frameworks.
+* Minimize dependencies.
+* Keep deployments simple.
+* Respect user privacy.
+* Eliminate vendor lock-in.
+* Remain fully open source.
+
+Every project should be deployable in minutes, understandable by a single engineer, and maintainable for years—not months.
+
+---
+
+# Core Principles
+
+Every NX9 project follows the same architectural principles.
+
+## Privacy First
+
+No telemetry.
+
+No tracking.
+
+No analytics.
+
+Your data belongs to you.
+
+---
+
+## Self-Hosted First
+
+Cloud deployment is optional.
+
+Self-hosting is the default.
+
+Users should own their infrastructure.
+
+---
+
+## Linux Native
+
+Linux is the primary deployment platform.
+
+Applications should feel like first-class Linux software.
+
+---
+
+## Rust Native
+
+Rust provides:
+
+* predictable performance
+* memory safety
+* modern tooling
+* excellent concurrency
+* minimal runtime requirements
+
+---
+
+## Single Binary Applications
+
+Whenever practical:
+
+* one executable
+* one configuration directory
+* one service
+* one deployment
+
+No dependency on heavyweight runtime ecosystems.
+
+---
+
+## Explicit Over Implicit
+
+Nothing should happen "by convention."
+
+Routes.
+
+Configuration.
+
+Permissions.
+
+Features.
+
+Everything should be explicit.
+
+---
+
+## Minimal Dependencies
+
+Dependencies are engineering decisions—not conveniences.
+
+Every dependency:
+
+* increases maintenance
+* expands attack surface
+* introduces supply-chain risk
+
+If a problem can be solved internally with reasonable effort, that may be preferable to importing another dependency.
+
+---
+
+## Operational Simplicity
+
+Deployment should be boring.
+
+Installation should be boring.
+
+Upgrades should be boring.
+
+Reliability is more valuable than cleverness.
+
+---
+
+# Current Projects
+
+## BZOD
+
+**Status:** Stable
+
+Privacy-first URL shortener.
+
+Features include:
+
+* custom aliases
+* QR codes
+* expiration
+* password protection
+* analytics
+* audit logs
+* REST API
+* SQLite
+* PostgreSQL
+* Docker
+* single-binary deployment
+
+---
+
+## nx9-auth
+
+**Status:** Active Development
+
+Authentication platform designed for self-hosted applications.
+
+Goals include:
+
+* OAuth2
+* OpenID Connect
+* JWT
+* session management
+* user management
+* API authentication
+* SSO for NX9 ecosystem
+
+---
+
+## ChronoSeal
+
+**Status:** Planned
+
+Digital timestamping platform.
+
+Goals:
+
+* trusted timestamping
+* immutable records
+* hash verification
+* document integrity
+* long-term verification
+
+---
+
+# Planned Ecosystem
+
+The long-term objective is a cohesive ecosystem where every application shares the same design philosophy and integrates naturally with the others.
+
+Potential projects include:
+
+## File Sharing
+
+Simple.
+
+Fast.
+
+Self-hosted.
+
+No unnecessary complexity.
+
+---
+
+## Password Manager
+
+Encrypted.
+
+Offline-first.
+
+Self-hostable.
+
+---
+
+## Notification Service
+
+Email.
+
+Webhooks.
+
+Push.
+
+Simple API.
+
+---
+
+## Monitoring Dashboard
+
+Infrastructure monitoring.
+
+System health.
+
+Container health.
+
+Notifications.
+
+---
+
+## Documentation Platform
+
+Markdown-first.
+
+Fast.
+
+Searchable.
+
+Single binary.
+
+---
+
+## Workflow Automation
+
+Simple automation engine for self-hosted infrastructure.
+
+Designed for practical administration rather than enterprise complexity.
+
+---
+
+# Technical Direction
+
+## Frontend
+
+Preference for:
+
+* HTML5
+* CSS3
+* Vanilla JavaScript
+
+JavaScript frameworks should only be introduced when they solve demonstrable engineering problems.
+
+---
+
+## Backend
+
+Primary language:
+
+* Rust
+
+Preferred characteristics:
+
+* async
+* efficient
+* predictable
+* memory safe
+
+---
+
+## Database
+
+Primary:
+
+* SQLite
+
+Optional:
+
+* PostgreSQL
+
+Applications should not require a database server unless the workload justifies it.
+
+---
+
+## APIs
+
+REST-first.
+
+JSON.
+
+Well documented.
+
+Versioned.
+
+Simple.
+
+---
+
+## Deployment
+
+Supported environments:
+
+* Linux
+* Docker
+* Podman
+
+Future consideration:
+
+* FreeBSD
+
+---
+
+## Reverse Proxy
+
+Recommended:
+
+* Nginx
+
+Applications should work behind any standards-compliant reverse proxy.
+
+---
+
+# Security Philosophy
+
+Security begins with architecture.
+
+NX9 emphasizes:
+
+* explicit routing
+* reduced attack surface
+* minimal dependencies
+* least privilege
+* secure defaults
+* modern cryptography
+* reproducible builds
+
+Security features should emerge naturally from good engineering—not from accumulating layers of defensive software.
+
+---
+
+# Non-Goals
+
+NX9 does **not** aim to:
+
+* replace every web framework;
+* eliminate JavaScript;
+* compete with enterprise platforms;
+* build monolithic "all-in-one" systems;
+* chase technology trends;
+* optimize for resume-driven development.
+
+The objective is thoughtful engineering, not ideological minimalism.
+
+---
+
+# Design Philosophy
+
+Every new feature should answer three questions:
+
+1. Does it solve a real problem?
+2. Can it be implemented simply?
+3. Does it increase long-term maintenance disproportionately?
+
+If the answer to the third question is **yes**, the feature should be reconsidered.
+
+---
+
+# Success Criteria
+
+A successful NX9 application should be:
+
+* understandable by reading the source;
+* deployable within minutes;
+* maintainable by a small team—or even a single developer;
+* performant without extraordinary hardware;
+* secure through simplicity;
+* pleasant to operate.
+
+---
+
+# Community Principles
+
+NX9 welcomes contributions that align with its philosophy.
+
+Preferred contributions include:
+
+* bug fixes
+* documentation
+* accessibility improvements
+* performance optimizations
+* security improvements
+* interoperability
+* code simplification
+
+Contributions that significantly increase complexity without corresponding long-term value may not align with the project's direction.
+
+---
+
+# Looking Forward
+
+The goal of NX9 is not to build the largest software ecosystem.
+
+It is to build one of the most coherent.
+
+Every project should feel familiar.
+
+Every deployment should feel predictable.
+
+Every application should respect the user's ownership of their data and infrastructure.
+
+The roadmap will continue to evolve as new ideas emerge, but one principle will remain unchanged:
+
+> **Choose the simplest architecture capable of solving the problem well.**
+
+Because software should empower its users—not burden them with unnecessary complexity.
+
+---
+
+**NX9**
+
+*Engineering Beyond Frameworks.*
+*Build only what you need.*
+*Deploy only what you trust.*
+*Maintain only what you own.*
diff --git a/www/android-icon-144x144.png b/www/android-icon-144x144.png
new file mode 100644
index 0000000..dc5d672
Binary files /dev/null and b/www/android-icon-144x144.png differ
diff --git a/www/android-icon-192x192.png b/www/android-icon-192x192.png
new file mode 100644
index 0000000..23eaf74
Binary files /dev/null and b/www/android-icon-192x192.png differ
diff --git a/www/android-icon-36x36.png b/www/android-icon-36x36.png
new file mode 100644
index 0000000..afc8771
Binary files /dev/null and b/www/android-icon-36x36.png differ
diff --git a/www/android-icon-48x48.png b/www/android-icon-48x48.png
new file mode 100644
index 0000000..cd7cacb
Binary files /dev/null and b/www/android-icon-48x48.png differ
diff --git a/www/android-icon-72x72.png b/www/android-icon-72x72.png
new file mode 100644
index 0000000..5f9aa11
Binary files /dev/null and b/www/android-icon-72x72.png differ
diff --git a/www/android-icon-96x96.png b/www/android-icon-96x96.png
new file mode 100644
index 0000000..98b94e2
Binary files /dev/null and b/www/android-icon-96x96.png differ
diff --git a/www/apple-icon-114x114.png b/www/apple-icon-114x114.png
new file mode 100644
index 0000000..16abb12
Binary files /dev/null and b/www/apple-icon-114x114.png differ
diff --git a/www/apple-icon-120x120.png b/www/apple-icon-120x120.png
new file mode 100644
index 0000000..e4f2ea7
Binary files /dev/null and b/www/apple-icon-120x120.png differ
diff --git a/www/apple-icon-144x144.png b/www/apple-icon-144x144.png
new file mode 100644
index 0000000..37de658
Binary files /dev/null and b/www/apple-icon-144x144.png differ
diff --git a/www/apple-icon-152x152.png b/www/apple-icon-152x152.png
new file mode 100644
index 0000000..77dd1e1
Binary files /dev/null and b/www/apple-icon-152x152.png differ
diff --git a/www/apple-icon-180x180.png b/www/apple-icon-180x180.png
new file mode 100644
index 0000000..a49ddd3
Binary files /dev/null and b/www/apple-icon-180x180.png differ
diff --git a/www/apple-icon-57x57.png b/www/apple-icon-57x57.png
new file mode 100644
index 0000000..5564ed1
Binary files /dev/null and b/www/apple-icon-57x57.png differ
diff --git a/www/apple-icon-60x60.png b/www/apple-icon-60x60.png
new file mode 100644
index 0000000..f52c6b6
Binary files /dev/null and b/www/apple-icon-60x60.png differ
diff --git a/www/apple-icon-72x72.png b/www/apple-icon-72x72.png
new file mode 100644
index 0000000..5f9aa11
Binary files /dev/null and b/www/apple-icon-72x72.png differ
diff --git a/www/apple-icon-76x76.png b/www/apple-icon-76x76.png
new file mode 100644
index 0000000..81bdbda
Binary files /dev/null and b/www/apple-icon-76x76.png differ
diff --git a/www/apple-icon-precomposed.png b/www/apple-icon-precomposed.png
new file mode 100644
index 0000000..e518b3a
Binary files /dev/null and b/www/apple-icon-precomposed.png differ
diff --git a/www/apple-icon.png b/www/apple-icon.png
new file mode 100644
index 0000000..e518b3a
Binary files /dev/null and b/www/apple-icon.png differ
diff --git a/www/banner.png b/www/banner.png
new file mode 100644
index 0000000..d1dfb12
Binary files /dev/null and b/www/banner.png differ
diff --git a/www/browserconfig.xml b/www/browserconfig.xml
new file mode 100644
index 0000000..c554148
--- /dev/null
+++ b/www/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/www/case-study.html b/www/case-study.html
new file mode 100644
index 0000000..22fdac9
--- /dev/null
+++ b/www/case-study.html
@@ -0,0 +1,1345 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NX9 — Next Generation 9 | Software people can own, understand, and control</title>
+<meta name="description" content="NX9 is a philosophy-driven ecosystem of self-hosted, privacy-first Rust software by Sunil Thakare. No telemetry. No vendor lock-in. Software people can own, understand, and control.">
+<meta name="color-scheme" content="light dark">
+
+<!-- Favicons & App Icons -->
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/manifest.json">
+<meta name="msapplication-TileColor" content="#020617">
+<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+<meta name="theme-color" content="#020617">
+
+<style>
+/* ============================================================
+   1. DESIGN TOKENS
+   ============================================================ */
+:root {
+  --bg: #ffffff;
+  --bg-raised: #ffffff;
+  --surface: #f5f6f9;
+  --surface-hover: #ecefF4;
+  --border: #e1e4ea;
+  --border-strong: #cbd0da;
+  --text: #12151a;
+  --text-secondary: #4b5563;
+  --text-muted: #6b7280;
+  --accent: #6d5df6;
+  --accent-strong: #5643e0;
+  --accent-soft: #eeecff;
+  --accent-contrast: #ffffff;
+  --dot: rgba(109, 93, 246, 0.14);
+  --line: rgba(109, 93, 246, 0.08);
+  --shadow: 0 1px 2px rgba(16, 20, 26, 0.04), 0 4px 16px rgba(16, 20, 26, 0.05);
+  --shadow-hover: 0 4px 10px rgba(109, 93, 246, 0.12), 0 16px 36px rgba(16, 20, 26, 0.1);
+  --radius: 10px;
+  --radius-sm: 6px;
+  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  --content-max: 1180px;
+  --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
+
+  /* Gradient palette — reused across icons, borders and glow shadows */
+  --grad-1: linear-gradient(135deg, #7c5cf9, #b18bfa);
+  --grad-2: linear-gradient(135deg, #06b6d4, #5eead4);
+  --grad-3: linear-gradient(135deg, #f59e0b, #fb923c);
+  --grad-4: linear-gradient(135deg, #ec4899, #fb7185);
+  --grad-5: linear-gradient(135deg, #10b981, #6ee7b7);
+  --grad-6: linear-gradient(135deg, #3b82f6, #7dd3fc);
+  --grad-7: linear-gradient(135deg, #ef4444, #f97316);
+  --glow-1: rgba(124, 92, 249, .35);
+  --glow-2: rgba(6, 182, 212, .35);
+  --glow-3: rgba(245, 158, 11, .35);
+  --glow-4: rgba(236, 72, 153, .35);
+  --glow-5: rgba(16, 185, 129, .35);
+  --glow-6: rgba(59, 130, 246, .35);
+  --glow-7: rgba(239, 68, 68, .35);
+}
+
+html[data-theme="dark"] {
+  --bg: #0a0c10;
+  --bg-raised: #12151b;
+  --surface: #161a21;
+  --surface-hover: #1d222b;
+  --border: #262c37;
+  --border-strong: #363e4b;
+  --text: #eceef2;
+  --text-secondary: #a7aec0;
+  --text-muted: #7c8497;
+  --accent: #9d8bff;
+  --accent-strong: #b6a7ff;
+  --accent-soft: #1c1a33;
+  --accent-contrast: #0a0c10;
+  --dot: rgba(157, 139, 255, 0.16);
+  --line: rgba(157, 139, 255, 0.08);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.4);
+  --shadow-hover: 0 4px 14px rgba(157, 139, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45);
+}
+
+/* ============================================================
+   2. RESET & BASE
+   ============================================================ */
+*, *::before, *::after { box-sizing: border-box; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-ui);
+  background-color: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  transition: var(--transition-theme);
+  background-image:
+    linear-gradient(var(--line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--line) 1px, transparent 1px),
+    radial-gradient(var(--dot) 1px, transparent 1px);
+  background-size: 64px 64px, 64px 64px, 16px 16px;
+  background-position: -1px -1px, -1px -1px, -1px -1px;
+}
+
+/* Logo Theme Dynamic Filter */
+html[data-theme="light"] .nav-icon,
+html[data-theme="light"] .hero-logo,
+html[data-theme="light"] .footer-logo {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+img { max-width: 100%; display: block; }
+a { color: inherit; }
+ul { list-style: none; margin: 0; padding: 0; }
+h1, h2, h3, h4, p { margin: 0; }
+button { font-family: inherit; }
+table { border-collapse: collapse; width: 100%; }
+
+::selection { background: var(--accent); color: var(--accent-contrast); }
+
+a:focus-visible, button:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+.skip-link {
+  position: absolute; left: 1rem; top: -100px;
+  background: var(--accent); color: var(--accent-contrast);
+  padding: 0.65rem 1.1rem; border-radius: var(--radius-sm);
+  font-size: 0.9rem; font-weight: 600; z-index: 200;
+  transition: top 0.2s ease;
+}
+.skip-link:focus { top: 1rem; }
+
+/* Hidden icon sprite sheet */
+.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
+
+.icon {
+  width: 20px; height: 20px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+.icon-badge {
+  width: 46px; height: 46px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: #fff;
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow);
+}
+.icon-badge .icon { width: 24px; height: 24px; }
+
+/* Gradient utility classes */
+.grad-1 { background: var(--grad-1); }
+.grad-2 { background: var(--grad-2); }
+.grad-3 { background: var(--grad-3); }
+.grad-4 { background: var(--grad-4); }
+.grad-5 { background: var(--grad-5); }
+.grad-6 { background: var(--grad-6); }
+.grad-7 { background: var(--grad-7); }
+
+/* ============================================================
+   3. LAYOUT PRIMITIVES
+   ============================================================ */
+.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: 1.5rem; }
+section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
+.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  font-family: var(--font-mono); font-size: 0.75rem;
+  letter-spacing: 0.14em; text-transform: uppercase;
+  background: linear-gradient(90deg, var(--accent), #ec4899);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  margin-bottom: 0.75rem; font-weight: 700;
+}
+.section-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
+.section-sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 65ch; }
+
+/* ============================================================
+   4. NAVIGATION
+   ============================================================ */
+.site-header {
+  position: sticky; top: 0; z-index: 100;
+  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: saturate(160%) blur(10px);
+  -webkit-backdrop-filter: saturate(160%) blur(10px);
+  border-bottom: 1px solid var(--border);
+  transition: var(--transition-theme);
+}
+.nav-inner {
+  max-width: var(--content-max); margin-inline: auto; padding: 0.85rem 1.5rem;
+  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+}
+.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; }
+.nav-icon { height: 26px; width: auto; }
+.nav-links { display: flex; align-items: center; gap: 0.15rem; }
+.nav-links a {
+  text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary);
+  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.nav-links a:hover { color: var(--text); background-color: var(--surface); }
+.nav-links a.is-active { color: var(--accent); }
+.nav-right { display: flex; align-items: center; gap: 0.5rem; }
+
+.theme-toggle {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  background: var(--surface); border: 1px solid var(--border); color: var(--text);
+  border-radius: var(--radius); padding: 0.45rem 0.7rem; font-size: 0.82rem;
+  font-family: var(--font-mono); cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }
+
+.hamburger {
+  display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
+  width: 40px; height: 40px; cursor: pointer; color: var(--text);
+  align-items: center; justify-content: center;
+}
+.hamburger span, .hamburger span::before, .hamburger span::after {
+  content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.hamburger span::before { position: absolute; top: -6px; }
+.hamburger span::after { position: absolute; top: 6px; }
+.hamburger[aria-expanded="true"] span { background: transparent; }
+.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
+.hamburger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
+
+@media (max-width: 860px) {
+  .hamburger { display: inline-flex; }
+  .nav-links {
+    position: fixed; inset: 61px 0 auto 0; flex-direction: column; align-items: stretch;
+    background: var(--bg-raised); border-bottom: 1px solid var(--border); padding: 0.5rem;
+    gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none;
+    transition: transform 0.18s ease, opacity 0.18s ease; max-height: 80vh; overflow-y: auto;
+  }
+  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
+  .nav-links a { padding: 0.85rem 1rem; border-radius: var(--radius-sm); }
+}
+
+/* ============================================================
+   5. HERO
+   ============================================================ */
+.hero { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
+.hero::before {
+  content: ""; position: absolute; top: -20%; right: -10%; width: 560px; height: 560px;
+  background: radial-gradient(circle, var(--glow-1), transparent 70%);
+  filter: blur(10px); pointer-events: none; opacity: 0.55; z-index: 0;
+}
+.hero::after {
+  content: ""; position: absolute; bottom: -30%; left: -10%; width: 480px; height: 480px;
+  background: radial-gradient(circle, var(--glow-2), transparent 70%);
+  filter: blur(10px); pointer-events: none; opacity: 0.4; z-index: 0;
+}
+.hero .wrap { position: relative; z-index: 1; }
+.hero-kicker {
+  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
+  color: var(--text-muted); margin-bottom: 1.25rem;
+}
+.hero-kicker::before { content: "$ "; color: var(--accent); }
+.hero-logo { max-width: 600px; width: 100%; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)); }
+.hero h2 { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 500; color: var(--text-secondary); margin-top: 0.6rem; letter-spacing: -0.005em; }
+.hero blockquote {
+  margin: 1.75rem 0 1.5rem; padding-left: 1.1rem;
+  border-left: 3px solid transparent;
+  border-image: linear-gradient(180deg, var(--accent), #ec4899) 1;
+  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; max-width: 46ch;
+}
+.hero p.lede { max-width: 64ch; color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 1.25rem; }
+.hero-byline { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; }
+.hero-byline strong { color: var(--text-secondary); }
+.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
+
+.btn {
+  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem;
+  font-weight: 600; font-size: 0.95rem; padding: 0.75rem 1.4rem; border-radius: var(--radius);
+  text-decoration: none; cursor: pointer; border: 1px solid transparent;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+}
+.btn:active { transform: translateY(1px); }
+.btn-primary { background: linear-gradient(135deg, var(--accent), #ec4899); color: #fff; }
+.btn-primary:hover { box-shadow: 0 10px 24px var(--glow-1); transform: translateY(-1px); }
+.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
+.btn-outline:hover { background: var(--surface); border-color: var(--accent); }
+.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
+
+.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transform: scale(0); pointer-events: none; animation: ripple 0.6s ease-out; }
+html[data-theme="dark"] .btn-outline .ripple { background: rgba(255,255,255,0.18); }
+@keyframes ripple { to { transform: scale(3); opacity: 0; } }
+
+/* ============================================================
+   6. ABOUT
+   ============================================================ */
+.about-panel {
+  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: clamp(1.5rem, 4vw, 2.5rem); font-size: 1.1rem; color: var(--text-secondary); line-height: 1.75;
+}
+.about-panel strong { color: var(--text); }
+
+/* ============================================================
+   7. COLORFUL CARD GRIDS
+   ============================================================ */
+.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.15rem; }
+
+.card {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.6rem; position: relative; overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.card::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  background: var(--card-grad, var(--grad-1));
+}
+.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--card-glow, var(--glow-1)); border-color: var(--border-strong); }
+.card .icon-badge { background: var(--card-grad, var(--grad-1)); }
+.card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.5rem; }
+.card p { color: var(--text-secondary); font-size: 0.94rem; }
+.card ul { margin-top: 0.6rem; }
+.card li {
+  color: var(--text-secondary); font-size: 0.9rem; position: relative; padding-left: 1.1rem; margin-top: 0.3rem;
+}
+.card li::before { content: "●"; position: absolute; left: 0; top: 0.05em; font-size: 0.55rem; color: var(--accent); }
+.card .card-tag {
+  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--text-muted); display: block; margin-top: 0.9rem;
+}
+
+/* ============================================================
+   8. PROJECTS
+   ============================================================ */
+.callout {
+  display: flex; gap: 0.85rem; align-items: flex-start;
+  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
+  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 2rem; font-size: 0.95rem; color: var(--text-secondary);
+}
+.callout strong { color: var(--text); }
+.callout .icon { color: var(--accent); margin-top: 0.15rem; }
+
+.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
+@media (max-width: 780px) { .project-grid { grid-template-columns: 1fr; } }
+
+.project-card {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; position: relative; overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.project-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-grad, var(--grad-1)); }
+.project-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--card-glow, var(--glow-1)); border-color: var(--border-strong); }
+.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
+.project-title { display: flex; align-items: center; gap: 0.65rem; }
+.project-title .icon-badge { width: 38px; height: 38px; margin-bottom: 0; border-radius: var(--radius-sm); background: var(--card-grad, var(--grad-1)); }
+.project-title .icon-badge .icon { width: 19px; height: 19px; }
+.project-card h3 { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 700; }
+.status-badge {
+  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 0.22rem 0.55rem; border-radius: 999px; white-space: nowrap; color: #fff; align-self: flex-start;
+}
+.project-card p.desc { color: var(--text-secondary); font-size: 0.93rem; }
+.tech-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
+.tech-badge {
+  font-family: var(--font-mono); font-size: 0.72rem; color: #fff; border-radius: var(--radius-sm);
+  padding: 0.22rem 0.55rem; background: var(--card-grad, var(--grad-1)); opacity: 0.92;
+}
+.project-links { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; }
+
+/* ============================================================
+   9. STATS
+   ============================================================ */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; }
+.stat {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.75rem 1rem; position: relative; overflow: hidden;
+}
+.stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-grad, var(--grad-1)); }
+.stat .num {
+  font-family: var(--font-mono); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; display: block;
+  background: var(--card-grad, var(--grad-1)); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.stat .label { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.35rem; }
+
+/* ============================================================
+   10. POSITIONING TABLE
+   ============================================================ */
+.positioning { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
+.positioning table { min-width: 560px; }
+.positioning th, .positioning td { text-align: left; padding: 0.9rem 1.2rem; font-size: 0.92rem; }
+.positioning thead th {
+  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
+  color: #fff; padding-block: 1rem;
+}
+.positioning thead th:first-child { background: var(--grad-7); }
+.positioning thead th:last-child { background: var(--grad-5); }
+.positioning tbody tr { border-top: 1px solid var(--border); background: var(--bg-raised); }
+.positioning tbody tr:nth-child(even) { background: var(--surface); }
+.positioning td:first-child { color: var(--text-muted); position: relative; padding-left: 2.2rem; }
+.positioning td:first-child::before { content: "✕"; position: absolute; left: 1.2rem; color: #ef4444; font-weight: 700; font-size: 0.8rem; }
+.positioning td:last-child { color: var(--text); font-weight: 600; position: relative; padding-left: 2.2rem; }
+.positioning td:last-child::before { content: "✓"; position: absolute; left: 1.2rem; color: #10b981; font-weight: 700; font-size: 0.8rem; }
+
+/* ============================================================
+   11. VISION
+   ============================================================ */
+.vision-panel {
+  position: relative; overflow: hidden;
+  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
+  border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.75rem, 5vw, 3rem);
+}
+.vision-panel::after {
+  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
+  background: linear-gradient(135deg, var(--accent), #ec4899, #06b6d4);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; pointer-events: none;
+}
+.vision-panel p {
+  font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 500; letter-spacing: -0.005em; color: var(--text); max-width: 62ch; position: relative;
+}
+.vision-panel p + p { margin-top: 1.1rem; color: var(--text-secondary); font-weight: 400; font-size: clamp(1rem, 2vw, 1.15rem); }
+
+/* ============================================================
+   12. VALUES
+   ============================================================ */
+.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.8rem; }
+.value-chip {
+  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 0.9rem; text-align: center;
+  background: var(--bg-raised); position: relative; overflow: hidden;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.value-chip::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-grad, var(--grad-1)); }
+.value-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--card-glow, var(--glow-1)); }
+.value-chip .n {
+  font-family: var(--font-mono); font-size: 0.7rem; display: block; margin-bottom: 0.5rem; font-weight: 700;
+  background: var(--card-grad, var(--grad-1)); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.value-chip .t { font-weight: 600; font-size: 0.95rem; }
+
+/* ============================================================
+   13. ROADMAP
+   ============================================================ */
+.roadmap-intro { color: var(--text-secondary); max-width: 70ch; margin-bottom: 2.5rem; font-size: 1rem; }
+.roadmap-intro strong { color: var(--text); }
+
+.circuit { display: flex; align-items: flex-start; overflow-x: auto; padding-block: 1rem 0.5rem; scrollbar-width: thin; }
+.node { flex: 1 0 100px; min-width: 100px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding-top: 2.75rem; }
+.node::before {
+  content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px;
+  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px); z-index: 0;
+}
+.node:first-child::before { display: none; }
+.node.is-active::before { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
+.node .pad {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-raised);
+  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem;
+  font-weight: 700; color: var(--text-muted); position: absolute; top: 0; z-index: 1;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.node.is-active .pad {
+  border-color: transparent; background: var(--card-grad, var(--grad-1)); color: #fff;
+  box-shadow: 0 0 0 4px var(--card-glow, var(--glow-1));
+}
+.node:hover .pad { transform: scale(1.12); }
+.node .name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; margin-top: 0.4rem; }
+.node .state { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
+.node.is-active .state { color: var(--accent); font-weight: 600; }
+
+@media (max-width: 720px) {
+  .circuit { flex-direction: column; align-items: stretch; overflow-x: visible; }
+  .node { flex-direction: row; text-align: left; padding: 0 0 1.75rem 2.9rem; min-width: 0; align-items: flex-start; }
+  .node::before { top: 0; left: 13px; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--border-strong) 0 6px, transparent 6px 11px); }
+  .node.is-active::before { background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 11px); }
+  .node .pad { top: 0; left: 0; }
+  .node .name { margin-top: 0; margin-left: 0.15rem; }
+  .node .text { display: flex; flex-direction: column; }
+}
+
+.roadmap-footnote { margin-top: 2rem; font-size: 0.95rem; color: var(--text-secondary); border-top: 1px solid var(--border); padding-top: 1.5rem; }
+.roadmap-footnote strong { color: var(--text); }
+
+/* ============================================================
+   14. REVEAL ANIMATION
+   ============================================================ */
+.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
+.reveal.is-visible { opacity: 1; transform: translateY(0); }
+@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
+
+/* ============================================================
+   15. FOOTER
+   ============================================================ */
+.site-footer { border-top: 1px solid var(--border); padding-block: 3rem 2rem; margin-top: 2rem; position: relative; overflow: hidden; }
+.site-footer::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4), var(--grad-5));
+}
+.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
+.footer-brand .mark {
+  font-family: var(--font-mono); font-weight: 800; font-size: 1.3rem;
+  background: linear-gradient(135deg, var(--accent), #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.footer-logo { max-width: 300px; width: 100%; height: auto; opacity: 0.5; margin-bottom: 0.5rem; }
+.footer-brand .sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.2rem; }
+.footer-motto { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
+.footer-links { display: flex; gap: 1.5rem; }
+.footer-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
+.footer-links a:hover { color: var(--accent); }
+.footer-bottom {
+  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); text-align: center; letter-spacing: 0.02em;
+}
+
+@media print {
+  .site-header, .theme-toggle, .hamburger, .hero-ctas, .btn, .project-links, .circuit { display: none !important; }
+  body { background-image: none; color: #000; }
+  section { padding-block: 1rem; }
+  a { color: #000; text-decoration: underline; }
+  .card::before, .project-card::before, .stat::before, .value-chip::before { display: none; }
+}
+
+<style>
+.article-page {
+  padding-block: 4rem;
+}
+.article-content {
+  max-width: 800px;
+  margin-inline: auto;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  color: var(--text-secondary);
+}
+.article-content h1 {
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  color: var(--text);
+  line-height: 1.2;
+  margin-bottom: 1rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.article-content h2 {
+  font-size: 1.75rem;
+  color: var(--text);
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+.article-content h3 {
+  font-size: 1.25rem;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-bottom: 2rem;
+}
+.article-content p {
+  margin-bottom: 1.5rem;
+}
+.article-content blockquote {
+  border-left: 4px solid var(--accent);
+  padding-left: 1.5rem;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  font-size: 1.2rem;
+  color: var(--text);
+  background: var(--surface);
+  padding-block: 1rem;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  margin-bottom: 1.5rem;
+}
+.article-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+.article-content hr {
+  border: 0;
+  height: 1px;
+  background: var(--border);
+  margin-block: 3rem;
+}
+.article-content ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+.article-content li {
+  margin-bottom: 0.5rem;
+}
+.article-content pre {
+  background: var(--surface);
+  padding: 1.5rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  overflow-x: auto;
+  margin-bottom: 1.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+}
+.article-content code {
+  font-family: var(--font-mono);
+  background: var(--surface);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: var(--accent);
+}
+.article-content pre code {
+  background: none;
+  padding: 0;
+  color: var(--text);
+}
+.article-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+  background: var(--bg-raised);
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.article-content th, .article-content td {
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+.article-content th {
+  background: var(--surface);
+  font-weight: 600;
+  color: var(--text);
+}
+.article-content tr:last-child td {
+  border-bottom: none;
+}
+</style>
+
+</style>
+</head>
+<body>
+
+<a href="#main" class="skip-link">Skip to content</a>
+
+<!-- ICON SPRITE -->
+<svg class="icon-sprite" aria-hidden="true">
+  <defs>
+    <symbol id="i-key" viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M17 6l3 3M14 9l2 2"/></symbol>
+    <symbol id="i-server" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><circle cx="7" cy="7" r="1" fill="currentColor" stroke="none"/><circle cx="7" cy="17" r="1" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-gauge" viewBox="0 0 24 24"><path d="M4 15a8 8 0 1116 0"/><path d="M12 15l4-5"/><circle cx="12" cy="15" r="1" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></symbol>
+    <symbol id="i-shield-check" viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></symbol>
+    <symbol id="i-wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 00-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 005.4-5.4l-2.5 2.5-2-2 2.5-2.5z"/></symbol>
+    <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3.5 2"/></symbol>
+    <symbol id="i-cpu" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1.5"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/></symbol>
+    <symbol id="i-box" viewBox="0 0 24 24"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z"/><path d="M4.5 7.5L12 12l7.5-4.5M12 12v9"/></symbol>
+    <symbol id="i-database" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/><path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/></symbol>
+    <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></symbol>
+    <symbol id="i-route" viewBox="0 0 24 24"><circle cx="5" cy="6" r="2.3"/><circle cx="19" cy="18" r="2.3"/><path d="M5 8.3v3a4 4 0 004 4h6a4 4 0 004 4"/></symbol>
+    <symbol id="i-layers" viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 8l9 5 9-5"/></symbol>
+    <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l4 3-4 3M13 15h4"/></symbol>
+    <symbol id="i-monitor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="1.5"/><path d="M8 20h8M12 16v4"/><path d="M6 12l3-3 2 2 4-4"/></symbol>
+    <symbol id="i-infinity" viewBox="0 0 24 24"><path d="M7 9a3.5 3.5 0 100 7 3.5 3.5 0 002.9-1.5L12 12l2.1 2.5A3.5 3.5 0 1017 9a3.5 3.5 0 00-2.9 1.5L12 13l-2.1-2.5A3.5 3.5 0 007 9z"/></symbol>
+    <symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></symbol>
+    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"/></symbol>
+    <symbol id="i-link" viewBox="0 0 24 24"><path d="M9 15l6-6"/><path d="M11 6l1-1a4 4 0 015.5 5.5l-2 2"/><path d="M13 18l-1 1a4 4 0 01-5.5-5.5l2-2"/></symbol>
+    <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.3 4 5.3 4 8.5s-1.5 6.2-4 8.5c-2.5-2.3-4-5.3-4-8.5s1.5-6.2 4-8.5z"/></symbol>
+    <symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 3v18"/><path d="M5 4h13l-3 4 3 4H5"/></symbol>
+    <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 8v.01"/></symbol>
+    <symbol id="i-git" viewBox="0 0 24 24"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="12" r="2.2"/><path d="M6 8.2v7.6M6 8.2c0 4 3 5.8 6 5.8h4"/></symbol>
+  </defs>
+</svg>
+
+<header class="site-header">
+  <div class="nav-inner">
+    <a href="#home" class="brand">
+      <img src="icon.svg" alt="" class="nav-icon">
+      NX9
+    </a>
+    <nav class="nav-links" id="navLinks" aria-label="Primary">
+      <a href="/index.html#home" data-nav="home">Home</a>
+      <a href="/index.html#philosophy" data-nav="philosophy">Philosophy</a>
+      <a href="/index.html#architecture" data-nav="architecture">Architecture</a>
+      <a href="/index.html#projects" data-nav="projects">Projects</a>
+      <a href="/index.html#vision" data-nav="vision">Vision</a>
+      <a href="/index.html#values" data-nav="values">Values</a>
+      <a href="/index.html#roadmap" data-nav="roadmap">Roadmap</a>
+      <a href="case-study.html" target="_blank" class="is-active">Case Study</a>
+    </nav>
+    <div class="nav-right">
+      <button class="theme-toggle" id="themeToggle" aria-label="Toggle color theme">
+        <span id="themeIcon" aria-hidden="true">◐</span><span id="themeLabel">Theme</span>
+      </button>
+      <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="navLinks">
+        <span></span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<main id="main" class="article-page">
+<div class="wrap article-content">
+<h1>NX9 Philosophy: Engineering Beyond Frameworks</h1>
+<h3><em>A real-world case study in software minimalism, explicit routing, and reduced attack surface</em></h3>
+<blockquote>
+<p><strong>"The best way to reduce complexity is not to manage more software—it is to deploy less software."</strong></p>
+</blockquote>
+<hr>
+<h1>Introduction</h1>
+<p>Modern software engineering often begins with a familiar question:</p>
+<blockquote>
+<p><strong>"Which framework should we use?"</strong></p>
+</blockquote>
+<p>NX9 begins with a different question:</p>
+<blockquote>
+<p><strong>"Do we need one at all?"</strong></p>
+</blockquote>
+<p>This is not an argument against frameworks.</p>
+<p>Frameworks have transformed software development and solved some of the most challenging engineering problems ever encountered.</p>
+<p>React revolutionized large-scale user interfaces at Facebook.</p>
+<p>Angular addressed Google's enterprise-scale application requirements.</p>
+<p>Laravel dramatically improved developer productivity for PHP applications.</p>
+<p>Spring Boot simplified enterprise Java development.</p>
+<p>Next.js made sophisticated React applications easier to deploy.</p>
+<p>These are remarkable engineering achievements.</p>
+<p>But they solved <strong>specific engineering problems</strong>.</p>
+<p>The question every project should ask is:</p>
+<blockquote>
+<p><strong>Do we have those same problems?</strong></p>
+</blockquote>
+<p>A personal website, a self-hosted utility, an authentication service, a URL shortener, or an infrastructure component rarely requires thousands of JavaScript packages, multiple runtimes, extensive middleware chains, complex build pipelines, and enormous dependency trees simply to deliver its intended functionality.</p>
+<p>For many projects, complexity becomes the default—not the requirement.</p>
+<p>NX9 deliberately chooses another path.</p>
+<hr>
+<h1>Production Snapshot</h1>
+<p>The observations presented in this article come directly from the production logs of <strong>nx9.in</strong> after its first public deployment.</p>
+<p>They are <strong>not</strong> the result of a penetration test, laboratory simulation, or synthetic benchmark.</p>
+<p>During the observation period:</p>
+<ul>
+<li>Multiple independent vulnerability scanners began probing the server shortly after public exposure.</li>
+<li>Automated requests targeted common framework artifacts, PHP files, WordPress installations, Laravel configuration, Vue projects, Docker deployments, and build-system outputs.</li>
+<li>Every vulnerability probe resulted in <strong><code>404 Not Found</code></strong>.</li>
+<li>Legitimate visitors—including desktop browsers, Android devices, Twitter/X crawlers, search crawlers, and internal users—continued to access the published resources normally.</li>
+</ul>
+<p>These observations provide a useful real-world case study of the NX9 engineering philosophy.</p>
+<hr>
+<h1>Engineering Beyond Frameworks</h1>
+<p>NX9 is founded on a simple engineering principle:</p>
+<blockquote>
+<p><strong>Deploy only the software necessary to solve the problem.</strong></p>
+</blockquote>
+<p>Nothing more.</p>
+<p>Nothing less.</p>
+<p>Every project within the NX9 ecosystem follows the same philosophy:</p>
+<ul>
+<li>Privacy First</li>
+<li>Self-Hosted First</li>
+<li>Linux Native</li>
+<li>Rust Native</li>
+<li>Single Binary Applications</li>
+<li>Explicit Routing</li>
+<li>Minimal Dependencies</li>
+<li>Open Source (FOSS)</li>
+<li>No Vendor Lock-In</li>
+<li>Operational Simplicity</li>
+</ul>
+<p>Frameworks are not avoided because they are "bad."</p>
+<p>They are avoided when they solve problems the application simply does not have.</p>
+<p>Every dependency should justify its existence.</p>
+<p>Every abstraction should earn its maintenance cost.</p>
+<p>Every additional component should provide value greater than the complexity it introduces.</p>
+<hr>
+<h1>Complexity Has a Cost</h1>
+<p>Modern applications are often assembled from enormous dependency trees.</p>
+<p>A simple "Hello World" project may involve:</p>
+<ul>
+<li>thousands of npm packages;</li>
+<li>hundreds of transitive dependencies;</li>
+<li>multiple build tools;</li>
+<li>package managers;</li>
+<li>runtime environments;</li>
+<li>framework-specific tooling;</li>
+<li>automated code generation.</li>
+</ul>
+<p>Each component is individually useful.</p>
+<p>Collectively, they increase operational responsibility.</p>
+<p>Every additional dependency must eventually be:</p>
+<ul>
+<li>installed;</li>
+<li>configured;</li>
+<li>updated;</li>
+<li>audited;</li>
+<li>monitored;</li>
+<li>patched;</li>
+<li>understood.</li>
+</ul>
+<p>NX9 asks a simple engineering question:</p>
+<blockquote>
+<p><strong>Can this problem be solved with significantly less software?</strong></p>
+</blockquote>
+<p>If the answer is yes, simplicity becomes the preferred design.</p>
+<hr>
+<h1>Real-World Validation</h1>
+<p>Shortly after <strong>nx9.in</strong> became publicly accessible, automated scanners began probing the server.</p>
+<p>The requests were not random.</p>
+<p>They were highly characteristic of Internet-wide reconnaissance targeting common deployment technologies.</p>
+<p>Representative examples included:</p>
+<pre><code>/.env
+/vendor/.env
+/wp-admin/
+/wp-content/
+/phpinfo.php
+/vercel.json
+/vite.config.ts
+/vendors~main.bundle.js
+/vue/
+/v1/admin/</code></pre>
+<p>These examples represent many similar probes observed throughout the production logs.</p>
+<p>The scanners were attempting to identify technologies rather than applications.</p>
+<hr>
+<h1>What the Bots Assumed</h1>
+<table><thead><tr><th>Probe</th><th>Likely Assumption</th></tr></thead><tbody>
+<tr><td><code>/.env</code></td><td>Laravel / PHP configuration</td></tr>
+<tr><td><code>/vendor/.env</code></td><td>Composer project</td></tr>
+<tr><td><code>/wp-admin/</code></td><td>WordPress</td></tr>
+<tr><td><code>/wp-content/</code></td><td>WordPress plugins</td></tr>
+<tr><td><code>/phpinfo.php</code></td><td>PHP runtime</td></tr>
+<tr><td><code>vite.config.ts</code></td><td>Vite project</td></tr>
+<tr><td><code>vendors~main.bundle.js</code></td><td>Webpack / React build</td></tr>
+<tr><td><code>vercel.json</code></td><td>Vercel deployment</td></tr>
+<tr><td><code>/vue/.env</code></td><td>Vue project</td></tr>
+<tr><td><code>/v1/admin/</code></td><td>Administrative API</td></tr>
+The production logs demonstrate a simple reality:</p>
+<p><strong>The scanners were not looking for NX9.</strong></p>
+<p>They were looking for technologies that dominate today's web.</p>
+<p>NX9 simply wasn't one of them.</p>
+<hr>
+<h1>What Actually Happened</h1>
+<p>Every probe produced essentially the same result.</p>
+<pre><code>404 Not Found</code></pre>
+<p>Not because NX9 blocked the requests.</p>
+<p>Not because a Web Application Firewall analyzed malicious behaviour.</p>
+<p>Not because an intrusion prevention system intervened.</p>
+<p>The requested resources simply did not exist.</p>
+<p>This distinction is important.</p>
+<p>There is a fundamental difference between software successfully defending itself and software that was never deployed in the first place.</p>
+<hr>
+<h1>Security Begins Before Deployment</h1>
+<p>Security is often associated with firewalls, intrusion detection systems, endpoint protection, and monitoring platforms.</p>
+<p>Those remain valuable.</p>
+<p>However, architecture itself is also a security decision.</p>
+<p>The production deployment contained:</p>
+<ul>
+<li>no PHP interpreter;</li>
+<li>no WordPress;</li>
+<li>no Laravel;</li>
+<li>no Composer vendor directory;</li>
+<li>no Node.js runtime;</li>
+<li>no exposed <code>.env</code> files;</li>
+<li>no framework-generated administration interfaces;</li>
+<li>no debug endpoints;</li>
+<li>no unnecessary middleware.</li>
+</ul>
+<p>Those components were never installed.</p>
+<p>Consequently, they were never available for attackers to discover.</p>
+<p>This is not security through obscurity.</p>
+<p>It is <strong>security through intentional software selection.</strong></p>
+<hr>
+<h1>Explicit Routing</h1>
+<p>One of the defining characteristics of NX9 applications is explicit routing.</p>
+<p>Only routes intentionally defined by the developer exist.</p>
+<p>Conceptually:</p>
+<svg width="100%" height="220" viewBox="0 0 250 220" xmlns="http://www.w3.org/2000/svg" style="max-width: 250px; margin: 1.5rem 0;"><text x="20" y="25" font-family="var(--font-mono)" font-size="14" font-weight="700" fill="var(--accent)">/</text><line x1="24" y1="30" x2="24" y2="60" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="60" x2="50" y2="60" stroke="var(--border-strong)" stroke-width="2" /><text x="60" y="65" font-family="var(--font-mono)" font-size="14" font-weight="600" fill="var(--text)">/projects</text><line x1="24" y1="60" x2="24" y2="80" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="70" x2="24" y2="100" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="100" x2="50" y2="100" stroke="var(--border-strong)" stroke-width="2" /><text x="60" y="105" font-family="var(--font-mono)" font-size="14" font-weight="600" fill="var(--text)">/about</text><line x1="24" y1="100" x2="24" y2="120" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="110" x2="24" y2="140" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="140" x2="50" y2="140" stroke="var(--border-strong)" stroke-width="2" /><text x="60" y="145" font-family="var(--font-mono)" font-size="14" font-weight="600" fill="var(--text)">/contact</text><line x1="24" y1="140" x2="24" y2="160" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="150" x2="24" y2="180" stroke="var(--border-strong)" stroke-width="2" /><line x1="24" y1="180" x2="50" y2="180" stroke="var(--border-strong)" stroke-width="2" /><text x="60" y="185" font-family="var(--font-mono)" font-size="14" font-weight="600" fill="var(--text)">404 (Fallback)</text></svg>
+<p>There is no directory discovery.</p>
+<p>There is no automatic controller resolution.</p>
+<p>There is no runtime searching for matching files.</p>
+<p>If a route was never implemented, it simply cannot be reached.</p>
+<p>Unknown URLs immediately terminate at the application's fallback handler.</p>
+<hr>
+<h1>A Smaller Stack</h1>
+<p>Many modern web applications resemble:</p>
+<svg width="100%" height="476" viewBox="0 0 260 476" xmlns="http://www.w3.org/2000/svg" style="max-width: 300px; margin: 1.5rem 0;">
+    <defs>
+      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
+      </marker>
+    </defs>
+    <rect x="20.0" y="10" width="220" height="36" rx="18" fill="var(--bg-raised)" stroke="var(--border-strong)" stroke-width="1.5" /><text x="130.0" y="32.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Internet</text><line x1="130.0" y1="46" x2="130.0" y2="66" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="70" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="92.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Reverse Proxy</text><line x1="130.0" y1="106" x2="130.0" y2="126" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="130" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="152.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Runtime</text><line x1="130.0" y1="166" x2="130.0" y2="186" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="190" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="212.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Framework</text><line x1="130.0" y1="226" x2="130.0" y2="246" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="250" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="272.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Middleware</text><line x1="130.0" y1="286" x2="130.0" y2="306" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="310" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="332.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Plugins</text><line x1="130.0" y1="346" x2="130.0" y2="366" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="370" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="392.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Packages</text><line x1="130.0" y1="406" x2="130.0" y2="426" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="430" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="452.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Application</text></svg>
+<p>NX9 deliberately reduces the stack.</p>
+<svg width="100%" height="296" viewBox="0 0 260 296" xmlns="http://www.w3.org/2000/svg" style="max-width: 300px; margin: 1.5rem 0;">
+    <defs>
+      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
+      </marker>
+    </defs>
+    <rect x="20.0" y="10" width="220" height="36" rx="18" fill="var(--bg-raised)" stroke="var(--border-strong)" stroke-width="1.5" /><text x="130.0" y="32.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Internet</text><line x1="130.0" y1="46" x2="130.0" y2="66" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="70" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="92.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Nginx</text><line x1="130.0" y1="106" x2="130.0" y2="126" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="130" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="152.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Rust Binary</text><line x1="130.0" y1="166" x2="130.0" y2="186" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="190" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="212.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Explicit Route Table</text><line x1="130.0" y1="226" x2="130.0" y2="246" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="250" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="272.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Application Logic</text></svg>
+<p>The objective is not minimalism for its own sake.</p>
+<p>The objective is proportional engineering.</p>
+<hr>
+<h1>Why NX9 Chose This Path</h1>
+<p>The previous comparison is not intended to suggest that one architecture is universally superior.</p>
+<p>Frameworks remain exceptional engineering tools.</p>
+<p>React solved Facebook's problems.</p>
+<p>Angular solved Google's.</p>
+<p>Laravel dramatically improved PHP development.</p>
+<p>Spring Boot transformed enterprise Java.</p>
+<p>Those achievements deserve recognition.</p>
+<p>NX9 simply asks a different question:</p>
+<blockquote>
+<p><strong>Does this framework solve <em>our</em> problem?</strong></p>
+</blockquote>
+<p>If the answer is yes, use it.</p>
+<p>If the answer is no, adding it merely increases long-term complexity.</p>
+<p>Engineering is not about choosing the most popular technology.</p>
+<p>It is about choosing the most appropriate one.</p>
+<hr>
+<h1>The Production Logs Tell a Story</h1>
+<p>The production logs describe a remarkably ordinary day on the public Internet.</p>
+<svg width="100%" height="356" viewBox="0 0 260 356" xmlns="http://www.w3.org/2000/svg" style="max-width: 300px; margin: 1.5rem 0;">
+    <defs>
+      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--accent)" />
+      </marker>
+    </defs>
+    <rect x="20.0" y="10" width="220" height="36" rx="18" fill="var(--bg-raised)" stroke="var(--border-strong)" stroke-width="1.5" /><text x="130.0" y="32.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Public deployment</text><line x1="130.0" y1="46" x2="130.0" y2="66" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="70" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="92.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Automated vulnerability scanners</text><line x1="130.0" y1="106" x2="130.0" y2="126" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="130" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="152.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Search engine and social crawlers</text><line x1="130.0" y1="166" x2="130.0" y2="186" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="190" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="212.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Twitter/X preview generation</text><line x1="130.0" y1="226" x2="130.0" y2="246" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="250" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="272.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Real desktop and mobile visitors</text><line x1="130.0" y1="286" x2="130.0" y2="306" stroke="var(--accent)" stroke-width="2" marker-end="url(#arrow)" /><rect x="20.0" y="310" width="220" height="36" rx="6" fill="var(--surface)" stroke="var(--border)" stroke-width="1" /><text x="130.0" y="332.0" font-family="var(--font-ui)" font-size="13" font-weight="600" fill="var(--text)" text-anchor="middle">Additional vulnerability scanners</text></svg>
+<p>The site remained fully functional for legitimate users while automated scanners repeatedly searched for technologies that simply were not present.</p>
+<hr>
+<h1>Less Software Means Less Responsibility</h1>
+<p>Every dependency becomes another responsibility.</p>
+<p>Someone must:</p>
+<ul>
+<li>update it;</li>
+<li>audit it;</li>
+<li>patch it;</li>
+<li>monitor it;</li>
+<li>understand it.</li>
+</ul>
+<p>Every framework introduces conventions.</p>
+<p>Every plugin introduces assumptions.</p>
+<p>Every runtime introduces operational complexity.</p>
+<p>None of these are inherently negative.</p>
+<p>They are engineering trade-offs.</p>
+<p>NX9 deliberately chooses different trade-offs.</p>
+<p>Smaller deployments.</p>
+<p>Fewer dependencies.</p>
+<p>Explicit behaviour.</p>
+<p>Simpler operations.</p>
+<hr>
+<h1>Non-Goals</h1>
+<p>NX9 does <strong>not</strong> attempt to:</p>
+<ul>
+<li>replace every web framework;</li>
+<li>eliminate JavaScript;</li>
+<li>discourage modern development practices;</li>
+<li>claim that Rust is immune to vulnerabilities;</li>
+<li>promote security through obscurity.</li>
+</ul>
+<p>NX9 simply argues that software should be proportional to the problem being solved.</p>
+<hr>
+<h1>Conclusion</h1>
+<p>This philosophy extends beyond a single website.</p>
+<p>Every NX9 project—whether it is a URL shortener, an authentication service, a digital timestamping platform, or future infrastructure components—begins with the same engineering question:</p>
+<blockquote>
+<p><strong>What is the smallest amount of software required to solve this problem well?</strong></p>
+</blockquote>
+<p>The answer will not always be the same.</p>
+<p>Some problems genuinely require sophisticated frameworks.</p>
+<p>Many do not.</p>
+<p>NX9 exists to explore that second category.</p>
+<p>Not because minimalism is fashionable.</p>
+<p>Not because frameworks are flawed.</p>
+<p>But because simplicity remains one of the most effective engineering tools available.</p>
+<p>The production logs provide a practical demonstration of this philosophy.</p>
+<p>The Internet searched for PHP.</p>
+<p>It searched for WordPress.</p>
+<p>It searched for Laravel.</p>
+<p>It searched for Vue.</p>
+<p>It searched for Node.js deployment artifacts.</p>
+<p>It searched for technologies that have become commonplace.</p>
+<p>What it found instead was a deliberately minimal Rust application exposing only the functionality it was designed to provide.</p>
+<p>That outcome was not accidental.</p>
+<p>It was the result of an engineering decision made long before the first HTTP request reached the server.</p>
+<p><strong>Build only what you need.</strong></p>
+<p><strong>Deploy only what you trust.</strong></p>
+<p><strong>Maintain only what you own.</strong></p>
+<p>Because every component you choose <strong>not</strong> to deploy is one less component to configure, patch, monitor, audit—and one less component available to be targeted.</p>
+<p><strong>That is the NX9 philosophy.</strong></p></tbody></table>
+</div>
+</main>
+
+<footer class="site-footer">
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="logo.svg" alt="NX9 Logo" class="footer-logo">
+        <div class="sub">Next Generation 9</div>
+      </div>
+      <p class="footer-motto">Software people can own,<br>understand,<br>and control.<br><br><strong>Always Free. Always Open. Always Yours.</strong></p>
+      <nav class="footer-links" aria-label="Repository links">
+        <a href="https://codeberg.org/thakares" target="_blank" rel="noopener noreferrer"><svg class="icon" style="width:16px;height:16px"><use href="#i-git"/></svg> Codeberg</a>
+        <a href="https://github.com/thakares?tab=repositories" target="_blank" rel="noopener noreferrer"><svg class="icon" style="width:16px;height:16px"><use href="#i-link"/></svg> GitHub</a>
+      </nav>
+    </div>
+    <div class="footer-bottom">© <span id="year"></span> NX9 — an open-source ecosystem by Sunil Thakare. MIT / Apache-2.0.</div>
+  </div>
+</footer>
+
+<script>
+(function () {
+  "use strict";
+
+  /* ============================================================
+     THEME
+     ============================================================ */
+  const root = document.documentElement;
+  const themeToggle = document.getElementById("themeToggle");
+  const themeIcon = document.getElementById("themeIcon");
+  const themeLabel = document.getElementById("themeLabel");
+  const STORAGE_KEY = "nx9-theme";
+
+  function applyTheme(theme) {
+    root.setAttribute("data-theme", theme);
+    themeIcon.textContent = theme === "dark" ? "●" : "○";
+    themeLabel.textContent = theme === "dark" ? "Dark" : "Light";
+    themeToggle.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
+  }
+
+  function initTheme() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") { applyTheme(stored); return; }
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    applyTheme(prefersDark ? "dark" : "light");
+  }
+
+  themeToggle.addEventListener("click", function () {
+    const current = root.getAttribute("data-theme");
+    const next = current === "dark" ? "light" : "dark";
+    applyTheme(next);
+    localStorage.setItem(STORAGE_KEY, next);
+  });
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) {
+    if (!localStorage.getItem(STORAGE_KEY)) applyTheme(e.matches ? "dark" : "light");
+  });
+
+  initTheme();
+
+  /* ============================================================
+     MOBILE NAV
+     ============================================================ */
+  const hamburger = document.getElementById("hamburger");
+  const navLinks = document.getElementById("navLinks");
+
+  hamburger.addEventListener("click", function () {
+    const isOpen = navLinks.classList.toggle("is-open");
+    hamburger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  });
+
+  navLinks.querySelectorAll("a").forEach(function (link) {
+    link.addEventListener("click", function () {
+      navLinks.classList.remove("is-open");
+      hamburger.setAttribute("aria-expanded", "false");
+    });
+  });
+
+  /* ============================================================
+     ICON HELPER
+     ============================================================ */
+  function iconSvg(id) {
+    return '<svg class="icon"><use href="#' + id + '"/></svg>';
+  }
+
+  /* ============================================================
+     DATA: DESIGN PHILOSOPHY
+     ============================================================ */
+  const philosophy = [
+    { icon: "i-key", grad: 1, glow: "--glow-1", title: "Operator Ownership", body: "The operator owns the binaries, the configuration, the databases, the backups, and the encryption keys. No service depends on proprietary APIs or cloud-hosted control planes." },
+    { icon: "i-server", grad: 6, glow: "--glow-6", title: "Self-Hosting First", body: "Every decision begins with one question: \u201cCan this be deployed and operated by a single administrator?\u201d If it needs Kubernetes or a managed database, the design is reconsidered." },
+    { icon: "i-gauge", grad: 3, glow: "--glow-3", title: "Simplicity Over Complexity", body: "One binary. One configuration. One SQLite database. One administrator. Simple systems are easier to understand, secure, and recover." },
+    { icon: "i-lock", grad: 4, glow: "--glow-4", title: "Privacy by Default", body: "Applications never assume cloud connectivity, analytics collection, telemetry uploads, or third-party tracking. Users decide what information leaves their infrastructure." },
+    { icon: "i-shield-check", grad: 5, glow: "--glow-5", title: "Security by Design", body: "Argon2id, Ed25519, BLAKE3, RBAC, CSRF protection, and audit logs are embedded throughout the stack \u2014 not added later." },
+    { icon: "i-wrench", grad: 2, glow: "--glow-2", title: "Operational Excellence", body: "Diagnostics, backups, restore procedures, migration tools, CLI administration, and documentation, in every project, from day one." },
+    { icon: "i-clock", grad: 7, glow: "--glow-7", title: "Long-Term Stability", body: "NX9 intentionally avoids dependency churn. The goal is software that remains understandable and maintainable years into the future." },
+    { icon: "i-git", grad: 4, glow: "--glow-4", title: "Open Source First", body: "Every NX9 codebase is 100% open source under permissive licenses. You have the fundamental right to inspect, build, and modify the software." },
+    { icon: "i-infinity", grad: 5, glow: "--glow-5", title: "Zero Vendor Lock-In", body: "All data is stored in standard SQLite files, configurations are plain text, and architectures strictly avoid proprietary integrations." }
+  ];
+
+  const philosophyGrid = document.getElementById("philosophyGrid");
+  philosophy.forEach(function (p) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + p.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + p.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(p.icon) + '</div>' +
+      '<h3>' + p.title + '</h3>' +
+      '<p>' + p.body + '</p>';
+    philosophyGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: ARCHITECTURAL PILLARS
+     ============================================================ */
+  const architecture = [
+    { icon: "i-cpu", grad: 1, glow: "--glow-1", title: "Pure Rust", body: "Memory safety, zero-cost abstractions, and fearless concurrency. Rust 2021 Edition, release-mode optimization, no runtime interpreter.", tag: "~10\u201312 MB per binary" },
+    { icon: "i-box", grad: 6, glow: "--glow-6", title: "Single Binary Deployment", body: "One executable contains the HTTP server, business logic, auth, migrations, CLI, and templates. No JVM, no Node.js, no Python, no app server.", tag: "cargo build --release" },
+    { icon: "i-database", grad: 5, glow: "--glow-5", title: "SQLite First", body: "ACID transactions, WAL concurrency, zero administration, and portable files. Several projects isolate data across multiple databases for tenant isolation.", tag: "users.db \u00b7 system.db \u00b7 content.db" },
+    { icon: "i-bolt", grad: 3, glow: "--glow-3", title: "Tokio Async Runtime", body: "Asynchronous I/O and lightweight tasks power web servers, DNS resolution, and background workers with high concurrency.", tag: "async / await" },
+    { icon: "i-route", grad: 4, glow: "--glow-4", title: "Axum Web Layer", body: "Routing, middleware, REST APIs, HTML rendering, authentication, and sessions \u2014 integrated naturally with Tokio and Rust's type system.", tag: "HTTP \u00b7 middleware \u00b7 sessions" },
+    { icon: "i-layers", grad: 2, glow: "--glow-2", title: "Layered Architecture", body: "auth / cli / db / handlers / jobs / services / templates / utils / web \u2014 each layer owns one responsibility, for easier testing and lower coupling.", tag: "src/ layout" },
+    { icon: "i-terminal", grad: 7, glow: "--glow-7", title: "CLI-First Operations", body: "serve \u00b7 doctor \u00b7 backup \u00b7 restore \u00b7 migrate \u00b7 create-admin \u00b7 init \u2014 every service is administrable headless, over SSH, from a script.", tag: "automation-friendly" },
+    { icon: "i-shield", grad: 1, glow: "--glow-1", title: "Security Stack", body: "Argon2id password hashing, Ed25519 signatures, BLAKE3 hashing, CSRF protection, RBAC, and hardened compiler flags \u2014 RELRO, PIE, least privilege.", tag: "defense in depth" },
+    { icon: "i-monitor", grad: 6, glow: "--glow-6", title: "Operational Tooling", body: "Health checks, migration verification, automatic backups, restore tools, Docker support, systemd units, and structured logging, out of the box.", tag: "diagnostics \u00b7 systemd \u00b7 docker" }
+  ];
+
+  const architectureGrid = document.getElementById("architectureGrid");
+  architecture.forEach(function (a) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + a.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + a.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(a.icon) + '</div>' +
+      '<h3>' + a.title + '</h3>' +
+      '<p>' + a.body + '</p>' +
+      '<span class="card-tag">' + a.tag + '</span>';
+    architectureGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: SECURITY
+     ============================================================ */
+  const security = [
+    { icon: "i-shield-check", grad: 4, glow: "--glow-4", title: "Argon2id Hashing", body: "Memory-hard, CPU-hard password hashing by default for all user credentials." },
+    { icon: "i-key", grad: 1, glow: "--glow-1", title: "Ed25519 Signatures", body: "Fast, secure public-key cryptography for tokens and inter-service authentication." },
+    { icon: "i-lock", grad: 6, glow: "--glow-6", title: "Strict RBAC", body: "Role-Based Access Control enforced at the middleware layer before business logic executes." },
+    { icon: "i-shield", grad: 5, glow: "--glow-5", title: "CSRF & Security Headers", body: "Double-submit cookies, strict transport security, and hardened Content Security Policies built-in." }
+  ];
+  const securityGrid = document.getElementById("securityGrid");
+  security.forEach(function (s) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + s.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + s.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(s.icon) + '</div>' +
+      '<h3>' + s.title + '</h3>' +
+      '<p>' + s.body + '</p>';
+    securityGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: POSITIONING
+     ============================================================ */
+  const positioningBody = document.getElementById("positioningBody");
+  const posData = [
+    { bad: "Requires Kubernetes & Helm", good: "Deployed via a single binary or systemd" },
+    { bad: "Hidden telemetry and usage analytics", good: "Zero tracking, completely air-gapped capable" },
+    { bad: "1GB+ RAM for a 'Hello World' microservice", good: "10-20MB RAM for a high-traffic production service" },
+    { bad: "Forced cloud subscriptions", good: "Your hardware, your data, your rules" },
+    { bad: "Complex web of dependencies", good: "Static binaries with SQLite built-in" }
+  ];
+  posData.forEach(p => {
+    positioningBody.innerHTML += `<tr><td>${p.bad}</td><td>${p.good}</td></tr>`;
+  });
+
+  /* ============================================================
+     DATA: PROJECTS
+     ============================================================ */
+  const projectGrid = document.getElementById("projectGrid");
+  const projects = [
+    { 
+      title: "nx9-url-shortener", 
+      desc: "A lightweight, self-hosted URL management platform. Combines URL shortening, analytics, QR codes, password protection, and API automation with zero external dependencies.", 
+      status: "STABLE", 
+      icon: "i-link", 
+      tech: ["Rust", "SQLite", "Axum", "Askama"],
+      grad: 2, glow: "--glow-2",
+      link: "https://codeberg.org/thakares/nx9-url-shortener",
+      github: "https://github.com/thakares/nx9-url-shortener"
+    },
+    { 
+      title: "nx9-auth", 
+      desc: "Identity and Access Management (IAM) service. Provides authentication, authorization, session management, and RBAC in a single incredibly fast deployable binary.", 
+      status: "BETA", 
+      icon: "i-lock", 
+      tech: ["Rust", "SQLite", "Security"],
+      grad: 4, glow: "--glow-4",
+      link: "https://codeberg.org/thakares/nx9-auth",
+      github: "https://github.com/thakares/nx9-auth"
+    },
+    { 
+      title: "nx9-dns-server", 
+      desc: "High-performance, fully RFC-compliant authoritative DNS server leveraging modern async networking and a robust SQLite backend.", 
+      status: "ALPHA", 
+      icon: "i-globe", 
+      tech: ["Rust", "DNS", "Async"],
+      grad: 6, glow: "--glow-6",
+      link: "https://codeberg.org/thakares/nx9-dns-server",
+      github: "https://github.com/thakares/nx9-dns-server"
+    },
+    { 
+      title: "nx9-chronoseal-rs", 
+      desc: "Privacy-first browser attestation framework for anti-bot and anti-AI scraping. Uses Ed25519 heartbeat chains and WASM attestation without tracking users.", 
+      status: "STABLE", 
+      icon: "i-shield", 
+      tech: ["Rust", "WASM", "Ed25519"],
+      grad: 5, glow: "--glow-5",
+      link: "https://codeberg.org/thakares/nx9-chronoseal-rs",
+      github: "https://github.com/thakares/nx9-chronoseal-rs"
+    }
+  ];
+  projects.forEach(p => {
+    projectGrid.innerHTML += `
+      <div class="project-card reveal" style="--card-grad: var(--grad-${p.grad}); --card-glow: var(${p.glow})">
+        <div class="project-card-head">
+          <div class="project-title">
+            <div class="icon-badge">${iconSvg(p.icon)}</div>
+            <h3>${p.title}</h3>
+          </div>
+          <span class="status-badge" style="background: var(--grad-${p.grad === 5 ? 5 : p.grad === 4 ? 4 : p.grad === 6 ? 6 : 2})">${p.status}</span>
+        </div>
+        <p class="desc">${p.desc}</p>
+        <div class="tech-badges">
+          ${p.tech.map(t => `<span class="tech-badge" style="background: var(--grad-${p.grad})">${t}</span>`).join("")}
+        </div>
+        <div class="project-links">
+          <a href="${p.link}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline"><svg class="icon" style="width:14px;height:14px"><use href="#i-git"/></svg> Codeberg</a>
+          <a href="${p.github}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline"><svg class="icon" style="width:14px;height:14px"><use href="#i-link"/></svg> GitHub</a>
+        </div>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: STATS
+     ============================================================ */
+  const statsGrid = document.getElementById("statsGrid");
+  const stats = [
+    { num: "0", label: "External Dependencies", grad: 1 },
+    { num: "1", label: "Binary to Deploy", grad: 6 },
+    { num: "9", label: "Core Projects", grad: 4 },
+    { num: "<15MB", label: "RAM per Service", grad: 5 }
+  ];
+  stats.forEach(s => {
+    statsGrid.innerHTML += `
+      <div class="stat reveal" style="--card-grad: var(--grad-${s.grad})">
+        <span class="num">${s.num}</span>
+        <span class="label">${s.label}</span>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: VALUES
+     ============================================================ */
+  const valueGrid = document.getElementById("valueGrid");
+  const values = [
+    { num: "01", text: "User Ownership", grad: 1, glow: "--glow-1" },
+    { num: "02", text: "Absolute Privacy", grad: 2, glow: "--glow-2" },
+    { num: "03", text: "Open Source", grad: 3, glow: "--glow-3" },
+    { num: "04", text: "Simplicity First", grad: 4, glow: "--glow-4" },
+    { num: "05", text: "CLI Automation", grad: 5, glow: "--glow-5" },
+    { num: "06", text: "Open Standards", grad: 6, glow: "--glow-6" },
+    { num: "07", text: "Long-term Stability", grad: 7, glow: "--glow-7" },
+    { num: "08", text: "Linux Native", grad: 1, glow: "--glow-1" },
+    { num: "09", text: "Zero Tracking", grad: 2, glow: "--glow-2" },
+    { num: "10", text: "No Vendor Lock", grad: 3, glow: "--glow-3" },
+    { num: "11", text: "Performant", grad: 4, glow: "--glow-4" },
+    { num: "12", text: "Understandable", grad: 5, glow: "--glow-5" }
+  ];
+  values.forEach(v => {
+    valueGrid.innerHTML += `
+      <div class="value-chip reveal" style="--card-grad: var(--grad-${v.grad}); --card-glow: var(${v.glow})">
+        <span class="n">${v.num}</span>
+        <span class="t">${v.text}</span>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: ROADMAP
+     ============================================================ */
+  const circuit = document.getElementById("circuit");
+  const roadmap = [
+    { num: "01", name: "ChronoSeal", state: "STABLE", active: true },
+    { num: "02", name: "DNS Server", state: "ALPHA", active: true },
+    { num: "03", name: "Auth", state: "BETA", active: true },
+    { num: "04", name: "URL Shortener", state: "STABLE", active: true },
+    { num: "05", name: "Project 5", state: "PLANNED", active: false },
+    { num: "06", name: "Project 6", state: "PLANNED", active: false },
+    { num: "07", name: "Project 7", state: "PLANNED", active: false },
+    { num: "08", name: "Project 8", state: "PLANNED", active: false },
+    { num: "09", name: "Project 9", state: "PLANNED", active: false }
+  ];
+  roadmap.forEach(r => {
+    circuit.innerHTML += `
+      <div class="node ${r.active ? 'is-active' : ''} reveal">
+        <div class="pad">${r.num}</div>
+        <div class="text">
+          <div class="name">${r.name}</div>
+          <div class="state">${r.state}</div>
+        </div>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     REVEAL ANIMATIONS
+     ============================================================ */
+  const observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 0.1
+  };
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("is-visible");
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  document.querySelectorAll(".reveal").forEach(el => observer.observe(el));
+  
+  // Set copyright year
+  document.getElementById("year").textContent = new Date().getFullYear();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/www/docker-compose.yaml b/www/docker-compose.yaml
new file mode 100644
index 0000000..ac063fe
--- /dev/null
+++ b/www/docker-compose.yaml
@@ -0,0 +1,47 @@
+name: nx9-www
+services:
+  nx9-www:
+    cpu_shares: 90
+    command: []
+    container_name: nx9-www
+    deploy:
+      resources:
+        limits:
+          memory: 31940M
+    hostname: nx9-www-www
+    image: nginx:alpine
+    labels:
+      icon: https://github.com/thakares/nx9-www-rs/raw/main/logo/nx9-www.svg
+    ports:
+      - mode: ingress
+        target: 80
+        published: "8484"
+        protocol: tcp
+    restart: unless-stopped
+    volumes:
+      - type: bind
+        source: /DATA/AppData/nx9-www
+        target: /usr/share/nginx/html
+        read_only: true
+        bind:
+          create_host_path: true
+    devices: []
+    cap_add: []
+    environment: []
+    networks:
+      - default
+    privileged: false
+networks:
+  default:
+    name: nx9-www_default
+x-casaos:
+  author: self
+  category: self
+  hostname: ""
+  icon: https://github.com/thakares/nx9-www-rs/raw/main/logo/nx9-www.svg
+  index: /
+  is_uncontrolled: false
+  port_map: "8484"
+  scheme: http
+  title:
+    custom: nx9-www
diff --git a/www/favicon-16x16.png b/www/favicon-16x16.png
new file mode 100644
index 0000000..dfedb7b
Binary files /dev/null and b/www/favicon-16x16.png differ
diff --git a/www/favicon-32x32.png b/www/favicon-32x32.png
new file mode 100644
index 0000000..53476c8
Binary files /dev/null and b/www/favicon-32x32.png differ
diff --git a/www/favicon-96x96.png b/www/favicon-96x96.png
new file mode 100644
index 0000000..6cba788
Binary files /dev/null and b/www/favicon-96x96.png differ
diff --git a/www/favicon.ico b/www/favicon.ico
new file mode 100644
index 0000000..d33b52c
Binary files /dev/null and b/www/favicon.ico differ
diff --git a/www/icon.svg b/www/icon.svg
new file mode 100644
index 0000000..79460be
--- /dev/null
+++ b/www/icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="150 200 280 196" width="100%" height="100%">
+  <g fill="#ffffff">
+    <rect x="150" y="200" width="280" height="48" rx="24"/>
+    <rect x="150" y="260" width="280" height="48" rx="24"/>
+    <rect x="150" y="320" width="280" height="48" rx="24"/>
+    <rect x="278" y="368" width="24" height="18"/>
+    <rect x="235" y="386" width="110" height="12"/>
+    <rect x="150" y="388" width="73" height="8"/>
+    <rect x="357" y="388" width="73" height="8"/>
+  </g>
+  <g fill="#020617"> <!-- Very dark slate to match theme backgrounds -->
+    <circle cx="400" cy="224" r="8"/>
+    <circle cx="400" cy="284" r="8"/>
+    <circle cx="400" cy="344" r="8"/>
+  </g>
+</svg>
diff --git a/www/index.html b/www/index.html
new file mode 100644
index 0000000..aef865a
--- /dev/null
+++ b/www/index.html
@@ -0,0 +1,1068 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>NX9 — Next Generation 9 | Software people can own, understand, and control</title>
+<meta name="description" content="NX9 is a philosophy-driven ecosystem of self-hosted, privacy-first Rust software by Sunil Thakare. No telemetry. No vendor lock-in. Software people can own, understand, and control.">
+<meta name="color-scheme" content="light dark">
+
+<!-- Favicons & App Icons -->
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/manifest.json">
+<meta name="msapplication-TileColor" content="#020617">
+<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+<meta name="theme-color" content="#020617">
+
+<style>
+/* ============================================================
+   1. DESIGN TOKENS
+   ============================================================ */
+:root {
+  --bg: #ffffff;
+  --bg-raised: #ffffff;
+  --surface: #f5f6f9;
+  --surface-hover: #ecefF4;
+  --border: #e1e4ea;
+  --border-strong: #cbd0da;
+  --text: #12151a;
+  --text-secondary: #4b5563;
+  --text-muted: #6b7280;
+  --accent: #6d5df6;
+  --accent-strong: #5643e0;
+  --accent-soft: #eeecff;
+  --accent-contrast: #ffffff;
+  --dot: rgba(109, 93, 246, 0.14);
+  --line: rgba(109, 93, 246, 0.08);
+  --shadow: 0 1px 2px rgba(16, 20, 26, 0.04), 0 4px 16px rgba(16, 20, 26, 0.05);
+  --shadow-hover: 0 4px 10px rgba(109, 93, 246, 0.12), 0 16px 36px rgba(16, 20, 26, 0.1);
+  --radius: 10px;
+  --radius-sm: 6px;
+  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  --content-max: 1180px;
+  --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
+
+  /* Gradient palette — reused across icons, borders and glow shadows */
+  --grad-1: linear-gradient(135deg, #7c5cf9, #b18bfa);
+  --grad-2: linear-gradient(135deg, #06b6d4, #5eead4);
+  --grad-3: linear-gradient(135deg, #f59e0b, #fb923c);
+  --grad-4: linear-gradient(135deg, #ec4899, #fb7185);
+  --grad-5: linear-gradient(135deg, #10b981, #6ee7b7);
+  --grad-6: linear-gradient(135deg, #3b82f6, #7dd3fc);
+  --grad-7: linear-gradient(135deg, #ef4444, #f97316);
+  --glow-1: rgba(124, 92, 249, .35);
+  --glow-2: rgba(6, 182, 212, .35);
+  --glow-3: rgba(245, 158, 11, .35);
+  --glow-4: rgba(236, 72, 153, .35);
+  --glow-5: rgba(16, 185, 129, .35);
+  --glow-6: rgba(59, 130, 246, .35);
+  --glow-7: rgba(239, 68, 68, .35);
+}
+
+html[data-theme="dark"] {
+  --bg: #0a0c10;
+  --bg-raised: #12151b;
+  --surface: #161a21;
+  --surface-hover: #1d222b;
+  --border: #262c37;
+  --border-strong: #363e4b;
+  --text: #eceef2;
+  --text-secondary: #a7aec0;
+  --text-muted: #7c8497;
+  --accent: #9d8bff;
+  --accent-strong: #b6a7ff;
+  --accent-soft: #1c1a33;
+  --accent-contrast: #0a0c10;
+  --dot: rgba(157, 139, 255, 0.16);
+  --line: rgba(157, 139, 255, 0.08);
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.4);
+  --shadow-hover: 0 4px 14px rgba(157, 139, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45);
+}
+
+/* ============================================================
+   2. RESET & BASE
+   ============================================================ */
+*, *::before, *::after { box-sizing: border-box; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-ui);
+  background-color: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  transition: var(--transition-theme);
+  background-image:
+    linear-gradient(var(--line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--line) 1px, transparent 1px),
+    radial-gradient(var(--dot) 1px, transparent 1px);
+  background-size: 64px 64px, 64px 64px, 16px 16px;
+  background-position: -1px -1px, -1px -1px, -1px -1px;
+}
+
+/* Logo Theme Dynamic Filter */
+html[data-theme="light"] .nav-icon,
+html[data-theme="light"] .hero-logo,
+html[data-theme="light"] .footer-logo {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+img { max-width: 100%; display: block; }
+a { color: inherit; }
+ul { list-style: none; margin: 0; padding: 0; }
+h1, h2, h3, h4, p { margin: 0; }
+button { font-family: inherit; }
+table { border-collapse: collapse; width: 100%; }
+
+::selection { background: var(--accent); color: var(--accent-contrast); }
+
+a:focus-visible, button:focus-visible, summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+.skip-link {
+  position: absolute; left: 1rem; top: -100px;
+  background: var(--accent); color: var(--accent-contrast);
+  padding: 0.65rem 1.1rem; border-radius: var(--radius-sm);
+  font-size: 0.9rem; font-weight: 600; z-index: 200;
+  transition: top 0.2s ease;
+}
+.skip-link:focus { top: 1rem; }
+
+/* Hidden icon sprite sheet */
+.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
+
+.icon {
+  width: 20px; height: 20px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+.icon-badge {
+  width: 46px; height: 46px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: #fff;
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow);
+}
+.icon-badge .icon { width: 24px; height: 24px; }
+
+/* Gradient utility classes */
+.grad-1 { background: var(--grad-1); }
+.grad-2 { background: var(--grad-2); }
+.grad-3 { background: var(--grad-3); }
+.grad-4 { background: var(--grad-4); }
+.grad-5 { background: var(--grad-5); }
+.grad-6 { background: var(--grad-6); }
+.grad-7 { background: var(--grad-7); }
+
+/* ============================================================
+   3. LAYOUT PRIMITIVES
+   ============================================================ */
+.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: 1.5rem; }
+section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
+.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  font-family: var(--font-mono); font-size: 0.75rem;
+  letter-spacing: 0.14em; text-transform: uppercase;
+  background: linear-gradient(90deg, var(--accent), #ec4899);
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  margin-bottom: 0.75rem; font-weight: 700;
+}
+.section-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
+.section-sub { color: var(--text-secondary); font-size: 1.05rem; max-width: 65ch; }
+
+/* ============================================================
+   4. NAVIGATION
+   ============================================================ */
+.site-header {
+  position: sticky; top: 0; z-index: 100;
+  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: saturate(160%) blur(10px);
+  -webkit-backdrop-filter: saturate(160%) blur(10px);
+  border-bottom: 1px solid var(--border);
+  transition: var(--transition-theme);
+}
+.nav-inner {
+  max-width: var(--content-max); margin-inline: auto; padding: 0.85rem 1.5rem;
+  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
+}
+.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; text-decoration: none; }
+.nav-icon { height: 26px; width: auto; }
+.nav-links { display: flex; align-items: center; gap: 0.15rem; }
+.nav-links a {
+  text-decoration: none; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary);
+  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.nav-links a:hover { color: var(--text); background-color: var(--surface); }
+.nav-links a.is-active { color: var(--accent); }
+.nav-right { display: flex; align-items: center; gap: 0.5rem; }
+
+.theme-toggle {
+  display: inline-flex; align-items: center; gap: 0.4rem;
+  background: var(--surface); border: 1px solid var(--border); color: var(--text);
+  border-radius: var(--radius); padding: 0.45rem 0.7rem; font-size: 0.82rem;
+  font-family: var(--font-mono); cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+.theme-toggle:hover { background: var(--surface-hover); border-color: var(--border-strong); }
+
+.hamburger {
+  display: none; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
+  width: 40px; height: 40px; cursor: pointer; color: var(--text);
+  align-items: center; justify-content: center;
+}
+.hamburger span, .hamburger span::before, .hamburger span::after {
+  content: ""; display: block; width: 18px; height: 2px; background: currentColor; position: relative;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.hamburger span::before { position: absolute; top: -6px; }
+.hamburger span::after { position: absolute; top: 6px; }
+.hamburger[aria-expanded="true"] span { background: transparent; }
+.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
+.hamburger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
+
+@media (max-width: 860px) {
+  .hamburger { display: inline-flex; }
+  .nav-links {
+    position: fixed; inset: 61px 0 auto 0; flex-direction: column; align-items: stretch;
+    background: var(--bg-raised); border-bottom: 1px solid var(--border); padding: 0.5rem;
+    gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none;
+    transition: transform 0.18s ease, opacity 0.18s ease; max-height: 80vh; overflow-y: auto;
+  }
+  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
+  .nav-links a { padding: 0.85rem 1rem; border-radius: var(--radius-sm); }
+}
+
+/* ============================================================
+   5. HERO
+   ============================================================ */
+.hero { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
+.hero::before {
+  content: ""; position: absolute; top: -20%; right: -10%; width: 560px; height: 560px;
+  background: radial-gradient(circle, var(--glow-1), transparent 70%);
+  filter: blur(10px); pointer-events: none; opacity: 0.55; z-index: 0;
+}
+.hero::after {
+  content: ""; position: absolute; bottom: -30%; left: -10%; width: 480px; height: 480px;
+  background: radial-gradient(circle, var(--glow-2), transparent 70%);
+  filter: blur(10px); pointer-events: none; opacity: 0.4; z-index: 0;
+}
+.hero .wrap { position: relative; z-index: 1; }
+.hero-kicker {
+  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
+  color: var(--text-muted); margin-bottom: 1.25rem;
+}
+.hero-kicker::before { content: "$ "; color: var(--accent); }
+.hero-logo { max-width: 600px; width: 100%; height: auto; margin-bottom: 1rem; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3)); }
+.hero h2 { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 500; color: var(--text-secondary); margin-top: 0.6rem; letter-spacing: -0.005em; }
+.hero blockquote {
+  margin: 1.75rem 0 1.5rem; padding-left: 1.1rem;
+  border-left: 3px solid transparent;
+  border-image: linear-gradient(180deg, var(--accent), #ec4899) 1;
+  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; max-width: 46ch;
+}
+.hero p.lede { max-width: 64ch; color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 1.25rem; }
+.hero-byline { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; }
+.hero-byline strong { color: var(--text-secondary); }
+.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
+
+.btn {
+  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem;
+  font-weight: 600; font-size: 0.95rem; padding: 0.75rem 1.4rem; border-radius: var(--radius);
+  text-decoration: none; cursor: pointer; border: 1px solid transparent;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+}
+.btn:active { transform: translateY(1px); }
+.btn-primary { background: linear-gradient(135deg, var(--accent), #ec4899); color: #fff; }
+.btn-primary:hover { box-shadow: 0 10px 24px var(--glow-1); transform: translateY(-1px); }
+.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
+.btn-outline:hover { background: var(--surface); border-color: var(--accent); }
+.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
+
+.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); transform: scale(0); pointer-events: none; animation: ripple 0.6s ease-out; }
+html[data-theme="dark"] .btn-outline .ripple { background: rgba(255,255,255,0.18); }
+@keyframes ripple { to { transform: scale(3); opacity: 0; } }
+
+/* ============================================================
+   6. ABOUT
+   ============================================================ */
+.about-panel {
+  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: clamp(1.5rem, 4vw, 2.5rem); font-size: 1.1rem; color: var(--text-secondary); line-height: 1.75;
+}
+.about-panel strong { color: var(--text); }
+
+/* ============================================================
+   7. COLORFUL CARD GRIDS
+   ============================================================ */
+.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.15rem; }
+
+.card {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.6rem; position: relative; overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.card::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
+  background: var(--card-grad, var(--grad-1));
+}
+.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--card-glow, var(--glow-1)); border-color: var(--border-strong); }
+.card .icon-badge { background: var(--card-grad, var(--grad-1)); }
+.card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.5rem; }
+.card p { color: var(--text-secondary); font-size: 0.94rem; }
+.card ul { margin-top: 0.6rem; }
+.card li {
+  color: var(--text-secondary); font-size: 0.9rem; position: relative; padding-left: 1.1rem; margin-top: 0.3rem;
+}
+.card li::before { content: "●"; position: absolute; left: 0; top: 0.05em; font-size: 0.55rem; color: var(--accent); }
+.card .card-tag {
+  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
+  color: var(--text-muted); display: block; margin-top: 0.9rem;
+}
+
+/* ============================================================
+   8. PROJECTS
+   ============================================================ */
+.callout {
+  display: flex; gap: 0.85rem; align-items: flex-start;
+  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
+  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 2rem; font-size: 0.95rem; color: var(--text-secondary);
+}
+.callout strong { color: var(--text); }
+.callout .icon { color: var(--accent); margin-top: 0.15rem; }
+
+.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
+@media (max-width: 780px) { .project-grid { grid-template-columns: 1fr; } }
+
+.project-card {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; position: relative; overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.project-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-grad, var(--grad-1)); }
+.project-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px var(--card-glow, var(--glow-1)); border-color: var(--border-strong); }
+.project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
+.project-title { display: flex; align-items: center; gap: 0.65rem; }
+.project-title .icon-badge { width: 38px; height: 38px; margin-bottom: 0; border-radius: var(--radius-sm); background: var(--card-grad, var(--grad-1)); }
+.project-title .icon-badge .icon { width: 19px; height: 19px; }
+.project-card h3 { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 700; }
+.status-badge {
+  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 0.22rem 0.55rem; border-radius: 999px; white-space: nowrap; color: #fff; align-self: flex-start;
+}
+.project-card p.desc { color: var(--text-secondary); font-size: 0.93rem; }
+.tech-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
+.tech-badge {
+  font-family: var(--font-mono); font-size: 0.72rem; color: #fff; border-radius: var(--radius-sm);
+  padding: 0.22rem 0.55rem; background: var(--card-grad, var(--grad-1)); opacity: 0.92;
+}
+.project-links { display: flex; gap: 0.6rem; margin-top: auto; padding-top: 0.5rem; }
+
+/* ============================================================
+   9. STATS
+   ============================================================ */
+.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; }
+.stat {
+  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 1.75rem 1rem; position: relative; overflow: hidden;
+}
+.stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-grad, var(--grad-1)); }
+.stat .num {
+  font-family: var(--font-mono); font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; display: block;
+  background: var(--card-grad, var(--grad-1)); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.stat .label { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.35rem; }
+
+/* ============================================================
+   10. POSITIONING TABLE
+   ============================================================ */
+.positioning { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
+.positioning table { min-width: 560px; }
+.positioning th, .positioning td { text-align: left; padding: 0.9rem 1.2rem; font-size: 0.92rem; }
+.positioning thead th {
+  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
+  color: #fff; padding-block: 1rem;
+}
+.positioning thead th:first-child { background: var(--grad-7); }
+.positioning thead th:last-child { background: var(--grad-5); }
+.positioning tbody tr { border-top: 1px solid var(--border); background: var(--bg-raised); }
+.positioning tbody tr:nth-child(even) { background: var(--surface); }
+.positioning td:first-child { color: var(--text-muted); position: relative; padding-left: 2.2rem; }
+.positioning td:first-child::before { content: "✕"; position: absolute; left: 1.2rem; color: #ef4444; font-weight: 700; font-size: 0.8rem; }
+.positioning td:last-child { color: var(--text); font-weight: 600; position: relative; padding-left: 2.2rem; }
+.positioning td:last-child::before { content: "✓"; position: absolute; left: 1.2rem; color: #10b981; font-weight: 700; font-size: 0.8rem; }
+
+/* ============================================================
+   11. VISION
+   ============================================================ */
+.vision-panel {
+  position: relative; overflow: hidden;
+  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
+  border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.75rem, 5vw, 3rem);
+}
+.vision-panel::after {
+  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
+  background: linear-gradient(135deg, var(--accent), #ec4899, #06b6d4);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; pointer-events: none;
+}
+.vision-panel p {
+  font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 500; letter-spacing: -0.005em; color: var(--text); max-width: 62ch; position: relative;
+}
+.vision-panel p + p { margin-top: 1.1rem; color: var(--text-secondary); font-weight: 400; font-size: clamp(1rem, 2vw, 1.15rem); }
+
+/* ============================================================
+   12. VALUES
+   ============================================================ */
+.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.8rem; }
+.value-chip {
+  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 0.9rem; text-align: center;
+  background: var(--bg-raised); position: relative; overflow: hidden;
+  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.value-chip::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--card-grad, var(--grad-1)); }
+.value-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--card-glow, var(--glow-1)); }
+.value-chip .n {
+  font-family: var(--font-mono); font-size: 0.7rem; display: block; margin-bottom: 0.5rem; font-weight: 700;
+  background: var(--card-grad, var(--grad-1)); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.value-chip .t { font-weight: 600; font-size: 0.95rem; }
+
+/* ============================================================
+   13. ROADMAP
+   ============================================================ */
+.roadmap-intro { color: var(--text-secondary); max-width: 70ch; margin-bottom: 2.5rem; font-size: 1rem; }
+.roadmap-intro strong { color: var(--text); }
+
+.circuit { display: flex; align-items: flex-start; overflow-x: auto; padding-block: 1rem 0.5rem; scrollbar-width: thin; }
+.node { flex: 1 0 100px; min-width: 100px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding-top: 2.75rem; }
+.node::before {
+  content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px;
+  background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px); z-index: 0;
+}
+.node:first-child::before { display: none; }
+.node.is-active::before { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
+.node .pad {
+  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--bg-raised);
+  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem;
+  font-weight: 700; color: var(--text-muted); position: absolute; top: 0; z-index: 1;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.node.is-active .pad {
+  border-color: transparent; background: var(--card-grad, var(--grad-1)); color: #fff;
+  box-shadow: 0 0 0 4px var(--card-glow, var(--glow-1));
+}
+.node:hover .pad { transform: scale(1.12); }
+.node .name { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; margin-top: 0.4rem; }
+.node .state { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
+.node.is-active .state { color: var(--accent); font-weight: 600; }
+
+@media (max-width: 720px) {
+  .circuit { flex-direction: column; align-items: stretch; overflow-x: visible; }
+  .node { flex-direction: row; text-align: left; padding: 0 0 1.75rem 2.9rem; min-width: 0; align-items: flex-start; }
+  .node::before { top: 0; left: 13px; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--border-strong) 0 6px, transparent 6px 11px); }
+  .node.is-active::before { background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 11px); }
+  .node .pad { top: 0; left: 0; }
+  .node .name { margin-top: 0; margin-left: 0.15rem; }
+  .node .text { display: flex; flex-direction: column; }
+}
+
+.roadmap-footnote { margin-top: 2rem; font-size: 0.95rem; color: var(--text-secondary); border-top: 1px solid var(--border); padding-top: 1.5rem; }
+.roadmap-footnote strong { color: var(--text); }
+
+/* ============================================================
+   14. REVEAL ANIMATION
+   ============================================================ */
+.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
+.reveal.is-visible { opacity: 1; transform: translateY(0); }
+@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
+
+/* ============================================================
+   15. FOOTER
+   ============================================================ */
+.site-footer { border-top: 1px solid var(--border); padding-block: 3rem 2rem; margin-top: 2rem; position: relative; overflow: hidden; }
+.site-footer::before {
+  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  background: linear-gradient(90deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4), var(--grad-5));
+}
+.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
+.footer-brand .mark {
+  font-family: var(--font-mono); font-weight: 800; font-size: 1.3rem;
+  background: linear-gradient(135deg, var(--accent), #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
+}
+.footer-logo { max-width: 300px; width: 100%; height: auto; opacity: 0.5; margin-bottom: 0.5rem; }
+.footer-brand .sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.2rem; }
+.footer-motto { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
+.footer-links { display: flex; gap: 1.5rem; }
+.footer-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
+.footer-links a:hover { color: var(--accent); }
+.footer-bottom {
+  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); text-align: center; letter-spacing: 0.02em;
+}
+
+@media print {
+  .site-header, .theme-toggle, .hamburger, .hero-ctas, .btn, .project-links, .circuit { display: none !important; }
+  body { background-image: none; color: #000; }
+  section { padding-block: 1rem; }
+  a { color: #000; text-decoration: underline; }
+  .card::before, .project-card::before, .stat::before, .value-chip::before { display: none; }
+}
+</style>
+</head>
+<body>
+
+<a href="#main" class="skip-link">Skip to content</a>
+
+<!-- ICON SPRITE -->
+<svg class="icon-sprite" aria-hidden="true">
+  <defs>
+    <symbol id="i-key" viewBox="0 0 24 24"><circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M17 6l3 3M14 9l2 2"/></symbol>
+    <symbol id="i-server" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><circle cx="7" cy="7" r="1" fill="currentColor" stroke="none"/><circle cx="7" cy="17" r="1" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-gauge" viewBox="0 0 24 24"><path d="M4 15a8 8 0 1116 0"/><path d="M12 15l4-5"/><circle cx="12" cy="15" r="1" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="i-lock" viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></symbol>
+    <symbol id="i-shield-check" viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></symbol>
+    <symbol id="i-wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 00-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 005.4-5.4l-2.5 2.5-2-2 2.5-2.5z"/></symbol>
+    <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3.5 2"/></symbol>
+    <symbol id="i-cpu" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="1.5"/><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3"/></symbol>
+    <symbol id="i-box" viewBox="0 0 24 24"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z"/><path d="M4.5 7.5L12 12l7.5-4.5M12 12v9"/></symbol>
+    <symbol id="i-database" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6"/><path d="M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6"/></symbol>
+    <symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></symbol>
+    <symbol id="i-route" viewBox="0 0 24 24"><circle cx="5" cy="6" r="2.3"/><circle cx="19" cy="18" r="2.3"/><path d="M5 8.3v3a4 4 0 004 4h6a4 4 0 004 4"/></symbol>
+    <symbol id="i-layers" viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5M3 8l9 5 9-5"/></symbol>
+    <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l4 3-4 3M13 15h4"/></symbol>
+    <symbol id="i-monitor" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="1.5"/><path d="M8 20h8M12 16v4"/><path d="M6 12l3-3 2 2 4-4"/></symbol>
+    <symbol id="i-infinity" viewBox="0 0 24 24"><path d="M7 9a3.5 3.5 0 100 7 3.5 3.5 0 002.9-1.5L12 12l2.1 2.5A3.5 3.5 0 1017 9a3.5 3.5 0 00-2.9 1.5L12 13l-2.1-2.5A3.5 3.5 0 007 9z"/></symbol>
+    <symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></symbol>
+    <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z"/></symbol>
+    <symbol id="i-link" viewBox="0 0 24 24"><path d="M9 15l6-6"/><path d="M11 6l1-1a4 4 0 015.5 5.5l-2 2"/><path d="M13 18l-1 1a4 4 0 01-5.5-5.5l2-2"/></symbol>
+    <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.3 4 5.3 4 8.5s-1.5 6.2-4 8.5c-2.5-2.3-4-5.3-4-8.5s1.5-6.2 4-8.5z"/></symbol>
+    <symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 3v18"/><path d="M5 4h13l-3 4 3 4H5"/></symbol>
+    <symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5.5M12 8v.01"/></symbol>
+    <symbol id="i-git" viewBox="0 0 24 24"><circle cx="6" cy="6" r="2.2"/><circle cx="6" cy="18" r="2.2"/><circle cx="18" cy="12" r="2.2"/><path d="M6 8.2v7.6M6 8.2c0 4 3 5.8 6 5.8h4"/></symbol>
+  </defs>
+</svg>
+
+<header class="site-header">
+  <div class="nav-inner">
+    <a href="#home" class="brand">
+      <img src="icon.svg" alt="" class="nav-icon">
+      NX9
+    </a>
+    <nav class="nav-links" id="navLinks" aria-label="Primary">
+      <a href="#home" data-nav="home">Home</a>
+      <a href="#philosophy" data-nav="philosophy">Philosophy</a>
+      <a href="#architecture" data-nav="architecture">Architecture</a>
+      <a href="#projects" data-nav="projects">Projects</a>
+      <a href="#vision" data-nav="vision">Vision</a>
+      <a href="#values" data-nav="values">Values</a>
+      <a href="#roadmap" data-nav="roadmap">Roadmap</a>
+      <a href="case-study.html" target="_self">Case Study</a>
+    </nav>
+    <div class="nav-right">
+      <button class="theme-toggle" id="themeToggle" aria-label="Toggle color theme">
+        <span id="themeIcon" aria-hidden="true">◐</span><span id="themeLabel">Theme</span>
+      </button>
+      <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="navLinks">
+        <span></span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<main id="main">
+
+  <section class="hero" id="home">
+    <div class="wrap">
+      <p class="hero-kicker">nx9 --version</p>
+      <img src="logo.svg" alt="NX9 Logo" class="hero-logo reveal">
+      <h2>Next Generation 9</h2>
+      <blockquote>Software people can own, understand, and control.</blockquote>
+      <p class="lede">NX9 is a philosophy-driven ecosystem of independent, self-hosted, privacy-first infrastructure software — single-binary Rust applications built for people and organizations who would rather run their own infrastructure than rent someone else's. No telemetry. No subscriptions. No mandatory cloud.</p>
+      <p class="hero-byline">Built and maintained by <strong>Sunil Thakare</strong> (<span style="font-family: var(--font-mono);">@thakares</span>)</p>
+      <div class="hero-ctas">
+        <a href="#projects" class="btn btn-primary">View Projects</a>
+        <a href="#philosophy" class="btn btn-outline">Read Philosophy</a>
+      </div>
+    </div>
+  </section>
+
+  <section id="about" aria-labelledby="about-heading">
+    <div class="wrap">
+      <div class="about-panel reveal">
+        <p id="about-heading"><strong>NX9</strong> is not a framework, and it is not a cloud product that happens to support self-hosting. It is a collection of carefully engineered, single-binary Rust applications — designed for individuals and organizations that value ownership, simplicity, and independence, and built to run equally well on a Raspberry Pi, a mini PC, a VPS, or air-gapped government infrastructure.</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="philosophy" aria-labelledby="philosophy-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-flag"/></svg> 01 — Design Philosophy</p>
+        <h2 class="section-title" id="philosophy-title">Principles That Don't Change Per Project</h2>
+        <p class="section-sub">Nine commitments that stay constant across every NX9 application, regardless of what it does.</p>
+      </div>
+      <div class="card-grid" id="philosophyGrid"></div>
+    </div>
+  </section>
+
+  <section id="architecture" aria-labelledby="architecture-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-layers"/></svg> 02 — Architecture</p>
+        <h2 class="section-title" id="architecture-title">Core Architectural Pillars</h2>
+        <p class="section-sub">Every NX9 application is built on the same nine foundations — the same reason a BZOD deployment and a ChronoSeal deployment feel like they came from the same shop.</p>
+      </div>
+      <div class="card-grid" id="architectureGrid"></div>
+
+      <div class="section-head reveal" style="margin-top: 3.5rem;">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-shield-check"/></svg> Security Stack</p>
+        <h2 class="section-title">Embedded, Not Bolted On</h2>
+        <p class="section-sub">Modern cryptographic primitives and hardened defaults, standardized across the whole ecosystem.</p>
+      </div>
+      <div class="card-grid" id="securityGrid"></div>
+
+      <div class="section-head reveal" style="margin-top: 3.5rem;">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-chart"/></svg> Positioning</p>
+        <h2 class="section-title">The NX9 Trade-off, Made Explicit</h2>
+      </div>
+      <div class="positioning reveal">
+        <table>
+          <thead>
+            <tr><th>Traditional Stack</th><th>NX9</th></tr>
+          </thead>
+          <tbody id="positioningBody"></tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <section id="projects" aria-labelledby="projects-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-box"/></svg> 03 — Ecosystem</p>
+        <h2 class="section-title" id="projects-title">Current Projects</h2>
+        <p class="section-sub">Four projects are currently available. The NX9 ecosystem is designed to grow into a family of nine focused, self-hosted applications.</p>
+      </div>
+
+      <div class="callout reveal">
+        <svg class="icon"><use href="#i-info"/></svg>
+        <p><strong>Codeberg is the canonical home of NX9.</strong> GitHub repositories are maintained as mirrors to improve discoverability and make adoption easier.</p>
+      </div>
+
+      <div class="project-grid" id="projectGrid"></div>
+
+      <div class="stats-grid" id="statsGrid" style="margin-top: 3rem;"></div>
+    </div>
+  </section>
+
+  <section id="vision" aria-labelledby="vision-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-globe"/></svg> 04 — Vision</p>
+        <h2 class="section-title" id="vision-title">Why NX9 Exists</h2>
+      </div>
+      <div class="vision-panel reveal">
+        <p>In an era of cloud lock-in, subscriptions, and heavy dependencies, NX9 builds software that serves humanity — not platforms.</p>
+        <p>Technology should empower people to own their infrastructure, data, and future.</p>
+      </div>
+    </div>
+  </section>
+
+  <section id="values" aria-labelledby="values-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-key"/></svg> 05 — Values</p>
+        <h2 class="section-title" id="values-title">Core Values</h2>
+        <p class="section-sub">The twelve commitments every NX9 decision is measured against.</p>
+      </div>
+      <div class="value-grid" id="valueGrid"></div>
+    </div>
+  </section>
+
+  <section id="roadmap" aria-labelledby="roadmap-title">
+    <div class="wrap">
+      <div class="section-head reveal">
+        <p class="eyebrow"><svg class="icon" style="width:14px;height:14px"><use href="#i-route"/></svg> 06 — Roadmap</p>
+        <h2 class="section-title" id="roadmap-title">Roadmap to Nine</h2>
+      </div>
+      <p class="roadmap-intro reveal"><strong>NX9 is not a single application — it is an ecosystem of nine focused, interoperable tools</strong> built around ownership, privacy, simplicity, and open standards. Four projects are already available, with five more planned to complete the vision.</p>
+
+      <div class="circuit reveal" id="circuit" role="list" aria-label="NX9 ecosystem roadmap, four of nine milestones complete"></div>
+
+      <p class="roadmap-footnote reveal">Nodes are ordered by ship date, not ambition — <strong>chronoseal, dns-server, auth,</strong> and <strong>url-shortener</strong> shipped in that sequence. Five more applications are planned to complete the family of nine, reusing the same Tokio · Axum · SQLite · Argon2 · Ed25519 · BLAKE3 foundation.</p>
+    </div>
+  </section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="wrap">
+    <div class="footer-grid">
+      <div class="footer-brand">
+        <img src="logo.svg" alt="NX9 Logo" class="footer-logo">
+        <div class="sub">Next Generation 9</div>
+      </div>
+      <p class="footer-motto">Software people can own,<br>understand,<br>and control.<br><br><strong>Always Free. Always Open. Always Yours.</strong></p>
+      <nav class="footer-links" aria-label="Repository links">
+        <a href="https://codeberg.org/thakares" target="_blank" rel="noopener noreferrer"><svg class="icon" style="width:16px;height:16px"><use href="#i-git"/></svg> Codeberg</a>
+        <a href="https://github.com/thakares?tab=repositories" target="_blank" rel="noopener noreferrer"><svg class="icon" style="width:16px;height:16px"><use href="#i-link"/></svg> GitHub</a>
+      </nav>
+    </div>
+    <div class="footer-bottom">© <span id="year"></span> NX9 — an open-source ecosystem by Sunil Thakare. MIT / Apache-2.0.</div>
+  </div>
+</footer>
+
+<script>
+(function () {
+  "use strict";
+
+  /* ============================================================
+     THEME
+     ============================================================ */
+  const root = document.documentElement;
+  const themeToggle = document.getElementById("themeToggle");
+  const themeIcon = document.getElementById("themeIcon");
+  const themeLabel = document.getElementById("themeLabel");
+  const STORAGE_KEY = "nx9-theme";
+
+  function applyTheme(theme) {
+    root.setAttribute("data-theme", theme);
+    themeIcon.textContent = theme === "dark" ? "●" : "○";
+    themeLabel.textContent = theme === "dark" ? "Dark" : "Light";
+    themeToggle.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
+  }
+
+  function initTheme() {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") { applyTheme(stored); return; }
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    applyTheme(prefersDark ? "dark" : "light");
+  }
+
+  themeToggle.addEventListener("click", function () {
+    const current = root.getAttribute("data-theme");
+    const next = current === "dark" ? "light" : "dark";
+    applyTheme(next);
+    localStorage.setItem(STORAGE_KEY, next);
+  });
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (e) {
+    if (!localStorage.getItem(STORAGE_KEY)) applyTheme(e.matches ? "dark" : "light");
+  });
+
+  initTheme();
+
+  /* ============================================================
+     MOBILE NAV
+     ============================================================ */
+  const hamburger = document.getElementById("hamburger");
+  const navLinks = document.getElementById("navLinks");
+
+  hamburger.addEventListener("click", function () {
+    const isOpen = navLinks.classList.toggle("is-open");
+    hamburger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+  });
+
+  navLinks.querySelectorAll("a").forEach(function (link) {
+    link.addEventListener("click", function () {
+      navLinks.classList.remove("is-open");
+      hamburger.setAttribute("aria-expanded", "false");
+    });
+  });
+
+  /* ============================================================
+     ICON HELPER
+     ============================================================ */
+  function iconSvg(id) {
+    return '<svg class="icon"><use href="#' + id + '"/></svg>';
+  }
+
+  /* ============================================================
+     DATA: DESIGN PHILOSOPHY
+     ============================================================ */
+  const philosophy = [
+    { icon: "i-key", grad: 1, glow: "--glow-1", title: "Operator Ownership", body: "The operator owns the binaries, the configuration, the databases, the backups, and the encryption keys. No service depends on proprietary APIs or cloud-hosted control planes." },
+    { icon: "i-server", grad: 6, glow: "--glow-6", title: "Self-Hosting First", body: "Every decision begins with one question: \u201cCan this be deployed and operated by a single administrator?\u201d If it needs Kubernetes or a managed database, the design is reconsidered." },
+    { icon: "i-gauge", grad: 3, glow: "--glow-3", title: "Simplicity Over Complexity", body: "One binary. One configuration. One SQLite database. One administrator. Simple systems are easier to understand, secure, and recover." },
+    { icon: "i-lock", grad: 4, glow: "--glow-4", title: "Privacy by Default", body: "Applications never assume cloud connectivity, analytics collection, telemetry uploads, or third-party tracking. Users decide what information leaves their infrastructure." },
+    { icon: "i-shield-check", grad: 5, glow: "--glow-5", title: "Security by Design", body: "Argon2id, Ed25519, BLAKE3, RBAC, CSRF protection, and audit logs are embedded throughout the stack \u2014 not added later." },
+    { icon: "i-wrench", grad: 2, glow: "--glow-2", title: "Operational Excellence", body: "Diagnostics, backups, restore procedures, migration tools, CLI administration, and documentation, in every project, from day one." },
+    { icon: "i-clock", grad: 7, glow: "--glow-7", title: "Long-Term Stability", body: "NX9 intentionally avoids dependency churn. The goal is software that remains understandable and maintainable years into the future." },
+    { icon: "i-git", grad: 4, glow: "--glow-4", title: "Open Source First", body: "Every NX9 codebase is 100% open source under permissive licenses. You have the fundamental right to inspect, build, and modify the software." },
+    { icon: "i-infinity", grad: 5, glow: "--glow-5", title: "Zero Vendor Lock-In", body: "All data is stored in standard SQLite files, configurations are plain text, and architectures strictly avoid proprietary integrations." }
+  ];
+
+  const philosophyGrid = document.getElementById("philosophyGrid");
+  philosophy.forEach(function (p) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + p.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + p.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(p.icon) + '</div>' +
+      '<h3>' + p.title + '</h3>' +
+      '<p>' + p.body + '</p>';
+    philosophyGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: ARCHITECTURAL PILLARS
+     ============================================================ */
+  const architecture = [
+    { icon: "i-cpu", grad: 1, glow: "--glow-1", title: "Pure Rust", body: "Memory safety, zero-cost abstractions, and fearless concurrency. Rust 2021 Edition, release-mode optimization, no runtime interpreter.", tag: "~10\u201312 MB per binary" },
+    { icon: "i-box", grad: 6, glow: "--glow-6", title: "Single Binary Deployment", body: "One executable contains the HTTP server, business logic, auth, migrations, CLI, and templates. No JVM, no Node.js, no Python, no app server.", tag: "cargo build --release" },
+    { icon: "i-database", grad: 5, glow: "--glow-5", title: "SQLite First", body: "ACID transactions, WAL concurrency, zero administration, and portable files. Several projects isolate data across multiple databases for tenant isolation.", tag: "users.db \u00b7 system.db \u00b7 content.db" },
+    { icon: "i-bolt", grad: 3, glow: "--glow-3", title: "Tokio Async Runtime", body: "Asynchronous I/O and lightweight tasks power web servers, DNS resolution, and background workers with high concurrency.", tag: "async / await" },
+    { icon: "i-route", grad: 4, glow: "--glow-4", title: "Axum Web Layer", body: "Routing, middleware, REST APIs, HTML rendering, authentication, and sessions \u2014 integrated naturally with Tokio and Rust's type system.", tag: "HTTP \u00b7 middleware \u00b7 sessions" },
+    { icon: "i-layers", grad: 2, glow: "--glow-2", title: "Layered Architecture", body: "auth / cli / db / handlers / jobs / services / templates / utils / web \u2014 each layer owns one responsibility, for easier testing and lower coupling.", tag: "src/ layout" },
+    { icon: "i-terminal", grad: 7, glow: "--glow-7", title: "CLI-First Operations", body: "serve \u00b7 doctor \u00b7 backup \u00b7 restore \u00b7 migrate \u00b7 create-admin \u00b7 init \u2014 every service is administrable headless, over SSH, from a script.", tag: "automation-friendly" },
+    { icon: "i-shield", grad: 1, glow: "--glow-1", title: "Security Stack", body: "Argon2id password hashing, Ed25519 signatures, BLAKE3 hashing, CSRF protection, RBAC, and hardened compiler flags \u2014 RELRO, PIE, least privilege.", tag: "defense in depth" },
+    { icon: "i-monitor", grad: 6, glow: "--glow-6", title: "Operational Tooling", body: "Health checks, migration verification, automatic backups, restore tools, Docker support, systemd units, and structured logging, out of the box.", tag: "diagnostics \u00b7 systemd \u00b7 docker" }
+  ];
+
+  const architectureGrid = document.getElementById("architectureGrid");
+  architecture.forEach(function (a) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + a.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + a.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(a.icon) + '</div>' +
+      '<h3>' + a.title + '</h3>' +
+      '<p>' + a.body + '</p>' +
+      '<span class="card-tag">' + a.tag + '</span>';
+    architectureGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: SECURITY
+     ============================================================ */
+  const security = [
+    { icon: "i-shield-check", grad: 4, glow: "--glow-4", title: "Argon2id Hashing", body: "Memory-hard, CPU-hard password hashing by default for all user credentials." },
+    { icon: "i-key", grad: 1, glow: "--glow-1", title: "Ed25519 Signatures", body: "Fast, secure public-key cryptography for tokens and inter-service authentication." },
+    { icon: "i-lock", grad: 6, glow: "--glow-6", title: "Strict RBAC", body: "Role-Based Access Control enforced at the middleware layer before business logic executes." },
+    { icon: "i-shield", grad: 5, glow: "--glow-5", title: "CSRF & Security Headers", body: "Double-submit cookies, strict transport security, and hardened Content Security Policies built-in." }
+  ];
+  const securityGrid = document.getElementById("securityGrid");
+  security.forEach(function (s) {
+    const card = document.createElement("article");
+    card.className = "card reveal";
+    card.style.setProperty("--card-grad", "var(--grad-" + s.grad + ")");
+    card.style.setProperty("--card-glow", "var(" + s.glow + ")");
+    card.innerHTML =
+      '<div class="icon-badge">' + iconSvg(s.icon) + '</div>' +
+      '<h3>' + s.title + '</h3>' +
+      '<p>' + s.body + '</p>';
+    securityGrid.appendChild(card);
+  });
+
+  /* ============================================================
+     DATA: POSITIONING
+     ============================================================ */
+  const positioningBody = document.getElementById("positioningBody");
+  const posData = [
+    { bad: "Requires Kubernetes & Helm", good: "Deployed via a single binary or systemd" },
+    { bad: "Hidden telemetry and usage analytics", good: "Zero tracking, completely air-gapped capable" },
+    { bad: "1GB+ RAM for a 'Hello World' microservice", good: "10-20MB RAM for a high-traffic production service" },
+    { bad: "Forced cloud subscriptions", good: "Your hardware, your data, your rules" },
+    { bad: "Complex web of dependencies", good: "Static binaries with SQLite built-in" }
+  ];
+  posData.forEach(p => {
+    positioningBody.innerHTML += `<tr><td>${p.bad}</td><td>${p.good}</td></tr>`;
+  });
+
+  /* ============================================================
+     DATA: PROJECTS
+     ============================================================ */
+  const projectGrid = document.getElementById("projectGrid");
+  const projects = [
+    { 
+      title: "nx9-url-shortener", 
+      desc: "A lightweight, self-hosted URL management platform. Combines URL shortening, analytics, QR codes, password protection, and API automation with zero external dependencies.", 
+      status: "STABLE", 
+      icon: "i-link", 
+      tech: ["Rust", "SQLite", "Axum", "Askama"],
+      grad: 2, glow: "--glow-2",
+      link: "https://codeberg.org/thakares/nx9-url-shortener",
+      github: "https://github.com/thakares/nx9-url-shortener"
+    },
+    { 
+      title: "nx9-auth", 
+      desc: "Identity and Access Management (IAM) service. Provides authentication, authorization, session management, and RBAC in a single incredibly fast deployable binary.", 
+      status: "BETA", 
+      icon: "i-lock", 
+      tech: ["Rust", "SQLite", "Security"],
+      grad: 4, glow: "--glow-4",
+      link: "https://codeberg.org/thakares/nx9-auth",
+      github: "https://github.com/thakares/nx9-auth"
+    },
+    { 
+      title: "nx9-dns-server", 
+      desc: "High-performance, fully RFC-compliant authoritative DNS server leveraging modern async networking and a robust SQLite backend.", 
+      status: "ALPHA", 
+      icon: "i-globe", 
+      tech: ["Rust", "DNS", "Async"],
+      grad: 6, glow: "--glow-6",
+      link: "https://codeberg.org/thakares/nx9-dns-server",
+      github: "https://github.com/thakares/nx9-dns-server"
+    },
+    { 
+      title: "nx9-chronoseal-rs", 
+      desc: "Privacy-first browser attestation framework for anti-bot and anti-AI scraping. Uses Ed25519 heartbeat chains and WASM attestation without tracking users.", 
+      status: "STABLE", 
+      icon: "i-shield", 
+      tech: ["Rust", "WASM", "Ed25519"],
+      grad: 5, glow: "--glow-5",
+      link: "https://codeberg.org/thakares/nx9-chronoseal-rs",
+      github: "https://github.com/thakares/nx9-chronoseal-rs"
+    }
+  ];
+  projects.forEach(p => {
+    projectGrid.innerHTML += `
+      <div class="project-card reveal" style="--card-grad: var(--grad-${p.grad}); --card-glow: var(${p.glow})">
+        <div class="project-card-head">
+          <div class="project-title">
+            <div class="icon-badge">${iconSvg(p.icon)}</div>
+            <h3>${p.title}</h3>
+          </div>
+          <span class="status-badge" style="background: var(--grad-${p.grad === 5 ? 5 : p.grad === 4 ? 4 : p.grad === 6 ? 6 : 2})">${p.status}</span>
+        </div>
+        <p class="desc">${p.desc}</p>
+        <div class="tech-badges">
+          ${p.tech.map(t => `<span class="tech-badge" style="background: var(--grad-${p.grad})">${t}</span>`).join("")}
+        </div>
+        <div class="project-links">
+          <a href="${p.link}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline"><svg class="icon" style="width:14px;height:14px"><use href="#i-git"/></svg> Codeberg</a>
+          <a href="${p.github}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline"><svg class="icon" style="width:14px;height:14px"><use href="#i-link"/></svg> GitHub</a>
+        </div>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: STATS
+     ============================================================ */
+  const statsGrid = document.getElementById("statsGrid");
+  const stats = [
+    { num: "0", label: "External Dependencies", grad: 1 },
+    { num: "1", label: "Binary to Deploy", grad: 6 },
+    { num: "9", label: "Core Projects", grad: 4 },
+    { num: "<15MB", label: "RAM per Service", grad: 5 }
+  ];
+  stats.forEach(s => {
+    statsGrid.innerHTML += `
+      <div class="stat reveal" style="--card-grad: var(--grad-${s.grad})">
+        <span class="num">${s.num}</span>
+        <span class="label">${s.label}</span>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: VALUES
+     ============================================================ */
+  const valueGrid = document.getElementById("valueGrid");
+  const values = [
+    { num: "01", text: "User Ownership", grad: 1, glow: "--glow-1" },
+    { num: "02", text: "Absolute Privacy", grad: 2, glow: "--glow-2" },
+    { num: "03", text: "Open Source", grad: 3, glow: "--glow-3" },
+    { num: "04", text: "Simplicity First", grad: 4, glow: "--glow-4" },
+    { num: "05", text: "CLI Automation", grad: 5, glow: "--glow-5" },
+    { num: "06", text: "Open Standards", grad: 6, glow: "--glow-6" },
+    { num: "07", text: "Long-term Stability", grad: 7, glow: "--glow-7" },
+    { num: "08", text: "Linux Native", grad: 1, glow: "--glow-1" },
+    { num: "09", text: "Zero Tracking", grad: 2, glow: "--glow-2" },
+    { num: "10", text: "No Vendor Lock", grad: 3, glow: "--glow-3" },
+    { num: "11", text: "Performant", grad: 4, glow: "--glow-4" },
+    { num: "12", text: "Understandable", grad: 5, glow: "--glow-5" }
+  ];
+  values.forEach(v => {
+    valueGrid.innerHTML += `
+      <div class="value-chip reveal" style="--card-grad: var(--grad-${v.grad}); --card-glow: var(${v.glow})">
+        <span class="n">${v.num}</span>
+        <span class="t">${v.text}</span>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     DATA: ROADMAP
+     ============================================================ */
+  const circuit = document.getElementById("circuit");
+  const roadmap = [
+    { num: "01", name: "ChronoSeal", state: "STABLE", active: true },
+    { num: "02", name: "DNS Server", state: "ALPHA", active: true },
+    { num: "03", name: "Auth", state: "BETA", active: true },
+    { num: "04", name: "URL Shortener", state: "STABLE", active: true },
+    { num: "05", name: "Project 5", state: "PLANNED", active: false },
+    { num: "06", name: "Project 6", state: "PLANNED", active: false },
+    { num: "07", name: "Project 7", state: "PLANNED", active: false },
+    { num: "08", name: "Project 8", state: "PLANNED", active: false },
+    { num: "09", name: "Project 9", state: "PLANNED", active: false }
+  ];
+  roadmap.forEach(r => {
+    circuit.innerHTML += `
+      <div class="node ${r.active ? 'is-active' : ''} reveal">
+        <div class="pad">${r.num}</div>
+        <div class="text">
+          <div class="name">${r.name}</div>
+          <div class="state">${r.state}</div>
+        </div>
+      </div>
+    `;
+  });
+
+  /* ============================================================
+     REVEAL ANIMATIONS
+     ============================================================ */
+  const observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 0.1
+  };
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("is-visible");
+        observer.unobserve(entry.target);
+      }
+    });
+  }, observerOptions);
+
+  document.querySelectorAll(".reveal").forEach(el => observer.observe(el));
+  
+  // Set copyright year
+  document.getElementById("year").textContent = new Date().getFullYear();
+})();
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/www/logo.png b/www/logo.png
new file mode 100644
index 0000000..1501d7f
Binary files /dev/null and b/www/logo.png differ
diff --git a/www/logo.svg b/www/logo.svg
new file mode 100644
index 0000000..3e31442
--- /dev/null
+++ b/www/logo.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="145 195 810 215" width="100%" height="100%">
+  <!-- Background -->
+  
+  <g fill="#ffffff">
+    <!-- Server Rack Blades -->
+    <!-- Top -->
+    <rect x="150" y="200" width="280" height="48" rx="24"/>
+    <!-- Middle -->
+    <rect x="150" y="260" width="280" height="48" rx="24"/>
+    <!-- Bottom -->
+    <rect x="150" y="320" width="280" height="48" rx="24"/>
+
+    <!-- Stem -->
+    <rect x="278" y="368" width="24" height="18"/>
+    
+    <!-- Base plate -->
+    <rect x="235" y="386" width="110" height="12"/>
+    
+    <!-- Network Lines -->
+    <!-- Left -->
+    <rect x="150" y="388" width="73" height="8"/>
+    <!-- Right -->
+    <rect x="357" y="388" width="73" height="8"/>
+  </g>
+
+  <!-- LEDs (Cutouts) -->
+  <g fill="#000000">
+    <circle cx="400" cy="224" r="8"/>
+    <circle cx="400" cy="284" r="8"/>
+    <circle cx="400" cy="344" r="8"/>
+  </g>
+
+  <!-- Main Logo Text -->
+  <text x="470" y="368" font-family="'Montserrat', 'Arial Black', 'Impact', sans-serif" font-size="235" font-weight="900" fill="#ffffff" letter-spacing="-4">NX9</text>
+
+  <!-- Subtitle -->
+  <text x="485" y="400" font-family="'Montserrat', 'Segoe UI', 'Helvetica Neue', sans-serif" font-size="26" font-weight="700" fill="#ffffff" letter-spacing="2">OWN YOUR INFRASTRUCTURE.</text>
+
+</svg>
diff --git a/www/manifest.json b/www/manifest.json
new file mode 100644
index 0000000..013d4a6
--- /dev/null
+++ b/www/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
\ No newline at end of file
diff --git a/www/ms-icon-144x144.png b/www/ms-icon-144x144.png
new file mode 100644
index 0000000..37de658
Binary files /dev/null and b/www/ms-icon-144x144.png differ
diff --git a/www/ms-icon-150x150.png b/www/ms-icon-150x150.png
new file mode 100644
index 0000000..7113eb4
Binary files /dev/null and b/www/ms-icon-150x150.png differ
diff --git a/www/ms-icon-310x310.png b/www/ms-icon-310x310.png
new file mode 100644
index 0000000..dc28418
Binary files /dev/null and b/www/ms-icon-310x310.png differ
diff --git a/www/ms-icon-70x70.png b/www/ms-icon-70x70.png
new file mode 100644
index 0000000..6b1b24b
Binary files /dev/null and b/www/ms-icon-70x70.png differ