diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 0000000..faec9f2 --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,41 @@ +name: Deploy Landing To GitHub Pages + +on: + push: + branches: + - main + paths: + - "landing/**" + - ".github/workflows/pages.yml" + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Pages + uses: actions/configure-pages@v5 + + - name: Upload landing artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./landing + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/landing/README.md b/landing/README.md new file mode 100644 index 0000000..78c3326 --- /dev/null +++ b/landing/README.md @@ -0,0 +1,21 @@ +# QuantLab Landing + +Landing estatica preparada para publicarse en GitHub Pages. + +## Estructura + +- `index.html` +- `styles.css` +- `app.js` + +## Preview local + +Se puede abrir `index.html` directamente o servir la carpeta `landing/` con cualquier servidor estatico. + +## Deploy + +El workflow [pages.yml](../.github/workflows/pages.yml) publica el contenido de `landing/` en GitHub Pages cuando hay cambios en `main`. + +Requisito del repositorio: + +- GitHub Pages debe estar configurado para desplegar desde **GitHub Actions**. diff --git a/landing/app.js b/landing/app.js new file mode 100644 index 0000000..3b2930f --- /dev/null +++ b/landing/app.js @@ -0,0 +1,24 @@ +document.querySelectorAll(".site-nav a, .button, .header-cta").forEach((link) => { + link.addEventListener("click", () => { + document.body.dataset.lastAction = link.getAttribute("href") || ""; + }); +}); + +const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + } + }); + }, + { + threshold: 0.18, + }, +); + +document.querySelectorAll(".panel, .timeline-step, .principle, .maturity-step").forEach((node) => { + node.classList.add("reveal"); + observer.observe(node); +}); diff --git a/landing/index.html b/landing/index.html new file mode 100644 index 0000000..de201c2 --- /dev/null +++ b/landing/index.html @@ -0,0 +1,482 @@ + + + + + + QuantLab | Shell de trabajo cuantitativo + + + + + + + +
+
+
+
QL
+
+
QuantLab
+
Research workspace
+
+
+ + Ver producto +
+ +
+
+
+
Research, paper discipline y execution safety
+

QuantLab es tu shell de trabajo para investigacion cuantitativa y ejecucion supervisada.

+

+ Una superficie unificada para lanzar experimentos, revisar runs, comparar resultados, + inspeccionar artifacts y avanzar solo cuando el sistema esta listo. +

+
+ Ver la shell + Entender el workflow +
+
+ Experiments + Runs + Compare + Artifacts + Paper Ops + Execution Boundaries +
+
+ +
+
+ + + +
+
+ +
+
+
research_ui up
+
stepbit optional
+
paper health ok
+
+
+
+
Run Explorer
+
ETH-USDSharpe 1.42
+
WalkforwardDrawdown -12.4%
+
Artifactsreport.json
+
+
+
Candidates
+
    +
  • baseline_run_001
    • +
  • candidate_eth_grid
    • +
  • paper_ready_shortlist
    • +
+
+
+
Command bus
+
$ open latest run
+
$ compare selected
+
$ prepare paper
+
+
+
+
+
+
+ +
+
+
Problema
+

El problema no es ver datos. El problema es trabajar con continuidad.

+

+ Herramientas dispersas, runs aislados, dashboards muertos y poca trazabilidad entre research, + paper y execution safety. QuantLab existe para convertir ese caos en workflow operativo. +

+
+
+
+

Demasiadas superficies

+

Varios scripts, varios outputs y varias ventanas sin una shell principal de trabajo.

+
+
+

Runs sin contexto

+

Resultados aislados que no ayudan a decidir que merece seguir vivo.

+
+
+

Poca memoria operativa

+

Sin shortlist, baseline ni artifacts claros, cada iteracion empieza casi desde cero.

+
+
+

Research sin handoff

+

La transicion a paper y a execution safety se vuelve ambigua y fragil.

+
+
+
+ +
+
+
Superficies
+

