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 0000000..b9cc4f7 Binary files /dev/null and b/assets/mdify-icon.png differ 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; } +}