koko

Dockerfile

+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY public/ /usr/share/nginx/html/
+COPY screenshots/ /usr/share/nginx/html/screenshots/
+EXPOSE 80

PRODUCT.md

+# Product
+
+## Register
+
+brand
+
+## Users
+
+Egyptian sports club administrators, board of trustees members, pool/facility managers, and sports academy directors. They are decision-makers aged 35-60, Arabic-speaking, evaluating ERP solutions for their clubs. They visit this site from desktop during board meetings or from mobile when forwarded a link by a colleague. They need to understand quickly that this system handles their exact operational pain points — not generic business problems.
+
+## Product Purpose
+
+El-Captain is a comprehensive ERP system built exclusively for Egyptian sports clubs and facilities. It manages the complete member lifecycle (registration, interviews, activation, transfers, divorce/death/waiver separations), sports activities (academies, training groups, pool management, facility scheduling, player cards), financial operations (accounting, treasury, payments, installments, fines, subscriptions), HR, inventory, procurement, and mobile apps for players, coaches, and parents.
+
+The website exists to convert club decision-makers into buyers by demonstrating that El-Captain is purpose-built for their exact operational reality — not adapted from generic software.
+
+## Brand Personality
+
+Commanding. Exclusive. Purpose-built.
+
+Like a private operations center for elite sports facility management. The tone is confident and direct — this system doesn't try to sell itself; it demonstrates mastery over the domain.
+
+## Anti-references
+
+- Generic SaaS landing pages (hero-metric templates, gradient cards, "trusted by 10,000+" badges, generic stock photos)
+- Colorful/playful Arabic websites (bright colors, rounded cartoon UI, casual tone)
+- Cheap WordPress themes (slider carousels, icon grids, contact popups, template layouts)
+- Competitor club management software sites (typically dated, feature-list-heavy, no visual identity)
+- Any site where you can't tell what industry it serves from the hero alone
+
+## Design Principles
+
+1. **Domain mastery over feature listing** — Show understanding of the specific operational pain points of Egyptian sports clubs, don't just list features. A visitor should feel "they understand my exact problems."
+
+2. **Product as proof** — Let the real UI screenshots do the heavy lifting. The system's interface is the strongest argument; the website frames it, doesn't compete with it.
+
+3. **Emotional progression** — Build through recognition ("built for us"), then capability ("controls everything"), then urgency ("we're behind without it"). Each page section advances this arc.
+
+4. **Institutional weight** — This is enterprise software for organizations managing thousands of members and millions in revenue. The site must feel like it belongs to an entity of that scale.
+
+5. **Arabic-native, not translated** — The site should feel like it was conceived in Arabic, not translated from English. Typography, reading flow, and content structure should be native RTL.
+
+## Accessibility & Inclusion
+
+- WCAG 2.1 AA minimum
+- Dark theme requires careful contrast management (light text on dark must hit 4.5:1)
+- Reduced motion alternatives for all animations
+- Arabic text must be readable at all sizes (no thin weights below 16px)
+- Touch targets minimum 44px for mobile

captain-definition

+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}

nginx.conf

+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    charset utf-8;
+
+    location / {
+        try_files $uri $uri/ $uri.html =404;
+    }
+
+    location /screenshots/ {
+        alias /usr/share/nginx/html/screenshots/;
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    location ~* \.(css|js|woff2|woff|ttf|svg|png|jpg|jpeg|webp|ico)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+
+    error_page 404 /404.html;
+
+    gzip on;
+    gzip_types text/plain text/css application/javascript text/html image/svg+xml;
+    gzip_min_length 256;
+}

