From 98dbc5f86b36e0bb7cbd3dece2122c4db904d55c Mon Sep 17 00:00:00 2001 From: DevBehindYou Date: Sat, 22 Aug 2026 01:53:09 +0530 Subject: [PATCH] add MDify Pro GitHub Pages onepage --- .github/workflows/deploy-pages.yml | 37 ++ .nojekyll | 0 assets/mdify-icon.png | Bin 0 -> 21690 bytes index.html | 356 +++++++++++++ robots.txt | 2 + script.js | 163 ++++++ styles.css | 769 +++++++++++++++++++++++++++++ 7 files changed, 1327 insertions(+) create mode 100644 .github/workflows/deploy-pages.yml create mode 100644 .nojekyll create mode 100644 assets/mdify-icon.png create mode 100644 index.html create mode 100644 robots.txt create mode 100644 script.js create mode 100644 styles.css diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml new file mode 100644 index 0000000..6f979d4 --- /dev/null +++ b/.github/workflows/deploy-pages.yml @@ -0,0 +1,37 @@ +name: Deploy MDify Pro OnePage to GitHub Pages + +on: + push: + branches: ["main"] + 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: Configure GitHub Pages + uses: actions/configure-pages@v5 + + - name: Upload static site + uses: actions/upload-pages-artifact@v3 + with: + path: "." + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/assets/mdify-icon.png b/assets/mdify-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b9cc4f7574093895c816e643e3f5f6b0ccb663ec GIT binary patch literal 21690 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 Y1)aJMABYv!S^xk507*qoM6N<$g8T0^%K!iX literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..79f2c0b --- /dev/null +++ b/index.html @@ -0,0 +1,356 @@ + + + + + + + + + + + + + + + + + + + + MDify Pro | Documents in. Clean Markdown out. + + + + + + + + + + + + + + + +
+
+
+ + ✦ + Powered by Microsoft MarkItDown + + + +

Cut PDF token usage by up to 70%

+

Drop in the document you already have. MDify Pro returns clean Markdown with headings, tables and useful structure intact, ready for RAG ingestion, Git or the next prompt.

+

No sign-up. No watermark. Open source from line one.

+ +
+ Open the converter + + + View source + +
+ +
+
70%example token reduction
+
110K+MarkItDown GitHub stars
+
20+input extensions
+
$0price tag
+
+
+ +
+
+
+ + mdify-pro / converter + Live +
+ +
+
+ +

Drop files herePDF, DOCX, PPTX, XLSX and more

+
+ +
+
PDF
annual-report.pdf2.8 MB
Done
+
PPT
research-deck.pptx8.1 MB
Done
+
XLS
metrics.xlsx412 KB
Done
+
+ +
+
annual-report.md94 quality
+ 
# Q4 Financial Review
+
+## Revenue
+Revenue reached $48.2M across...
+
+| Region | ARR |
+| North America | $31.8M |
+| Europe | $10.7M |
+
4.5K est. tokens8.2K words12 tables
+
+
+
+
RAG-ready
+
Git-friendly .md
+
+
+ +
+ +
+ +
+
+

The case for Markdown

+

Your model needs the document. It doesn't need the clutter around it.

+

PDF layouts and exported HTML can drag formatting debris into an LLM pipeline. MDify Pro strips the wrapper and keeps the parts you meant to send: headings, paragraphs, lists and tables.

+
+ +
+
+
01
+ +

Spend context on content

+

Cleaner Markdown cuts layout noise before the document reaches your model. On the supplied financial-PDF example, an estimated 15K-token input lands near 4.5K after conversion.

+
+ +
+
02
+ +

Give models cleaner structure

+

Headings stay headings. Lists stay lists. Tables stay readable. Your chunker gets cleaner boundaries and retrieval starts with less junk to untangle.

+
+ +
+
03
+ +

Keep the result in Git

+

Markdown is plain text. Diff it, search it, review it in a pull request, feed it to a static-site generator, or store it next to the code it documents.

+
+
+ +
+
+ Example token footprint +

Same report. Less baggage.

+

Token estimates change by document and tokenizer. The point is the direction: removing layout metadata can shrink what reaches the model without stripping the document's meaning.

+ Read the full use case +
+
+
+
Raw PDF~15K tokens
+
+
+
+
Clean Markdown~4.5K tokens
+
+
+
~70%example reduction
+
+
+
+ +
+
+

Who it's for

+

Six teams. One boring file problem solved.

+

You already have the documents. MDify Pro gets them into a format your editor, repo, CMS or retrieval pipeline can work with.

+
+ +
+
AI

AI and LLM pipelines

Turn a stack of PDFs and office files into cleaner input for RAG ingestion, context windows and model prep.

RAG ingestionContextFine-tuning prep
+
</>

Developers and engineers

Convert specs, runbooks and wiki exports once. Commit the Markdown and review documentation with the same Git workflow as code.

Docs as codeGit-nativeWiki migration
+
∑

Researchers and academics

Pull structured text from papers without copy-paste cleanup. Keep headings and tables useful for notes, citations and search.

Paper extractionObsidianTables
+
Aa

Content teams and writers

Move Word docs, slide decks and HTML into Markdown before they hit Ghost, Jekyll, Notion or your CMS workflow.

CMS migrationPublishingNotion
+
▦

Data and analytics teams

Turn spreadsheets and CSV files into readable Markdown tables for READMEs, reports, issue threads and internal docs.

TablesCSVReports
+
HQ

Operations teams

Convert policy files, contracts and old documentation into plain text your knowledge base can index and your team can search.

Knowledge baseComplianceArchive
+
+
+ +
+
+
+