QuantLab organiza el trabajo por objetos y decisiones, no por pantallas vacias.

+
+
+
+

Experiments

+

Preparar hipotesis, cargar configs, lanzar sweeps y revisar lotes recientes.

+
+
+

Runs

+

Explorer principal con resultados, estado, config y acceso directo al detalle.

+
+
+

Compare

+

Comparar runs, detectar diferencias y cerrar mejor el proceso de decision.

+
+
+

Artifacts

+

Explorar report.json, metrics, config resuelta, logs y salidas canonicamente.

+
+
+

Candidates / Shortlist

+

Marcar candidatos, fijar baseline y separar lo prometedor del ruido.

+
+
+

Paper Ops

+

Operar paper sessions con estado, alertas, continuidad y lectura de errores.

+
+
+

Pre-trade intake

+

Leer handoffs de trabajo previo sin mezclar planning externo con la autoridad de QuantLab.

+
+
+

Execution boundaries

+

Preparar promotion y seguridad antes de cualquier automation o live boundary.

+
+
+
+ +
+
+
Workflow real
+

Una maquina de pensamiento cuantitativo.

+

QuantLab esta pensado para sostener el ciclo completo de investigacion y decision.

+
+
+
+
01
+

Definir hipotesis

+

Elegir estrategia, rango, activos y parametros iniciales.

+
+
+
02
+

Lanzar run o sweep

+

Ejecutar de forma reproducible y dejar artifacts persistidos.

+
+
+
03
+

Inspeccionar resultados

+

Leer metricas, config y errores desde una misma superficie.

+
+
+
04
+

Comparar alternativas

+

Separar resultados competitivos de resultados irrelevantes.

+
+
+
05
+

Marcar candidatos

+

Crear shortlist, baseline y memoria operativa local.

+
+
+
06
+

Promover a paper

+

Solo avanzar cuando el research ya ha demostrado continuidad suficiente.

+
+
+
07
+

Preparar execution con seguridad

+

Boundaries explicitos, handoffs claros y automation solo cuando toca.

+
+
+
+ +
+
+
Capas del producto
+

QuantLab no es una sola UI; es un sistema con fronteras claras.

+
+
+
+
Motor cuantitativo
+

Runs, sweeps, paper sessions y reporting canonicamente definidos.

+
+
+
Artifacts canonicos
+

report.json, metrics, metadata, status e indices compartidos como contrato real.

+
+
+
Desktop shell
+

Superficie unificada para lanzar, revisar, comparar y decidir.

+
+
+
Operational boundaries
+

Paper, broker safety y handoffs tratados como capas disciplinadas, no como atajos.

+
+
+
Stepbit opcional
+

Copiloto externo y acoplado por contrato. No define la soberania de QuantLab.

+
+
+
Pre-trade upstream
+

La calculadora externa prepara handoffs. QuantLab valida, decide y ejecuta.

+
+
+
+ +
+
+
Principios
+

Menos ruido, mas disciplina.

+
+
+
Reproducibilidad
+
Auditabilidad
+
Claridad operativa
+
Control local
+
Boundaries explicitos
+
Automation solo cuando el sistema esta preparado
+
+
+ +
+
+
Research to execution safety
+

La prioridad no es automatizar antes. La prioridad es madurar el sistema.

+
+
+
+ Research +

Hipotesis y ejecucion reproducible.

+
+
+ Validation +

Compare, artifacts y shortlist.

+
+
+ Paper +

Sesiones operativas con visibilidad real.

+
+
+ Execution safety +

Boundaries, preflight y handoffs claros.

+
+
+ Supervised live +

Solo cuando la disciplina ya esta consolidada.

+
+
+
+ +
+
+
Product preview
+

Una shell, varias superficies, un mismo flujo de trabajo.