public/404.html

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>صفحة غير موجودة - El-Captain</title>
+  <link rel="stylesheet" href="css/tokens.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/components.css">
+</head>
+<body>
+
+  <nav class="nav nav--scrolled" aria-label="التنقل الرئيسي">
+    <div class="container nav__inner">
+      <a href="/" class="nav__logo">
+        <span class="nav__logo-mark">EC</span>
+        <span>El-Captain</span>
+      </a>
+      <div class="nav__links">
+        <a href="/" class="nav__link">الرئيسية</a>
+        <a href="features.html" class="nav__link">المزايا</a>
+        <a href="contact.html" class="nav__cta">تواصل معنا</a>
+      </div>
+    </div>
+  </nav>
+
+  <main style="min-height: 80dvh; display: grid; place-items: center; text-align: center; padding: var(--space-3xl) var(--space-lg);">
+    <div>
+      <div style="font-size: var(--text-5xl); font-weight: 900; color: var(--brand-primary-dim); margin-bottom: var(--space-md);">404</div>
+      <h1 style="font-size: var(--text-2xl); margin-bottom: var(--space-md);">الصفحة غير موجودة</h1>
+      <p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); margin-inline: auto;">الصفحة التي تبحث عنها غير متاحة. يمكنك العودة للصفحة الرئيسية.</p>
+      <a href="/" class="btn btn--primary">العودة للرئيسية</a>
+    </div>
+  </main>
+
+  <script src="js/main.js"></script>
+</body>
+</html>

public/css/base.css