Many formats in, one format out

+

Drop the file you have. Get Markdown back.

+
+

The converter handles office files, web exports, tabular data and structured text through the same pipeline. Scanned PDFs are flagged instead of being passed off as good output.

+
+ +
+

PDF

Text-native extraction

.pdf
+

Word

Document structure

.docx
+

PowerPoint

Slides and notes

.pptx
+

Excel

Rows to tables

.xlsx .xls
+

HTML

Structured Markdown

.html .htm
+

CSV / TSV

Tabular Markdown

.csv .tsv
+

JSON / XML

Structured data

.json .xml
+

Text / Markdown

Clean and analyze

.txt .md
+ +
+
+ +
+
+

Three steps

+

No setup screen between you and the Markdown.

+
+ +
+
+ 01 + +

Drop your files

+

Mix supported formats in the same batch. The app validates each upload before conversion starts.

+
+ +
+ 02 + +

Pick a profile and convert

+

Standard keeps the source close. Clean strips leftovers. Compact cuts noise. RAG-ready reshapes the output for model ingestion.

+
+ +
+ 03 + +

Preview, copy or download

+

Read the Markdown inline with word, character and token estimates. Copy one result or download the whole batch as a ZIP.

+
+
+
+ +
+
+

Under the hood

+

Two apps. A small pipeline. Nothing hidden.

+

The frontend and backend deploy independently. MarkItDown sits behind an adapter, so another processor can slot in later without forcing the interface to change.

+
+ +
+
+
NFrontend
+

Next.js 14 + TypeScript

+

Vercel hosts the typed frontend, file queue, output views, backend status handling and Liquid Glass UI.

+
Next.jsTypeScriptTailwind CSSMVVM
+
+ +
+
PyBackend
+

FastAPI + MarkItDown

+

Render hosts the Python service. Files cross validation first, pass through the converter adapter, get normalized, and return as typed JSON.

+
Python 3.11+FastAPIMarkItDownRender
+
+
+ +
+
01BrowserDrop files
+ → +
02VercelNext.js
+ → +
03RenderFastAPI
+ → +
04MarkItDownConvert + analyze
+
+ +
+
+ Next in the roadmap +

Image OCR, saved history and durable async jobs.

+

The current converter stays lean. Heavier work moves behind clean seams as the product grows.

+
+ Read RoadMap.docx +
+
+ +
+
+
MDify Pro icon
+

Open source from line one

+

Every file you upload comes back as Markdown.

+

Try it on a document you already use. If the output belongs in your pipeline, keep it. If you want to see how it works, the repository is open.