+
+
+
+
+ Desktop shell + Chat + tabs + runtime strip +
+
+
+
+
open latest run
+
compare selected
+
+
+
+
+ +
+
+ Runs explorer + Historial, estado y contexto +
+
+
RunSharpeReturn
+
run_eth_0011.4218.2%
+
run_eth_0021.1011.4%
+
run_eth_0030.887.1%
+
+
+ +
+
+ Compare + Diferencias y ganador +
+
+
+
+
+
+
+ +
+
+ Artifacts + Contrato y evidencia +
+
+
report.json
+
metrics.json
+
config.json
+
session_status.json
+
+
+ +
+
+ Paper Ops + Now / Watch / Next +
+
+
Running session
+
Latest issue
+
Promotion readiness
+
+
+ +
+
+ Experiments / Launch + Hipotesis y ejecucion +
+
+
+
+
+
Launch sweep
+
+
+
+
+ +
+
+
Diferenciacion
+

QuantLab no compite por tener mas widgets. Compite por claridad, continuidad y control.

+
+
+
+ Enfoque + Research + Decision + Paper discipline + Execution boundary +
+
+ Dashboard bonito + Parcial + Bajo + No + No +
+
+ Bot automatico + Debil + Opaco + No + Riesgoso +
+
+ Broker UI + No + Bajo + Parcial + Si +
+
+ QuantLab + Si + Si + Si + Si +
+
+
+ +
+
+
Roadmap
+

Progresion controlada del sistema.

+
+
+
+ 01 +

Shell madura

+

Workspace mas robusta, menos friccion y mejor continuidad entre superficies.

+
+
+ 02 +

Contratos del motor

+

Artifacts, estados, paper sessions e indices mas estables y legibles.

+
+
+ 03 +

Paper Ops mas fuertes

+

Mas disciplina operativa antes de subir el liston de execution.

+
+
+ 04 +

Execution safety

+

Preflight, submit supervision y boundaries de broker mas serios.

+
+
+ 05 +

Automation controlada

+

Solo despues de que research, paper y safety tengan suficiente madurez.

+
+
+
+ +
+
+
QuantLab
+

Construido para pensar, comparar y decidir con rigor.

+

+ Una shell cuantitativa para convertir research reproducible en workflow operativo, + sin perder trazabilidad, control local ni disciplina antes de execution real. +