+@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  direction: rtl;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+body {
+  font-family: 'Tajawal', sans-serif;
+  font-size: var(--text-base);
+  line-height: 1.7;
+  color: var(--ink-primary);
+  background-color: var(--bg-deep);
+  overflow-x: hidden;
+  min-height: 100dvh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.25;
+  font-weight: 700;
+  text-wrap: balance;
+}
+
+h1 { font-size: var(--text-5xl); font-weight: 900; }
+h2 { font-size: var(--text-4xl); font-weight: 800; }
+h3 { font-size: var(--text-3xl); }
+h4 { font-size: var(--text-2xl); }
+h5 { font-size: var(--text-xl); }
+
+p {
+  max-width: var(--content-max);
+  text-wrap: pretty;
+  color: var(--ink-secondary);
+  line-height: 1.85;
+}
+
+a {
+  color: var(--brand-primary-light);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out-quart);
+}
+
+a:hover {
+  color: var(--brand-primary);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+::selection {
+  background: oklch(0.570 0.158 353.3 / 0.3);
+  color: var(--ink-primary);
+}
+
+:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+.container {
+  width: 100%;
+  max-width: var(--container-max);
+  margin-inline: auto;
+  padding-inline: var(--space-lg);
+}
+
+.container--wide {
+  max-width: var(--container-wide);
+}
+
+.section {
+  padding-block: var(--space-section);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

public/css/home.css

+/* Hero */
+.hero {
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  padding-top: 5rem;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: -20%;
+  left: -10%;
+  width: 70%;
+  height: 70%;
+  background: radial-gradient(ellipse, oklch(0.570 0.158 353.3 / 0.12) 0%, transparent 65%);
+  pointer-events: none;
+  animation: hero-glow 8s ease-in-out infinite alternate;
+}
+
+@keyframes hero-glow {
+  from { opacity: 0.6; transform: translate(0, 0) scale(1); }
+  to { opacity: 1; transform: translate(3%, 3%) scale(1.05); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero::before { animation: none; }
+}
+
+.hero__grid {
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: var(--space-2xl);
+  align-items: center;
+}
+
+@media (max-width: 1024px) {
+  .hero__grid {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.hero__content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero__title {
+  margin-bottom: var(--space-lg);
+  letter-spacing: -0.02em;
+}
+
+.hero__title-accent {
+  color: var(--brand-primary-light);
+}
+
+.hero__desc {
+  font-size: var(--text-xl);
+  margin-bottom: var(--space-xl);
+  max-width: 50ch;
+}
+
+@media (max-width: 1024px) {
+  .hero__desc {
+    margin-inline: auto;
+  }
+}
+
+.hero__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 1024px) {
+  .hero__actions {
+    justify-content: center;
+  }
+}
+
+.hero__visual {
+  position: relative;
+}
+
+.hero__screenshot {
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg), var(--shadow-glow);
+  border: 1px solid var(--border-subtle);
+}
+
+.hero__screenshot img {
+  width: 100%;
+  height: auto;
+}
+
+/* Pain points section */
+.pain-points {
+  background: var(--bg-base);
+}
+
+.pain-points__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: var(--space-lg);
+}
+
+.pain-point {
+  padding: var(--space-xl);
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+}
+
+.pain-point__problem {
+  font-size: var(--text-base);
+  color: var(--ink-muted);
+  margin-bottom: var(--space-md);
+  line-height: 1.7;
+}
+
+.pain-point__solution {
+  font-size: var(--text-lg);
+  color: var(--brand-primary-light);
+  font-weight: 700;
+}
+
+/* Modules showcase */
+.modules-showcase__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
+  gap: var(--space-lg);
+}
+
+.module-card {
+  display: block;
+  padding: var(--space-xl);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--duration-normal) var(--ease-out-quart),
+              transform var(--duration-normal) var(--ease-out-quart),
+              box-shadow var(--duration-normal) var(--ease-out-quart);
+}
+
+.module-card:hover {
+  border-color: var(--brand-primary-muted);
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px oklch(0 0 0 / 0.3);
+  color: inherit;
+}
+
+.module-card__icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  display: grid;
+  place-items: center;
+  background: oklch(0.570 0.158 353.3 / 0.1);
+  border: 1px solid oklch(0.570 0.158 353.3 / 0.2);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-lg);
+  font-size: 1.5rem;
+}
+
+.module-card__title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--ink-primary);
+  margin-bottom: var(--space-sm);
+}
+
+.module-card__desc {
+  font-size: var(--text-sm);
+  color: var(--ink-secondary);
+  line-height: 1.8;
+  margin-bottom: var(--space-md);
+}
+
+.module-card__link {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  color: var(--brand-primary-light);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+/* Product screenshots carousel section */
+.product-showcase {
+  position: relative;
+  overflow: hidden;
+}
+
+.product-showcase__track {
+  display: flex;
+  gap: var(--space-lg);
+  animation: scroll-right 40s linear infinite;
+  width: max-content;
+}
+
+@keyframes scroll-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .product-showcase__track { animation: none; flex-wrap: wrap; width: auto; }
+}
+
+.product-showcase__item {
+  flex: 0 0 400px;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+}
+
+.product-showcase__item img {
+  width: 100%;
+  height: 250px;
+  object-fit: cover;
+  object-position: top right;
+}
+
+/* Numbers / Social proof */
+.social-proof {
+  background: var(--bg-base);
+}
+
+.social-proof__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-xl);
+  text-align: center;
+}
+
+/* CTA section */
+.cta-section {
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.cta-section::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at center, oklch(0.570 0.158 353.3 / 0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.cta-section__content {
+  position: relative;
+  z-index: 1;
+}
+
+.cta-section__title {
+  margin-bottom: var(--space-lg);
+}
+
+.cta-section__desc {
+  font-size: var(--text-xl);
+  margin-inline: auto;
+  margin-bottom: var(--space-xl);
+}
+
+.cta-section__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}

public/css/pages.css

+/* Module detail pages */
+.module-detail__features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: var(--space-lg);
+}
+
+.module-detail__screenshot-section {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: var(--space-2xl);
+  align-items: center;
+}
+
+.module-detail__screenshot-section--reverse {
+  grid-template-columns: 1fr 1.2fr;
+}
+
+@media (max-width: 900px) {
+  .module-detail__screenshot-section,
+  .module-detail__screenshot-section--reverse {
+    grid-template-columns: 1fr;
+  }
+}
+
+.module-detail__text h3 {
+  margin-bottom: var(--space-md);
+  font-size: var(--text-2xl);
+}
+
+.module-detail__text p {
+  margin-bottom: var(--space-md);
+}
+
+.module-detail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.module-detail__list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  font-size: var(--text-base);
+  color: var(--ink-secondary);
+}
+
+.module-detail__list-item::before {
+  content: '';
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  margin-top: 0.65em;
+  background: var(--brand-primary);
+  border-radius: 50%;
+}
+
+/* Features overview page */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+  gap: var(--space-lg);
+}
+
+.feature-item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-lg);
+  padding: var(--space-xl);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  align-items: start;
+}
+
+.feature-item__number {
+  font-size: var(--text-3xl);
+  font-weight: 900;
+  color: var(--brand-primary-dim);
+  line-height: 1;
+  opacity: 0.6;
+}
+
+.feature-item__content h4 {
+  font-size: var(--text-lg);
+  margin-bottom: var(--space-xs);
+  color: var(--ink-primary);
+}
+
+.feature-item__content p {
+  font-size: var(--text-sm);
+  color: var(--ink-secondary);
+}
+
+/* Contact / Pricing page */
+.contact-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .contact-section {
+    grid-template-columns: 1fr;
+  }
+}
+
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.form-group label {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--ink-secondary);
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  padding: var(--space-md);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--ink-primary);
+  font-family: inherit;
+  font-size: var(--text-base);
+  transition: border-color var(--duration-fast) var(--ease-out-quart);
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: var(--brand-primary);
+  box-shadow: 0 0 0 3px oklch(0.570 0.158 353.3 / 0.15);
+}
+
+.form-group textarea {
+  min-height: 150px;
+  resize: vertical;
+}
+
+.contact-info {
+  padding: var(--space-xl);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+}
+
+.contact-info__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding-block: var(--space-md);
+}
+
+.contact-info__item + .contact-info__item {
+  border-top: 1px solid var(--border-subtle);
+}
+
+.contact-info__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: grid;
+  place-items: center;
+  background: oklch(0.570 0.158 353.3 / 0.1);
+  border-radius: var(--radius-md);
+  color: var(--brand-primary-light);
+  flex-shrink: 0;
+}
+
+.contact-info__label {
+  font-size: var(--text-sm);
+  color: var(--ink-muted);
+  margin-bottom: 2px;
+}
+
+.contact-info__value {
+  font-size: var(--text-base);
+  color: var(--ink-primary);
+  font-weight: 500;
+}
+
+/* Workflow diagram */
+.workflow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: var(--space-xl) 0;
+}
+
+.workflow__step {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--ink-primary);
+}
+
+.workflow__arrow {
+  color: var(--brand-primary-dim);
+  font-size: var(--text-xl);
+}
+
+/* Comparison table */
+.comparison-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+}
+
+.comparison-table th {
+  padding: var(--space-md) var(--space-lg);
+  background: var(--bg-elevated);
+  font-weight: 700;
+  font-size: var(--text-sm);
+  color: var(--ink-primary);
+  text-align: right;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.comparison-table td {
+  padding: var(--space-md) var(--space-lg);
+  font-size: var(--text-sm);
+  color: var(--ink-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.comparison-table tr:last-child td {
+  border-bottom: none;
+}
+
+.comparison-table .check {
+  color: var(--success);
+  font-weight: 700;
+}
+
+.comparison-table .cross {
+  color: var(--ink-muted);
+  opacity: 0.5;
+}

public/css/tokens.css

+:root {
+  /* Brand seed: oklch(0.570 0.158 353.3) — deep rose/crimson */
+  --brand-primary: oklch(0.570 0.158 353.3);
+  --brand-primary-light: oklch(0.650 0.140 353.3);
+  --brand-primary-dim: oklch(0.450 0.120 353.3);
+  --brand-primary-muted: oklch(0.380 0.080 353.3);
+
+  /* Backgrounds — true dark, not warm-tinted */
+  --bg-deep: oklch(0.120 0.008 353.3);
+  --bg-base: oklch(0.150 0.010 353.3);
+  --bg-surface: oklch(0.185 0.012 353.3);
+  --bg-elevated: oklch(0.220 0.014 353.3);
+
+  /* Text */
+  --ink-primary: oklch(0.950 0.005 353.3);
+  --ink-secondary: oklch(0.750 0.010 353.3);
+  --ink-muted: oklch(0.550 0.008 353.3);
+
+  /* Borders */
+  --border-subtle: oklch(0.250 0.012 353.3);
+  --border-default: oklch(0.320 0.015 353.3);
+
+  /* Accent — gold for secondary highlights */
+  --accent-gold: oklch(0.700 0.120 85);
+  --accent-gold-dim: oklch(0.550 0.090 85);
+
+  /* Functional */
+  --success: oklch(0.650 0.150 145);
+  --warning: oklch(0.700 0.140 80);
+  --error: oklch(0.600 0.180 25);
+
+  /* Typography scale — 1.333 ratio (perfect fourth) */
+  --text-xs: clamp(0.694rem, 0.65vi + 0.5rem, 0.75rem);
+  --text-sm: clamp(0.833rem, 0.8vi + 0.6rem, 0.875rem);
+  --text-base: clamp(1rem, 1vi + 0.7rem, 1.063rem);
+  --text-lg: clamp(1.125rem, 1.2vi + 0.8rem, 1.25rem);
+  --text-xl: clamp(1.333rem, 1.5vi + 0.9rem, 1.5rem);
+  --text-2xl: clamp(1.777rem, 2.2vi + 1rem, 2.25rem);
+  --text-3xl: clamp(2.369rem, 3vi + 1.2rem, 3rem);
+  --text-4xl: clamp(3.157rem, 4vi + 1.5rem, 4rem);
+  --text-5xl: clamp(4.209rem, 5.5vi + 1.8rem, 5.5rem);
+
+  /* Spacing */
+  --space-xs: clamp(0.25rem, 0.5vi, 0.5rem);
+  --space-sm: clamp(0.5rem, 1vi, 0.75rem);
+  --space-md: clamp(1rem, 2vi, 1.5rem);
+  --space-lg: clamp(1.5rem, 3vi, 2.5rem);
+  --space-xl: clamp(2.5rem, 5vi, 4rem);
+  --space-2xl: clamp(4rem, 8vi, 6rem);
+  --space-3xl: clamp(6rem, 12vi, 10rem);
+  --space-section: clamp(5rem, 10vi, 8rem);
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
+  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 8px 32px oklch(0 0 0 / 0.5);
+  --shadow-glow: 0 0 40px oklch(0.570 0.158 353.3 / 0.2);
+
+  /* Transitions */
+  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 150ms;
+  --duration-normal: 300ms;
+  --duration-slow: 500ms;
+
+  /* Z-index scale */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal-backdrop: 300;
+  --z-modal: 400;
+  --z-toast: 500;
+  --z-tooltip: 600;
+
+  /* Layout */
+  --container-max: 1280px;
+  --container-wide: 1440px;
+  --content-max: 75ch;
+}

public/js/main.js

+document.addEventListener('DOMContentLoaded', () => {
+  initNav();
+  initReveal();
+  initMobileMenu();
+});
+
+function initNav() {
+  const nav = document.querySelector('.nav');
+  if (!nav) return;
+
+  let ticking = false;
+  window.addEventListener('scroll', () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        nav.classList.toggle('nav--scrolled', window.scrollY > 50);
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }, { passive: true });
+}
+
+function initMobileMenu() {
+  const toggle = document.querySelector('.nav__toggle');
+  const links = document.querySelector('.nav__links');
+  if (!toggle || !links) return;
+
+  toggle.addEventListener('click', () => {
+    const isOpen = links.classList.toggle('nav__links--open');
+    toggle.setAttribute('aria-expanded', String(isOpen));
+    document.body.style.overflow = isOpen ? 'hidden' : '';
+  });
+
+  links.addEventListener('click', (e) => {
+    if (e.target.classList.contains('nav__link')) {
+      links.classList.remove('nav__links--open');
+      toggle.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+    }
+  });
+}
+
+function initReveal() {
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('revealed');
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
+  );
+
+  document.querySelectorAll('[data-reveal]').forEach((el) => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(24px)';
+    el.style.transition = `opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)`;
+    const delay = el.dataset.reveal || '0';
+    el.style.transitionDelay = `${delay}ms`;
+    observer.observe(el);
+  });
+}
+
+document.documentElement.addEventListener('animationend', () => {});
+
+const style = document.createElement('style');
+style.textContent = `.revealed { opacity: 1 !important; transform: translateY(0) !important; }`;
+document.head.appendChild(style);