+
+ Open MDify Pro + Star on GitHub +
+
+ Use case + Roadmap + Microsoft MarkItDown +
+
+
+
+ + + +
+ +
+ + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..c2a49f4 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Allow: / diff --git a/script.js b/script.js new file mode 100644 index 0000000..f07f57c --- /dev/null +++ b/script.js @@ -0,0 +1,163 @@ +(() => { + const root = document.documentElement; + const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + const themeToggle = document.getElementById('themeToggle'); + const scrollProgress = document.getElementById('scrollProgress'); + const cursorGlow = document.getElementById('cursorGlow'); + const glassNav = document.querySelector('.glass-nav'); + const mobileDock = document.getElementById('mobileDock'); + const mobileLens = document.getElementById('mobileLens'); + const mobileItems = mobileDock ? [...mobileDock.querySelectorAll('.mobile-item[data-mobile-section]')] : []; + const observedSections = [...document.querySelectorAll('[data-section]')]; + + const savedTheme = localStorage.getItem('mdify-onepage-theme'); + if (savedTheme === 'light') root.dataset.theme = 'light'; + + themeToggle?.addEventListener('click', () => { + const isLight = root.dataset.theme === 'light'; + if (isLight) { + delete root.dataset.theme; + localStorage.setItem('mdify-onepage-theme', 'dark'); + } else { + root.dataset.theme = 'light'; + localStorage.setItem('mdify-onepage-theme', 'light'); + } + }); + + const updateProgress = () => { + const max = document.documentElement.scrollHeight - innerHeight; + const pct = max > 0 ? Math.min(100, Math.max(0, (scrollY / max) * 100)) : 0; + if (scrollProgress) scrollProgress.style.width = `${pct}%`; + }; + + addEventListener('scroll', updateProgress, { passive: true }); + addEventListener('resize', updateProgress, { passive: true }); + updateProgress(); + + if (matchMedia('(hover:hover) and (pointer:fine)').matches) { + addEventListener('pointermove', (event) => { + if (cursorGlow) { + cursorGlow.style.left = `${event.clientX}px`; + cursorGlow.style.top = `${event.clientY}px`; + cursorGlow.style.opacity = '1'; + } + if (glassNav) { + const rect = glassNav.getBoundingClientRect(); + const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left)); + glassNav.style.setProperty('--nav-x', `${x}px`); + } + }, { passive: true }); + } + + const revealObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + entry.target.classList.add('in-view'); + revealObserver.unobserve(entry.target); + } + } + }, { threshold: 0.12, rootMargin: '0px 0px -5% 0px' }); + + document.querySelectorAll('.reveal, .token-compare').forEach((el) => revealObserver.observe(el)); + + const countUp = (el) => { + const target = Number(el.dataset.count || 0); + const suffix = el.dataset.suffix || ''; + if (!target || prefersReduced) { + el.textContent = `${target}${suffix}`; + return; + } + const duration = 1100; + const start = performance.now(); + const tick = (now) => { + const t = Math.min(1, (now - start) / duration); + const eased = 1 - Math.pow(1 - t, 3); + el.textContent = `${Math.round(target * eased)}${suffix}`; + if (t < 1) requestAnimationFrame(tick); + }; + requestAnimationFrame(tick); + }; + + const countObserver = new IntersectionObserver((entries) => { + for (const entry of entries) { + if (entry.isIntersecting) { + countUp(entry.target); + countObserver.unobserve(entry.target); + } + } + }, { threshold: 0.8 }); + document.querySelectorAll('[data-count]').forEach((el) => countObserver.observe(el)); + + function positionMobileLens(item, immediate = false) { + if (!mobileDock || !mobileLens || !item) return; + const dockRect = mobileDock.getBoundingClientRect(); + const itemRect = item.getBoundingClientRect(); + if (immediate) mobileLens.style.transition = 'none'; + mobileDock.style.setProperty('--lens-x', `${itemRect.left - dockRect.left}px`); + mobileDock.style.setProperty('--lens-w', `${itemRect.width}px`); + if (immediate) { + mobileLens.getBoundingClientRect(); + mobileLens.style.transition = ''; + } + } + + function activateMobile(sectionName) { + const target = mobileItems.find((item) => item.dataset.mobileSection === sectionName); + if (!target) return; + mobileItems.forEach((item) => item.classList.toggle('is-active', item === target)); + positionMobileLens(target); + } + + mobileItems.forEach((item) => { + item.addEventListener('click', () => { + activateMobile(item.dataset.mobileSection); + navigator.vibrate?.(5); + }); + }); + + const sectionObserver = new IntersectionObserver((entries) => { + const visible = entries + .filter((entry) => entry.isIntersecting) + .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]; + if (visible) activateMobile(visible.target.dataset.section); + }, { threshold: [0.15, 0.35, 0.55], rootMargin: '-20% 0px -58% 0px' }); + observedSections.forEach((section) => sectionObserver.observe(section)); + + let lastY = scrollY; + let compact = false; + const setCompact = (next) => { + if (!mobileDock || next === compact) return; + compact = next; + mobileDock.classList.toggle('compact', compact); + requestAnimationFrame(() => { + const active = mobileItems.find((item) => item.classList.contains('is-active')); + positionMobileLens(active); + }); + }; + + addEventListener('scroll', () => { + const y = scrollY; + const delta = y - lastY; + if (Math.abs(delta) > 4) { + if (delta > 0 && y > 140) setCompact(true); + if (delta < 0) setCompact(false); + } + lastY = y; + }, { passive: true }); + + mobileDock?.addEventListener('pointermove', (event) => { + const rect = mobileDock.getBoundingClientRect(); + const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left)); + mobileDock.style.setProperty('--dock-x', `${x}px`); + }, { passive: true }); + + addEventListener('resize', () => { + const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0]; + positionMobileLens(active, true); + }, { passive: true }); + + requestAnimationFrame(() => { + const active = mobileItems.find((item) => item.classList.contains('is-active')) || mobileItems[0]; + positionMobileLens(active, true); + }); +})(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7bab290 --- /dev/null +++ b/styles.css @@ -0,0 +1,769 @@ +:root { + color-scheme: dark; + --bg: #080808; + --bg-soft: #0e0e0e; + --surface: rgba(19, 19, 19, 0.74); + --surface-strong: rgba(25, 25, 25, 0.92); + --surface-soft: rgba(255, 255, 255, 0.035); + --text: #f6f6f2; + --muted: #a7a7a0; + --muted-2: #777770; + --line: rgba(255, 255, 255, 0.10); + --line-strong: rgba(255, 255, 255, 0.18); + --accent: #f5a623; + --accent-2: #ffd479; + --accent-soft: rgba(245, 166, 35, 0.14); + --green: #76d9a7; + --red: #ff7777; + --blue: #85a9ff; + --purple: #bf96ff; + --radius-lg: 32px; + --radius-md: 22px; + --shadow: 0 30px 80px rgba(0, 0, 0, 0.32); + --max: 1180px; + --nav-h: 68px; +} + +html[data-theme="light"] { + color-scheme: light; + --bg: #f5f4ef; + --bg-soft: #ecebe5; + --surface: rgba(255, 255, 255, 0.68); + --surface-strong: rgba(255, 255, 255, 0.94); + --surface-soft: rgba(13, 13, 13, 0.035); + --text: #11110f; + --muted: #61615a; + --muted-2: #8a8a82; + --line: rgba(15, 15, 13, 0.10); + --line-strong: rgba(15, 15, 13, 0.16); + --accent: #d98200; + --accent-2: #9e5f00; + --accent-soft: rgba(217, 130, 0, 0.12); + --shadow: 0 30px 80px rgba(55, 48, 35, 0.12); +} + +* { box-sizing: border-box; } +html { scroll-behavior: smooth; scroll-padding-top: 100px; } +body { + margin: 0; + min-width: 320px; + color: var(--text); + background: + radial-gradient(circle at 20% -5%, rgba(245, 166, 35, 0.10), transparent 28%), + radial-gradient(circle at 88% 18%, rgba(133, 169, 255, 0.08), transparent 27%), + var(--bg); + font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-feature-settings: "ss01" 1, "cv10" 1; + overflow-x: hidden; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -5; + pointer-events: none; + background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1px); + background-size: 22px 22px; + mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.35) 55%, transparent 92%); + opacity: .25; +} + +a { color: inherit; } +button, a { -webkit-tap-highlight-color: transparent; } +button { font: inherit; } +img { max-width: 100%; display: block; } +svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } + +::selection { background: var(--accent); color: #111; } + +.skip-link { + position: fixed; + top: 10px; + left: 10px; + z-index: 1000; + transform: translateY(-160%); + padding: 10px 14px; + border-radius: 10px; + background: var(--text); + color: var(--bg); + text-decoration: none; + font-weight: 700; +} +.skip-link:focus { transform: translateY(0); } + +.scroll-progress { + position: fixed; + inset: 0 0 auto; + height: 2px; + z-index: 110; + pointer-events: none; +} +.scroll-progress span { + display: block; + width: 0; + height: 100%; + background: linear-gradient(90deg, var(--accent), var(--accent-2)); + box-shadow: 0 0 18px rgba(245, 166, 35, .55); +} + +.page-noise { + position: fixed; + inset: 0; + z-index: -1; + opacity: .025; + pointer-events: none; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); +} + +.ambient { + position: fixed; + width: 42vw; + height: 42vw; + max-width: 680px; + max-height: 680px; + z-index: -4; + border-radius: 50%; + filter: blur(100px); + opacity: .12; + pointer-events: none; +} +.ambient-a { top: 8vh; left: -16vw; background: var(--accent); } +.ambient-b { top: 34vh; right: -20vw; background: #708bff; opacity: .08; } + +.cursor-glow { + position: fixed; + width: 380px; + height: 380px; + border-radius: 50%; + z-index: -3; + pointer-events: none; + background: radial-gradient(circle, rgba(245, 166, 35, .08), transparent 66%); + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity .25s ease; +} + +.section-shell { + width: min(calc(100% - 40px), var(--max)); + margin-inline: auto; +} + +.site-header { + position: fixed; + z-index: 100; + top: 18px; + left: 0; + right: 0; + pointer-events: none; +} + +.glass-nav { + width: min(calc(100% - 32px), 1080px); + min-height: var(--nav-h); + margin: 0 auto; + padding: 9px 10px 9px 14px; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 18px; + border: 1px solid var(--line-strong); + border-radius: 23px; + background: + linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); + box-shadow: + 0 18px 48px rgba(0,0,0,.16), + inset 0 1px 0 rgba(255,255,255,.12), + inset 0 -1px 0 rgba(0,0,0,.12); + backdrop-filter: blur(22px) saturate(150%); + -webkit-backdrop-filter: blur(22px) saturate(150%); + pointer-events: auto; + isolation: isolate; + overflow: hidden; +} +.glass-nav::before { + content: ""; + position: absolute; + inset: 0; + z-index: -1; + pointer-events: none; + background: + linear-gradient(118deg, rgba(255,255,255,.16), transparent 20%, transparent 73%, rgba(245,166,35,.07)), + radial-gradient(circle at var(--nav-x, 50%) -20%, rgba(255,255,255,.13), transparent 34%); +} +.glass-nav::after { + content: ""; + position: absolute; + inset: 1px; + z-index: -1; + border-radius: 21px; + pointer-events: none; + box-shadow: inset 1px 1px 1px rgba(255,255,255,.12), inset -1px -1px 1px rgba(0,0,0,.18); +} + +.brand { + display: inline-flex; + align-items: center; + gap: 10px; + width: max-content; + font-weight: 800; + letter-spacing: -.02em; + text-decoration: none; +} +.brand img { border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18); } + +.nav-links { display: flex; align-items: center; gap: 4px; } +.nav-links a { + padding: 10px 11px; + border-radius: 12px; + color: var(--muted); + font-size: 13px; + font-weight: 650; + text-decoration: none; + transition: color .2s ease, background .2s ease; +} +.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); background: var(--surface-soft); } + +.nav-actions { justify-self: end; display: flex; align-items: center; gap: 7px; } +.nav-github { + padding: 10px 11px; + color: var(--muted); + font-size: 13px; + font-weight: 700; + text-decoration: none; +} +.nav-github:hover { color: var(--text); } + +.icon-button { + width: 38px; + height: 38px; + border: 1px solid var(--line); + border-radius: 12px; + display: grid; + place-items: center; + color: var(--muted); + background: var(--surface-soft); + cursor: pointer; +} +.icon-button svg { width: 18px; height: 18px; } +.icon-button:hover { color: var(--text); border-color: var(--line-strong); } +html[data-theme="light"] .sun-icon { display: none; } +html:not([data-theme="light"]) .moon-icon { display: none; } + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + min-height: 48px; + padding: 0 18px; + border: 1px solid transparent; + border-radius: 14px; + font-size: 14px; + font-weight: 760; + letter-spacing: -.01em; + text-decoration: none; + transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; +} +.button:hover { transform: translateY(-2px); } +.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } +.button-small { min-height: 42px; padding-inline: 14px; border-radius: 12px; background: var(--text); color: var(--bg); } +.button-primary { + background: var(--accent); + color: #17120a; + box-shadow: 0 12px 34px rgba(245, 166, 35, .18), inset 0 1px 0 rgba(255,255,255,.32); +} +.button-primary:hover { box-shadow: 0 16px 40px rgba(245, 166, 35, .28), inset 0 1px 0 rgba(255,255,255,.32); } +.button-ghost { background: var(--surface-soft); color: var(--text); border-color: var(--line); } +.button-ghost:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-soft) 70%, var(--accent-soft)); } +.button-ghost svg { width: 18px; height: 18px; fill: currentColor; stroke: none; } + +.hero { + min-height: 820px; + padding-top: 178px; + padding-bottom: 94px; + display: grid; + grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); + align-items: center; + gap: clamp(40px, 7vw, 84px); +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + width: max-content; + max-width: 100%; + margin-bottom: 28px; + padding: 8px 11px; + border: 1px solid var(--line); + border-radius: 999px; + color: var(--muted); + background: var(--surface-soft); + font-size: 12px; + font-weight: 700; + text-decoration: none; +} +.eyebrow:hover { color: var(--text); border-color: var(--line-strong); } +.spark { color: var(--accent); } + +h1, h2, h3, p { margin-top: 0; } +h1 { + max-width: 720px; + margin-bottom: 26px; + font-size: clamp(56px, 7.1vw, 100px); + line-height: .92; + letter-spacing: -.068em; + font-weight: 830; +} +.accent-text { + color: transparent; + background: linear-gradient(118deg, var(--accent), var(--accent-2) 60%, #fff0bc); + -webkit-background-clip: text; + background-clip: text; +} +.hero-lede { + max-width: 670px; + margin-bottom: 14px; + color: var(--muted); + font-size: clamp(18px, 2vw, 21px); + line-height: 1.58; + letter-spacing: -.018em; +} +.hero-note { margin-bottom: 28px; color: var(--muted-2); font-size: 14px; } +.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } +.hero-actions.centered { justify-content: center; } + +.proof-row { + margin-top: 44px; + padding-top: 24px; + border-top: 1px solid var(--line); + display: grid; + grid-template-columns: repeat(4, minmax(0,1fr)); + gap: 18px; +} +.proof-row div { min-width: 0; } +.proof-row strong { display: block; margin-bottom: 4px; font-size: 24px; letter-spacing: -.04em; } +.proof-row span { display: block; max-width: 120px; color: var(--muted-2); font-size: 11px; line-height: 1.35; } + +.glass-panel { + border: 1px solid var(--line); + background: + linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-soft) 65%, transparent)); + box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); + backdrop-filter: blur(18px) saturate(130%); + -webkit-backdrop-filter: blur(18px) saturate(130%); +} + +.hero-demo { position: relative; } +.demo-window { + position: relative; + border-radius: 28px; + overflow: hidden; + transform: perspective(1100px) rotateY(-4deg) rotateX(2deg); + transform-origin: 50% 50%; +} +.demo-window::after { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 24%, transparent 72%, rgba(245,166,35,.04)); +} +.window-bar { + height: 52px; + padding: 0 15px; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + border-bottom: 1px solid var(--line); + background: color-mix(in srgb, var(--surface-strong) 65%, transparent); +} +.traffic { display: flex; gap: 6px; } +.traffic span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); } +.traffic span:first-child { background: #ff6b65; } +.traffic span:nth-child(2) { background: #f7bd4f; } +.traffic span:last-child { background: #59c96d; } +.window-title { color: var(--muted); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.status-dot { justify-self: end; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 10px; font-weight: 750; } +.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px currentColor; } + +.demo-grid { padding: 18px; display: grid; gap: 12px; } +.drop-card { + min-height: 96px; + padding: 18px; + border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line)); + border-radius: 18px; + display: flex; + align-items: center; + gap: 14px; + background: var(--accent-soft); +} +.drop-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 13px; color: var(--accent); background: rgba(245,166,35,.07); } +.drop-icon svg { width: 21px; } +.drop-card p { margin: 0; } +.drop-card strong, .drop-card span { display: block; } +.drop-card strong { margin-bottom: 4px; font-size: 13px; } +.drop-card span { color: var(--muted); font-size: 11px; } + +.file-list { display: grid; gap: 7px; } +.file-row { + min-height: 52px; + padding: 8px 10px; + border: 1px solid var(--line); + border-radius: 14px; + display: grid; + grid-template-columns: 36px 1fr auto; + align-items: center; + gap: 10px; + background: var(--surface-soft); +} +.file-type { width: 36px; height: 32px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 900; letter-spacing: .04em; } +.file-type.pdf { color: #ff8a8a; background: rgba(255,94,94,.12); } +.file-type.ppt { color: #ffae79; background: rgba(255,135,70,.12); } +.file-type.xls { color: #71d49e; background: rgba(70,190,125,.12); } +.file-row strong, .file-row span { display: block; } +.file-row strong { font-size: 11px; font-weight: 700; } +.file-row div span { margin-top: 2px; color: var(--muted-2); font-size: 9px; } +.file-state { color: var(--green); font-size: 9px; font-weight: 750; } + +.output-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--bg-soft) 84%, transparent); } +.output-head { height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); } +.quality-pill { padding: 5px 7px; border-radius: 999px; color: var(--green); background: rgba(118,217,167,.08); } +.output-card pre { min-height: 184px; margin: 0; padding: 15px; overflow: hidden; color: var(--muted); font: 500 10.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; } +.md-h { color: var(--accent-2); } +.md-v { color: var(--green); } +.output-stats { padding: 10px 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; } +.output-stats b { color: var(--text); font-size: 10px; } + +.floating-chip { + position: absolute; + z-index: 3; + padding: 9px 12px; + border: 1px solid var(--line-strong); + border-radius: 999px; + background: color-mix(in srgb, var(--surface-strong) 86%, transparent); + box-shadow: 0 12px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08); + backdrop-filter: blur(15px); + color: var(--muted); + font-size: 10px; + font-weight: 760; +} +.chip-a { top: 28%; right: -34px; animation: float 5s ease-in-out infinite; } +.chip-b { left: -28px; bottom: 13%; animation: float 6s ease-in-out -1.4s infinite; } +@keyframes float { 50% { transform: translateY(-9px); } } + +.ticker-wrap { border-block: 1px solid var(--line); overflow: hidden; background: var(--surface-soft); } +.ticker { width: max-content; min-width: 200%; height: 54px; display: flex; align-items: center; gap: 23px; animation: marquee 34s linear infinite; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; } +.ticker i { color: var(--accent); font-style: normal; } +@keyframes marquee { to { transform: translateX(-50%); } } + +.content-section { padding-top: 128px; padding-bottom: 36px; } +.section-heading { max-width: 790px; margin-bottom: 52px; } +.section-heading.split-heading { max-width: none; display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 60px; } +.section-heading.split-heading > p:last-child { margin-bottom: 8px; } +.section-kicker, .mini-label { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } +.section-kicker { margin-bottom: 16px; } +.section-heading h2, .oss-card h2 { + margin-bottom: 18px; + font-size: clamp(42px, 5.5vw, 72px); + line-height: .98; + letter-spacing: -.055em; + font-weight: 790; +} +.section-heading > p:last-child, .split-heading > p, .oss-card > p:not(.section-kicker) { color: var(--muted); font-size: 17px; line-height: 1.62; letter-spacing: -.012em; } + +.reason-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } +.reason-card { min-height: 330px; padding: 26px; border-radius: var(--radius-md); position: relative; overflow: hidden; } +.reason-card::after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(245,166,35,.12), transparent 68%); } +.card-number { position: absolute; top: 24px; right: 24px; color: var(--muted-2); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.card-icon { width: 48px; height: 48px; margin-bottom: 50px; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); } +.card-icon svg { width: 24px; } +.reason-card h3, .usecase-card h3, .step-card h3, .stack-card h3, .roadmap-callout h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.1; letter-spacing: -.035em; } +.reason-card p, .usecase-card p, .step-card p, .stack-card p, .roadmap-callout p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.62; } + +.token-compare { margin-top: 14px; padding: clamp(26px,4vw,46px); border-radius: var(--radius-lg); display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; } +.token-copy h3 { margin: 10px 0 14px; font-size: 34px; line-height: 1.02; letter-spacing: -.045em; } +.token-copy p { color: var(--muted); line-height: 1.6; } +.text-link { display: inline-flex; gap: 7px; align-items: center; margin-top: 7px; color: var(--text); font-size: 13px; font-weight: 760; text-decoration: none; } +.text-link:hover { color: var(--accent); } +.bar-compare { display: grid; gap: 26px; } +.bar-meta { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 9px; } +.bar-meta span { color: var(--muted); font-size: 12px; } +.bar-meta strong { font-size: 15px; letter-spacing: -.02em; } +.bar-track { height: 34px; padding: 4px; border-radius: 11px; background: var(--surface-soft); border: 1px solid var(--line); overflow: hidden; } +.bar-track span { display: block; width: var(--bar); height: 100%; border-radius: 7px; transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.75,.2,1); } +.token-compare.in-view .bar-track span { transform: scaleX(1); } +.raw .bar-track span { background: linear-gradient(90deg, #777, #a6a6a1); } +.clean .bar-track span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 25px rgba(245,166,35,.24); } +.bar-saving { justify-self: end; display: flex; align-items: baseline; gap: 7px; } +.bar-saving strong { color: var(--accent); font-size: 34px; letter-spacing: -.04em; } +.bar-saving span { color: var(--muted-2); font-size: 11px; } + +.usecase-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } +.usecase-card { min-height: 310px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .25s ease, transform .25s ease; } +.usecase-card:hover { background: var(--surface-soft); } +.use-icon { width: 48px; height: 48px; margin-bottom: 54px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line); color: var(--text); background: var(--surface-soft); font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.tag-row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; } +.tag-row span { padding: 6px 8px; border-radius: 999px; color: var(--muted-2); background: var(--surface-soft); font-size: 9px; font-weight: 700; } + +.format-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } +.format-card { min-height: 98px; padding: 15px; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); transition: transform .2s ease, border-color .2s ease, background .2s ease; } +.format-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: color-mix(in srgb, var(--surface-soft) 80%, var(--accent-soft)); } +.format-logo { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.format-logo.pdf { color: #ff8585; background: rgba(255,95,95,.10); } +.format-logo.doc { color: #7fafff; background: rgba(85,135,255,.10); } +.format-logo.ppt { color: #ff9a72; background: rgba(255,125,65,.10); } +.format-logo.xls { color: #6ed09b; background: rgba(60,185,115,.10); } +.format-logo.html { color: #d998ff; background: rgba(177,104,255,.10); } +.format-logo.csv { color: #7fd2cf; background: rgba(78,190,184,.10); } +.format-logo.json { color: #e5c96e; background: rgba(224,190,70,.10); } +.format-logo.txt { color: #b7b7b1; background: rgba(180,180,180,.08); } +.format-logo.img { color: #f0a9d4; background: rgba(230,120,190,.10); } +.format-card h3 { margin: 0 0 4px; font-size: 14px; letter-spacing: -.02em; } +.format-card p { margin: 0; color: var(--muted-2); font-size: 10px; } +.format-ext { color: var(--muted-2); font: 600 9.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; } +.roadmap-format a { justify-self: end; color: var(--accent); font-size: 10px; font-weight: 750; text-decoration: none; } + +.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } +.step-card { min-height: 420px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); } +.step-index { display: block; margin-bottom: 18px; color: var(--muted-2); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.step-visual { height: 190px; margin-bottom: 28px; border: 1px solid var(--line); border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(145deg, var(--surface-soft), transparent); } +.step-visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 12%, transparent) .8px, transparent .8px); background-size: 12px 12px; opacity: .25; } +.upload-visual { display: grid; place-items: center; } +.upload-visual > svg { position: absolute; width: 31px; color: var(--accent); } +.mini-file { position: absolute; width: 58px; height: 72px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); box-shadow: 0 10px 28px rgba(0,0,0,.16); } +.mini-file span { font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.mini-file i { display: block; width: 28px; height: 3px; margin-top: 22px; border-radius: 2px; background: var(--line-strong); box-shadow: 0 8px var(--line-strong), 0 16px var(--line-strong); } +.mini-file:nth-child(1) { left: 12%; top: 26%; transform: rotate(-8deg); } +.mini-file:nth-child(2) { right: 12%; top: 23%; transform: rotate(8deg); } +.mini-file:nth-child(3) { left: 50%; bottom: -24px; transform: translateX(-50%) rotate(2deg); } +.pipeline-visual { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; } +.pipeline-visual span { position: relative; z-index: 1; padding: 10px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-strong); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.pipeline-visual i { position: relative; z-index: 1; color: var(--accent); font-style: normal; } +.output-visual { display: grid; place-items: center; } +.code-lines { position: relative; z-index: 1; width: 64%; display: grid; gap: 8px; } +.code-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-strong); } +.code-lines i:nth-child(2) { width: 76%; background: color-mix(in srgb, var(--accent) 50%, var(--line)); } +.code-lines i:nth-child(3) { width: 92%; } +.code-lines i:nth-child(4) { width: 58%; } +.code-lines i:nth-child(5) { width: 82%; } +.output-visual > span { position: absolute; z-index: 2; right: 17%; bottom: 20px; padding: 7px 9px; border-radius: 9px; background: var(--accent); color: #17120a; font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 8px 20px rgba(245,166,35,.16); } + +.stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } +.stack-card { min-height: 300px; padding: 30px; border-radius: var(--radius-md); } +.stack-top { margin-bottom: 70px; display: flex; justify-content: space-between; align-items: center; } +.stack-icon { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 20px; font-weight: 900; } +.stack-icon.python { color: var(--accent); background: var(--accent-soft); } +.stack-role { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } +.tech-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 7px; } +.tech-row span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 700; } + +.architecture { margin-top: 14px; padding: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: 10px; overflow-x: auto; scrollbar-width: none; } +.architecture::-webkit-scrollbar { display:none; } +.arch-node { min-width: 148px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); } +.arch-node span, .arch-node strong, .arch-node small { display: block; } +.arch-node span { margin-bottom: 27px; color: var(--muted-2); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } +.arch-node strong { margin-bottom: 5px; font-size: 14px; } +.arch-node small { color: var(--muted-2); font-size: 9px; } +.accent-node { border-color: rgba(245,166,35,.26); background: var(--accent-soft); } +.arch-arrow { flex: 0 0 auto; color: var(--muted-2); font-style: normal; } + +.roadmap-callout { margin-top: 14px; padding: 30px; border: 1px solid rgba(245,166,35,.22); border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; gap: 32px; background: linear-gradient(100deg, var(--accent-soft), transparent 66%); } +.roadmap-callout h3 { margin: 9px 0 7px; } +.roadmap-callout p { max-width: 690px; } + +.open-source { padding-top: 128px; padding-bottom: 80px; } +.oss-card { position: relative; overflow: hidden; padding: 76px 40px; border: 1px solid var(--line); border-radius: 40px; text-align: center; background: linear-gradient(145deg, var(--surface), var(--surface-soft)); box-shadow: var(--shadow); } +.oss-card::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -380px; transform: translateX(-50%); border-radius: 50%; background: var(--accent); filter: blur(100px); opacity: .16; pointer-events: none; } +.oss-mark { width: 88px; height: 88px; margin: 0 auto 24px; padding: 2px; border-radius: 26px; box-shadow: 0 18px 50px rgba(0,0,0,.24); } +.oss-mark img { width: 100%; height: 100%; border-radius: 24px; } +.oss-card h2 { max-width: 780px; margin-inline: auto; } +.oss-card > p:not(.section-kicker) { max-width: 680px; margin-inline: auto; } +.oss-card .hero-actions { margin-top: 28px; } +.oss-links { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } +.oss-links a { color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; } +.oss-links a:hover { color: var(--text); } + +.site-footer { min-height: 120px; padding: 26px 0 112px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; color: var(--muted-2); font-size: 11px; } +.site-footer p { margin: 0; text-align: center; } +.site-footer p a { color: var(--muted); text-decoration: none; } +.footer-brand { color: var(--text); } + +.mobile-dock-wrap { display: none; } + +.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1); } +.reveal.in-view { opacity: 1; transform: none; } +.delay-1 { transition-delay: .08s; } +.delay-2 { transition-delay: .16s; } + +@media (max-width: 1080px) { + .glass-nav { grid-template-columns: 1fr auto; } + .nav-links { display: none; } + .hero { grid-template-columns: 1fr 440px; gap: 38px; } + h1 { font-size: clamp(54px, 7vw, 76px); } + .proof-row { grid-template-columns: repeat(2,1fr); } +} + +@media (max-width: 860px) { + :root { --radius-lg: 27px; } + .section-shell { width: min(calc(100% - 28px), var(--max)); } + .site-header { top: 10px; } + .glass-nav { width: calc(100% - 20px); min-height: 58px; padding: 7px 8px 7px 11px; border-radius: 20px; } + .nav-github, .icon-button { display: none; } + .nav-actions { gap: 0; } + .button-small { min-height: 40px; } + .hero { min-height: auto; padding-top: 130px; grid-template-columns: 1fr; gap: 52px; } + .hero-copy { max-width: 720px; } + .hero-demo { max-width: 600px; width: 100%; margin-inline: auto; } + .demo-window { transform: none; } + .chip-a { right: -8px; } + .chip-b { left: -8px; } + .reason-grid, .usecase-grid, .workflow-grid { grid-template-columns: 1fr 1fr; } + .usecase-grid { border: 0; gap: 10px; } + .usecase-card { border: 1px solid var(--line); border-radius: 18px; } + .format-grid { grid-template-columns: 1fr 1fr; } + .token-compare { grid-template-columns: 1fr; gap: 34px; } + .section-heading.split-heading { grid-template-columns: 1fr; gap: 10px; } + .stack-grid { grid-template-columns: 1fr; } + .roadmap-callout { align-items: flex-start; flex-direction: column; } + .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; padding-bottom: 120px; } + + .mobile-dock-wrap { + position: fixed; + z-index: 120; + left: 0; + right: 0; + bottom: 0; + display: block; + padding: 8px 10px max(10px, env(safe-area-inset-bottom)); + pointer-events: none; + } + .mobile-dock { + --lens-x: 6px; + --lens-w: 20%; + position: relative; + width: min(100%, 500px); + height: 68px; + margin: auto; + padding: 6px; + display: grid; + grid-template-columns: repeat(5,1fr); + gap: 2px; + border: 1px solid var(--line-strong); + border-radius: 25px; + overflow: hidden; + isolation: isolate; + pointer-events: auto; + background: + radial-gradient(circle at var(--dock-x, 50%) -20%, rgba(255,255,255,.14), transparent 38%), + linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 82%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)); + box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.13); + backdrop-filter: blur(24px) saturate(155%); + -webkit-backdrop-filter: blur(24px) saturate(155%); + transition: height .35s cubic-bezier(.2,.8,.2,1), border-radius .35s ease; + } + .mobile-dock::after { + content: ""; + position: absolute; + inset: 1px; + border-radius: 23px; + z-index: 6; + pointer-events: none; + box-shadow: inset 1px 1px 1px rgba(255,255,255,.13), inset -1px -1px 1px rgba(0,0,0,.16); + } + .mobile-lens { + position: absolute; + z-index: 1; + left: 0; + top: 6px; + width: var(--lens-w); + height: 56px; + border-radius: 19px; + transform: translateX(var(--lens-x)); + border: 1px solid color-mix(in srgb, var(--line-strong) 70%, var(--accent) 12%); + background: linear-gradient(160deg, rgba(255,255,255,.08), var(--accent-soft)); + box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 22px rgba(0,0,0,.12); + transition: transform .42s cubic-bezier(.18,.9,.25,1.18), width .42s cubic-bezier(.18,.9,.25,1.18), height .35s ease, top .35s ease; + } + .mobile-item { + position: relative; + z-index: 3; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + min-width: 0; + border-radius: 18px; + color: var(--muted-2); + text-decoration: none; + transition: color .2s ease, transform .2s ease; + } + .mobile-item svg { width: 20px; height: 20px; } + .mobile-item span { font-size: 8.5px; font-weight: 760; } + .mobile-item.is-active { color: var(--text); } + .mobile-item:active { transform: scale(.94); } + .mobile-dock.compact { height: 56px; border-radius: 22px; } + .mobile-dock.compact .mobile-lens { top: 5px; height: 46px; border-radius: 16px; } + .mobile-dock.compact .mobile-item span { display: none; } +} + +@media (max-width: 620px) { + .section-shell { width: min(calc(100% - 22px), var(--max)); } + .brand span { font-size: 13px; } + .brand img { width: 31px; height: 31px; } + .glass-nav .button-small { font-size: 12px; padding: 0 12px; } + .hero { padding-top: 122px; padding-bottom: 64px; } + h1 { font-size: clamp(50px, 15vw, 70px); } + .hero-lede { font-size: 17px; } + .hero-actions .button { width: 100%; } + .proof-row { gap: 14px 8px; } + .proof-row strong { font-size: 22px; } + .proof-row span { font-size: 10px; } + .hero-demo { width: calc(100% + 4px); margin-left: -2px; } + .demo-grid { padding: 12px; } + .window-title { display: none; } + .window-bar { grid-template-columns: 1fr 1fr; } + .status-dot { justify-self: end; } + .floating-chip { display: none; } + .ticker { height: 48px; } + .content-section { padding-top: 100px; } + .section-heading { margin-bottom: 36px; } + .section-heading h2, .oss-card h2 { font-size: clamp(40px, 12vw, 55px); } + .section-heading > p:last-child, .split-heading > p, .oss-card > p:not(.section-kicker) { font-size: 15px; } + .reason-grid, .usecase-grid, .workflow-grid, .format-grid { grid-template-columns: 1fr; } + .reason-card { min-height: 290px; } + .card-icon { margin-bottom: 40px; } + .usecase-card { min-height: 280px; } + .use-icon { margin-bottom: 40px; } + .format-card { min-height: 88px; } + .token-compare { padding: 24px 18px; } + .bar-meta { align-items: center; } + .bar-meta strong { font-size: 13px; } + .step-card { min-height: 390px; } + .stack-card { min-height: 280px; padding: 24px; } + .stack-top { margin-bottom: 54px; } + .architecture { padding: 18px; } + .arch-node { min-width: 132px; } + .roadmap-callout { padding: 24px; } + .roadmap-callout .button { width: 100%; } + .oss-card { padding: 58px 20px; border-radius: 28px; } + .oss-card .hero-actions { width: 100%; } + .oss-card .button { width: 100%; } +} + +@media (hover: hover) and (pointer: fine) { + .glass-panel, .step-card, .format-card, .usecase-card { will-change: transform; } +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { + animation-duration: .001ms !important; + animation-iteration-count: 1 !important; + transition-duration: .001ms !important; + scroll-behavior: auto !important; + } + .reveal { opacity: 1; transform: none; } +}