+
+ Explorar preview + Ver workflow +
+
+
+
+
+ + + + diff --git a/landing/styles.css b/landing/styles.css new file mode 100644 index 0000000..3c16a61 --- /dev/null +++ b/landing/styles.css @@ -0,0 +1,726 @@ +:root { + --bg: #071018; + --bg-soft: #0d1823; + --panel: rgba(15, 25, 36, 0.82); + --panel-strong: #101c28; + --border: rgba(163, 183, 205, 0.14); + --text: #edf3fa; + --muted: #9eb0c4; + --accent: #59d0c3; + --accent-soft: rgba(89, 208, 195, 0.18); + --accent-2: #ffd08a; + --danger: #ff8f8f; + --shadow: 0 28px 80px rgba(0, 0, 0, 0.32); + --radius-lg: 28px; + --radius-md: 18px; + --radius-sm: 12px; + --content-width: 1200px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: "Manrope", sans-serif; + color: var(--text); + background: + radial-gradient(circle at top left, rgba(89, 208, 195, 0.16), transparent 28%), + radial-gradient(circle at top right, rgba(255, 208, 138, 0.12), transparent 24%), + linear-gradient(180deg, #061018 0%, #08131d 35%, #09141d 100%); +} + +a { + color: inherit; + text-decoration: none; +} + +.page-shell { + min-height: 100vh; +} + +.site-header, +.section { + width: min(calc(100% - 2rem), var(--content-width)); + margin: 0 auto; +} + +.site-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.25rem 0; + position: sticky; + top: 0; + z-index: 10; + backdrop-filter: blur(14px); + background: rgba(7, 16, 24, 0.72); +} + +.brand { + display: flex; + align-items: center; + gap: 0.85rem; +} + +.brand-mark { + width: 44px; + height: 44px; + border-radius: 14px; + display: grid; + place-items: center; + background: linear-gradient(135deg, rgba(89, 208, 195, 0.25), rgba(255, 208, 138, 0.15)); + border: 1px solid var(--border); + font-weight: 800; +} + +.brand-title { + font-weight: 800; + letter-spacing: -0.03em; +} + +.brand-subtitle, +.site-nav a, +.eyebrow, +.badge, +.layer-tag, +.surface-head span, +.panel-label { + font-family: "IBM Plex Mono", monospace; +} + +.brand-subtitle, +.site-nav a, +.hero-text, +.section-heading p, +.problem-card p, +.feature-card p, +.layer-card p, +.roadmap-card p, +.timeline-step p, +.final-cta p { + color: var(--muted); +} + +.site-nav { + display: flex; + align-items: center; + gap: 1.2rem; +} + +.site-nav a { + font-size: 0.82rem; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.header-cta, +.button { + border-radius: 999px; + border: 1px solid var(--border); + transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; +} + +.header-cta { + padding: 0.8rem 1rem; + background: rgba(255, 255, 255, 0.02); +} + +.header-cta:hover, +.button:hover { + transform: translateY(-1px); + border-color: rgba(89, 208, 195, 0.42); +} + +.section { + padding: 4.25rem 0; +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + gap: 2rem; + padding-top: 3.5rem; +} + +.eyebrow { + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.12em; + font-size: 0.76rem; + margin-bottom: 1rem; +} + +h1, +h2, +h3 { + margin: 0; + letter-spacing: -0.04em; +} + +h1 { + font-size: clamp(2.8rem, 6vw, 5.4rem); + line-height: 0.96; + max-width: 11ch; +} + +h2 { + font-size: clamp(2rem, 4.5vw, 3.4rem); + max-width: 16ch; +} + +h3 { + font-size: 1.18rem; +} + +.hero-text, +.section-heading p, +.final-cta p { + font-size: 1.05rem; + line-height: 1.7; + max-width: 64ch; +} + +.cta-row, +.badge-row, +.principles-grid, +.roadmap-grid, +.problem-grid, +.feature-grid, +.layers-grid, +.preview-gallery { + display: grid; + gap: 1rem; +} + +.cta-row { + grid-template-columns: repeat(2, max-content); + margin-top: 1.8rem; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.95rem 1.4rem; + min-height: 48px; +} + +.button-primary { + background: linear-gradient(135deg, rgba(89, 208, 195, 0.95), rgba(72, 180, 170, 0.95)); + color: #062327; + font-weight: 800; +} + +.button-secondary { + background: rgba(255, 255, 255, 0.02); +} + +.badge-row { + grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); + margin-top: 1.5rem; +} + +.badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.65rem 0.9rem; + border: 1px solid var(--border); + border-radius: 999px; + background: rgba(255, 255, 255, 0.02); + font-size: 0.76rem; + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.panel { + background: var(--panel); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow); +} + +.hero-visual { + padding: 1rem; +} + +.window-chrome { + display: flex; + gap: 0.45rem; + padding: 0.4rem 0.25rem 1rem; +} + +.window-chrome span { + width: 11px; + height: 11px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.16); +} + +.workspace-preview { + display: grid; + grid-template-columns: 170px minmax(0, 1fr); + min-height: 470px; + overflow: hidden; + border-radius: 22px; + border: 1px solid rgba(163, 183, 205, 0.08); +} + +.workspace-sidebar { + padding: 1rem; + background: linear-gradient(180deg, rgba(6, 15, 24, 0.84), rgba(8, 17, 27, 0.6)); + border-right: 1px solid rgba(163, 183, 205, 0.08); +} + +.workspace-label { + font-size: 0.72rem; + letter-spacing: 0.1em; + color: var(--muted); + text-transform: uppercase; + margin-bottom: 1rem; +} + +.workspace-item { + padding: 0.8rem 0.9rem; + border-radius: 14px; + color: var(--muted); + margin-bottom: 0.45rem; +} + +.workspace-item.active { + background: rgba(89, 208, 195, 0.12); + color: var(--text); +} + +.workspace-main { + padding: 1rem; + background: + linear-gradient(180deg, rgba(13, 24, 35, 0.95), rgba(10, 18, 28, 0.9)); +} + +.preview-strip { + display: flex; + flex-wrap: wrap; + gap: 0.7rem; + margin-bottom: 1rem; +} + +.strip-chip { + padding: 0.45rem 0.75rem; + border-radius: 999px; + font-size: 0.75rem; + border: 1px solid var(--border); +} + +.strip-chip.up { + background: rgba(89, 208, 195, 0.1); + color: #9ff3ea; +} + +.strip-chip.warn { + background: rgba(255, 208, 138, 0.12); + color: #ffe0af; +} + +.preview-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; +} + +.preview-card { + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(163, 183, 205, 0.08); + border-radius: 18px; + padding: 1rem; + min-height: 140px; +} + +.preview-card.primary { + background: linear-gradient(180deg, rgba(89, 208, 195, 0.12), rgba(255, 255, 255, 0.02)); +} + +.preview-card.wide { + grid-column: 1 / -1; +} + +.card-label, +.section-label { + font-family: "IBM Plex Mono", monospace; + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 0.76rem; + color: var(--muted); +} + +.metric-row, +.mini-list li, +.terminal-line, +.principle, +.comparison-row, +.roadmap-card span { + font-size: 0.95rem; +} + +.metric-row { + display: flex; + justify-content: space-between; + margin-top: 0.8rem; +} + +.mini-list { + list-style: none; + padding: 0; + margin: 0.9rem 0 0; + display: grid; + gap: 0.5rem; +} + +.terminal-line { + font-family: "IBM Plex Mono", monospace; + color: #a7f9f1; + margin-top: 0.8rem; +} + +.section-heading { + margin-bottom: 1.8rem; +} + +.problem-grid, +.feature-grid, +.layers-grid, +.preview-gallery, +.roadmap-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.problem-card, +.feature-card, +.layer-card, +.timeline-step, +.roadmap-card, +.preview-surface, +.final-cta-panel, +.comparison-table { + padding: 1.3rem; +} + +.workflow-timeline { + display: grid; + grid-template-columns: repeat(7, minmax(0, 1fr)); + gap: 1rem; +} + +.step-index, +.roadmap-card span { + display: inline-flex; + width: 42px; + height: 42px; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(89, 208, 195, 0.12); + color: var(--accent); + margin-bottom: 0.9rem; + font-family: "IBM Plex Mono", monospace; +} + +.layer-tag { + display: inline-flex; + padding: 0.42rem 0.7rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(163, 183, 205, 0.08); + margin-bottom: 0.85rem; + font-size: 0.74rem; + text-transform: uppercase; +} + +.principles-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.principle { + padding: 1.1rem 1.2rem; + border-radius: 16px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(163, 183, 205, 0.08); +} + +.maturity-rail { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; +} + +.maturity-step { + padding: 1.15rem; + border-radius: 18px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(163, 183, 205, 0.08); +} + +.maturity-step span { + display: inline-block; + margin-bottom: 0.7rem; + font-weight: 700; +} + +.surface-head { + display: flex; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1rem; +} + +.surface-body.shell-surface { + display: grid; + grid-template-columns: 60px 1fr 1.2fr; + gap: 0.8rem; + min-height: 180px; +} + +.surface-column, +.surface-chat, +.surface-tab, +.ops-card, +.launch-field, +.launch-button, +.compare-bar span, +.artifact-stack div, +.table-row, +.chat-bubble { + border-radius: 14px; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(163, 183, 205, 0.08); +} + +.surface-chat, +.surface-tab { + min-height: 160px; +} + +.surface-chat { + padding: 0.9rem; + display: grid; + gap: 0.7rem; +} + +.chat-bubble { + padding: 0.8rem; +} + +.chat-bubble.muted { + color: var(--muted); +} + +.surface-tab { + background: linear-gradient(180deg, rgba(89, 208, 195, 0.08), rgba(255, 255, 255, 0.02)); +} + +.surface-table, +.compare-bars, +.artifact-stack, +.ops-grid, +.launch-form { + display: grid; + gap: 0.65rem; +} + +.table-row { + display: grid; + grid-template-columns: 1.6fr 0.7fr 0.7fr; + padding: 0.85rem 1rem; +} + +.table-row.header { + color: var(--muted); +} + +.compare-bar { + display: grid; + grid-template-columns: 110px minmax(0, 1fr); + align-items: center; + gap: 0.75rem; +} + +.compare-bar span { + height: 14px; + background: linear-gradient(90deg, rgba(89, 208, 195, 0.85), rgba(255, 208, 138, 0.65)); +} + +.compare-bar span.alt { + background: linear-gradient(90deg, rgba(255, 208, 138, 0.85), rgba(89, 208, 195, 0.35)); +} + +.artifact-stack div, +.ops-card, +.launch-field, +.launch-button { + padding: 0.95rem 1rem; +} + +.ops-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.launch-form { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.launch-field.short { + grid-column: span 1; +} + +.launch-button { + background: var(--accent-soft); + color: #bffaf4; + grid-column: 1 / -1; +} + +.comparison-table { + overflow: hidden; +} + +.comparison-row { + display: grid; + grid-template-columns: 1.5fr repeat(4, 1fr); + gap: 0.75rem; + padding: 0.95rem 0; + border-bottom: 1px solid rgba(163, 183, 205, 0.08); +} + +.comparison-row:last-child { + border-bottom: 0; +} + +.comparison-head, +.comparison-row span:first-child { + font-weight: 700; +} + +.comparison-row.emphasis { + color: #bffaf4; +} + +.roadmap-grid { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +.final-cta { + padding-bottom: 5rem; +} + +.final-cta-panel { + text-align: center; + padding: 2.4rem; +} + +.hidden { + display: none !important; +} + +.reveal { + opacity: 0; + transform: translateY(18px); + transition: opacity 420ms ease, transform 420ms ease; +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +@media (max-width: 1180px) { + .hero, + .problem-grid, + .feature-grid, + .layers-grid, + .preview-gallery, + .roadmap-grid, + .principles-grid, + .maturity-rail, + .workflow-timeline { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .workflow-timeline .timeline-step:last-child, + .roadmap-grid .roadmap-card:last-child { + grid-column: 1 / -1; + } +} + +@media (max-width: 900px) { + .site-header, + .site-nav, + .hero, + .workspace-preview, + .surface-body.shell-surface, + .ops-grid, + .comparison-row, + .cta-row { + grid-template-columns: 1fr; + } + + .site-header { + position: static; + flex-direction: column; + align-items: flex-start; + } + + .site-nav { + display: none; + } + + .workspace-preview { + min-height: auto; + } + + .workspace-sidebar { + border-right: 0; + border-bottom: 1px solid rgba(163, 183, 205, 0.08); + } + + .surface-body.shell-surface { + min-height: auto; + } + + .comparison-row { + gap: 0.4rem; + } +} + +@media (max-width: 640px) { + .section { + padding: 3rem 0; + } + + .problem-grid, + .feature-grid, + .layers-grid, + .preview-gallery, + .roadmap-grid, + .principles-grid, + .maturity-rail, + .workflow-timeline, + .ops-grid, + .launch-form { + grid-template-columns: 1fr; + } + + .table-row, + .comparison-row { + grid-template-columns: 1fr; + } + + .badge-row { + grid-template-columns: 1fr 1fr; + } +}