anycoder-1e40a6ca / index.html
VortexHunter23's picture
Upload folder using huggingface_hub
2e3f5e5 verified
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NebulaForge DataCenter — Petabyte-Scale LLM Data Infrastructure</title>
<meta name="description" content="NebulaForge is a next‑gen datacenter providing secure, high‑throughput pipelines for LLM training, fine‑tuning, and inference data. Multi‑region, S3‑compatible, vector DBs, and enterprise‑grade privacy." />
<meta name="theme-color" content="#0b0f1a" />
<meta property="og:title" content="NebulaForge DataCenter — Petabyte-Scale LLM Data Infrastructure" />
<meta property="og:description" content="Secure, high‑throughput pipelines for LLM training, fine‑tuning, and inference data. Multi‑region storage, vector databases, and privacy by design." />
<meta property="og:type" content="website" />
<meta property="og:image" content="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='630'><rect width='100%' height='100%' fill='%230b0f1a'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='%23ffffff' font-family='Inter,Segoe UI,Arial' font-size='64'>NebulaForge DataCenter</text></svg>" />
<style>
/* ========== Modern CSS Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ========== Theme Variables ========== */
:root {
--brand: #7c3aed; /* violet */
--brand-2: #06b6d4; /* cyan */
--brand-3: #22c55e; /* green */
--bg: #0b0f1a;
--bg-elev: #101626;
--bg-soft: #0f1424;
--text: #e8ecf3;
--muted: #aab3c7;
--border: rgba(255,255,255,.08);
--glass: rgba(255,255,255,.06);
--shadow-1: 0 10px 30px rgba(0,0,0,.35);
--shadow-2: 0 20px 60px rgba(0,0,0,.45);
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 24px;
--container: min(1200px, 92vw);
--header-h: 72px;
}
[data-theme="light"] {
--bg: #f6f8fb;
--bg-elev: #ffffff;
--bg-soft: #f0f3f9;
--text: #0d1220;
--muted: #4b556b;
--border: rgba(0,0,0,.08);
--glass: rgba(255,255,255,.7);
--shadow-1: 0 8px 24px rgba(0,0,0,.1);
--shadow-2: 0 18px 48px rgba(0,0,0,.12);
}
/* ========== Global Styles ========== */
body {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background: radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
radial-gradient(900px 700px at 100% 0%, rgba(6,182,212,.12), transparent 60%),
linear-gradient(180deg, var(--bg), var(--bg));
min-height: 100%;
overflow-x: hidden;
}
.container { width: var(--container); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 120px) 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ========== Header ========== */
header {
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(140%) blur(10px);
background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
border-bottom: 1px solid var(--border);
}
.nav {
height: var(--header-h);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px;
}
.brand .logo {
width: 34px; height: 34px; border-radius: 10px;
background: conic-gradient(from 210deg, var(--brand), var(--brand-2), var(--brand-3), var(--brand));
position: relative; box-shadow: 0 10px 30px rgba(124,58,237,.35), inset 0 0 40px rgba(255,255,255,.06);
}
.brand small { color: var(--muted); font-weight: 600; font-size: 12px; }
nav ul { display: flex; gap: 20px; list-style: none; }
nav a { color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
nav a:hover { color: var(--text); background: var(--glass); }
.nav-ctas { justify-self: end; display: flex; gap: 10px; align-items: center; }
.btn {
border: 1px solid var(--border);
background: var(--glass);
color: var(--text);
padding: 10px 14px; border-radius: 12px; font-weight: 700;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn-primary {
background: linear-gradient(135deg, var(--brand), var(--brand-2));
border: 1px solid transparent;
color: white;
}
.btn-ghost { background: transparent; }
.theme-toggle {
width: 44px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px;
background: var(--glass); border: 1px solid var(--border);
}
.hamburger { display: none; width: 44px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--glass); align-items: center; justify-content: center; }
.hamburger span { width: 20px; height: 2px; background: var(--text); position: relative; display: block; }
.hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text); }
.hamburger span::before { top: -6px; }
.hamburger span::after { top: 6px; }
@media (max-width: 1024px) {
nav { display: none; }
.hamburger { display: inline-flex; }
.nav { grid-template-columns: auto auto 1fr; }
.nav-ctas { justify-self: end; }
}
.mobile-menu {
display: none;
position: fixed; inset: var(--header-h) 0 auto 0; z-index: 40;
background: linear-gradient(180deg, var(--bg-elev), var(--bg));
border-bottom: 1px solid var(--border);
padding: 12px var(--container);
}
.mobile-menu ul { display: grid; gap: 10px; list-style: none; }
.mobile-menu a { display: block; padding: 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--border); font-weight: 600; color: var(--text); }
/* ========== Hero ========== */
.hero {
position: relative;
padding-top: clamp(20px, 4vw, 60px);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute; inset: -20% -10% auto -10%; height: 600px;
background:
radial-gradient(600px 280px at 20% 50%, rgba(124,58,237,.25), transparent 60%),
radial-gradient(500px 240px at 80% 40%, rgba(6,182,212,.25), transparent 60%);
filter: blur(20px);
pointer-events: none;
}
.hero-grid {
display: grid; gap: 32px;
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
}
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; }
}
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--border);
color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-3); box-shadow: 0 0 10px var(--brand-3); }
.hero h1 {
font-size: clamp(34px, 6vw, 60px);
line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 10px;
}
.hero p.lead {
font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); max-width: 60ch;
}
.typed { color: transparent; }
.typed > span { color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.subnote { color: var(--muted); font-size: 13px; margin-top: 8px; }
.trust {
display: flex; gap: 18px; align-items: center; margin-top: 28px; color: var(--muted); font-weight: 600; flex-wrap: wrap;
}
.trust-logos { display: flex; gap: 12px; flex-wrap: wrap; }
.trust .badge {
padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass);
display: inline-flex; align-items: center; gap: 8px; color: var(--text);
}
.hero-card {
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 16px; box-shadow: var(--shadow-2); position: relative; overflow: hidden;
}
.hero-card .api {
background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
color: #d5e2ff; font-size: 14px; position: relative;
}
.api .copy {
position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border);
background: var(--glass); color: var(--muted); font-weight: 700;
}
.api pre { margin-top: 8px; white-space: pre-wrap; }
.stats {
display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px;
}
.stat {
background: var(--glass); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
}
.stat b { font-size: 18px; }
.stat small { color: var(--muted); display: block; margin-top: 4px; }
/* ========== Features ========== */
.features .card, .solutions .card {
background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.features .card:hover, .solutions .card:hover {
transform: translateY(-2px);
border-color: rgba(124,58,237,.35);
background: linear-gradient(180deg, rgba(124,58,237,.08), transparent);
}
.icon {
width: 42px; height: 42px; border-radius: 10px;
display: grid; place-items: center; margin-bottom: 10px;
background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(6,182,212,.25));
border: 1px solid var(--border);
}
.features h3, .solutions h3 { margin: 6px 0; font-size: 20px; }
.features p, .solutions p { color: var(--muted); }
/* ========== Solutions ========== */
.solutions .pill {
display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
padding: 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--border); color: var(--muted);
}
/* ========== Pricing ========== */
.pricing .plan {
background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 24px; position: relative; overflow: hidden; transition: transform .2s ease, border-color .2s ease;
}
.pricing .plan:hover { transform: translateY(-3px); border-color: rgba(124,58,237,.35); }
.plan.featured {
background: linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.10));
border: 1px solid rgba(124,58,237,.35);
}
.price { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0; }
.price small { color: var(--muted); font-size: 14px; font-weight: 600; }
.features-list { margin: 14px 0; display: grid; gap: 8px; }
.features-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; color: var(--text); }
.features-list svg { color: var(--brand-3); margin-top: 2px; }
/* ========== Security ========== */
.cert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
.cert {
padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass);
display: grid; gap: 6px; place-items: center; text-align: center; color: var(--muted); font-weight: 700;
}
.cert svg { width: 26px; height: 26px; color: var(--brand); }
/* ========== Contact Form ========== */
.form {
background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px;
}
.form .row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
label { font-weight: 700; font-size: 14px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
border-radius: 12px; padding: 12px; transition: border-color .2s ease, background .2s ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(124,58,237,.55); outline: none; background: var(--bg-elev); }
.helper { color: var(--muted); font-size: 12px; }
.success { display: none; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(34,197,94,.45); color: #d1fae5; background: rgba(34,197,94,.15); border-radius: 12px; }
/* ========== Footer ========== */
footer { border-top: 1px solid var(--border); background: linear-gradient(0deg, var(--bg-elev), transparent); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.copyright { color: var(--muted); }
/* ========== Reveal Animations ========== */
.reveal { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
.btn, .plan, .features .card { transition: none; }
}
/* ========== Utilities ========== */
.muted { color: var(--muted); }
.spacer { height: 16px; }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.pill { padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--glass); }
.nowrap { white-space: nowrap; }
.tag { font-size: 12px; font-weight: 700; color: var(--muted); }
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container nav">
<a class="brand" href="#">
<span class="logo" aria-hidden="true"></span>
<span>NebulaForge DataCenter</span>
<small>LLM Data Infrastructure</small>
</a>
<nav aria-label="Primary">
<ul>
<li><a href="#solutions">Solutions</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="nav-ctas">
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme" title="Toggle theme">
<svg id="iconMoon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z"/></svg>
<svg id="iconSun" style="display:none" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.76 4.84l-1.8-1.79L3.17 4.84l1.79 1.79 1.8-1.79zM1 13h3v-2H1v2zm10 10h2v-3h-2v3zM4.22 19.78l1.79-1.79-1.8-1.8-1.79 1.8 1.8 1.79zM20 1h-2v3h2V1zm-1.76 3.05l-1.79 1.79 1.79 1.79 1.8-1.79-1.8-1.79zM12 6a6 6 0 100 12A6 6 0 0012 6zm7 12.95l-1.8-1.79-1.79 1.79 1.79 1.8 1.8-1.8zM12 1h-2v3h2V1z"/></svg>
</button>
<a class="btn btn-ghost" href="#docs">Docs</a>
<a class="btn btn-primary" href="#contact">Get started</a>
<button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span>
</button>
</div>
</div>
<div class="mobile-menu" id="mobileMenu" role="dialog" aria-label="Mobile menu">
<ul>
<li><a href="#solutions">Solutions</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#security">Security</a></li>
<li><a href="#contact">Contact</a></li>
<li><a class="btn btn-primary" href="#contact">Get started</a></li>
</ul>
</div>
</header>
<!-- Hero -->
<section class="hero section">
<div class="container hero-grid">
<div class="reveal">
<span class="eyebrow"><span class="dot"></span> Petabyte-scale • Multi-region • S3-compatible</span>
<h1>
The datacenter built to serve
<span class="typed"><span id="typed"></span></span>
</h1>
<p class="lead">
NebulaForge provides secure, high‑throughput pipelines for LLM training, fine‑tuning, and inference data. Store, version, and serve billions of tokens with enterprise‑grade privacy and SLAs.
</p>
<div class="cta-row">
<a class="btn btn-primary" href="#contact">Talk to an engineer</a>
<a class="btn" href="#docs">Explore docs</a>
</div>
<div class="trust">
<span>Trusted by teams at</span>
<div class="trust-logos" aria-label="Trusted logos">
<span class="badge">OpenAI‑compatible APIs</span>
<span class="badge">Anthropic‑ready</span>
<span class="badge">Azure • AWS • GCP</span>
<span class="badge">Self‑hosted agents</span>
</div>
</div>
</div>
<div class="hero-card reveal" aria-label="API preview">
<div class="api">
<button class="copy" id="copyAPI">Copy</button>
<div class="tag">curl • ingest</div>
<pre id="apiCode">curl -X POST https://api.nebulaforge.ai/v1/ingest \
-H "Authorization: Bearer $NEBULA_TOKEN" \
-F "dataset=@/path/to/corpus.parquet" \
-F "deduplicate=true" \
-F "hash_col=id" \
-F "lang=en"</pre>
</div>
<div class="stats">
<div class="stat">
<b>5.6 PB</b>
<small>Active datasets</small>
</div>
<div class="stat">
<b>12 ms</b>
<small>P95 vector latency</small>
</div>
<div class="stat">
<b>99.99%</b>
<small>Availability SLA</small>
</div>
</div>
</div>
</div>
</section>
<!-- Solutions -->
<section id="solutions" class="section">
<div class="container">
<div class="reveal" style="display:flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap;">
<div>
<span class="eyebrow">Solutions</span>
<h2 style="font-size: clamp(26px, 3.6vw, 38px); margin-top: 8px;">Everything you need to ship LLM products</h2>
<p class="muted" style="margin-top: 8px; max-width: 60ch;">From raw data to serving billions of embeddings, NebulaForge unifies storage, processing, and delivery for LLM workloads.</p>
</div>
<a class="btn" href="#pricing">View pricing</a>
</div>
<div class="spacer"></div>
<div class="solutions grid grid-3">
<div class="card reveal">
<span class="pill">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h2v8H3v-8zm4-3h2v11H7V10zm4-6h2v17h-2V4zm4 8h2v9h-2v-9zm4-4h2v13h-2V8z"/></svg>
Ingest & Deduplicate
</span>
<h3>Streaming ETL for LLMs</h3>
<p>Schema-aware ingestion with on‑the‑fly language detection, PII redaction, canonicalization, and exact/近似 deduplication.</p>
<div class="spacer"></div>
<ul class="features-list">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>
LangDetect + FastText
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>
MinHash + SimHash
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>
PII scrub (NER)
</li>
</ul>
</div>
<div class="card reveal">
<span class="pill">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l4 4-4 4-4-4 4-4zm0 6l4 4-4 4-4-4 4-4zm0 6l4 4-4 4-4-4 4-4z"/></svg>
Vector DB + RAG
</span>
<h3>Low‑latency vector search</h3>
<p>Multi‑tenant vector DB with HNSW/IVF, hybrid keyword + semantic search, and streaming updates for agentic RAG.</p>
<div class="spacer"></div>
<ul class="features-list">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>1B+ vectors</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>Hybrid search</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>Streaming upserts</li>
</ul>
</div>
<div class="card reveal">
<span class="pill">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h16v6H4V4zm0 8h10v8H4v-8z"/></svg>
S3‑compatible store
</span>
<h3>Durable, versioned object storage</h3>
<p>Immutable snapshots, bucket versioning, lifecycle policies, and geo‑replication for training corpora and checkpoints.</p>
<div class="spacer"></div>
<ul class="features-list">
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>11x9s durability</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>Multi‑region</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88L3.7 13.71 9 19l12-12-1.41-1.41z"/></svg>Lifecycle + KMS</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="section">
<div class="container">
<div class="reveal">
<span class="eyebrow">Features</span>
<h2 style="font-size: clamp(26px, 3.6vw, 38px); margin-top: 8px;">Built for scale, security, and velocity</h2>
</div>
<div class="spacer"></div>
<div class="features grid grid-4">
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
</div>
<h3>High‑throughput pipelines</h3>
<p>Sharded, fault‑tolerant workers with backpressure and retries. 20 GB/s per rack sustained.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1l9 4v6c0 5-3.8 9.7-9 11-5.2-1.3-9-6-9-11V5l9-4zm0 6a3 3 0 100 6 3 3 0 000-6z"/></svg>
</div>
<h3>Privacy & compliance</h3>
<p>SOC 2 Type II, ISO 27001, GDPR DPA. Region pinning and per‑tenant KMS keys.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M3 3h18v2H3V3zm2 4h14v2H5V7zm-2 4h18v2H3v-2zm2 4h14v2H5v-2zm-2 4h18v2H3v-2z"/></svg>
</div>
<h3>Global edge caching</h3>
<p>Multi‑CDN with signed URLs and smart cache keys to accelerate fine‑tuning and inference I/O.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h2v8H3v-8zm4-6h2v14H7V7zm4-3h2v17h-2V4zm4 8h2v9h-2v-9zm4-4h2v13h-2V8z"/></svg>
</div>
<h3>Observability</h3>
<p>Per‑pipeline metrics, token‑aware cost tracing, and data lineage for governance.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3l10 6-10 6L2 9l10-6zm0 8l10 6-10 6-10-6 10-6z"/></svg>
</div>
<h3>Synthetic data</h3>
<p>Rule‑guided generation with safety filters and eval‑ready feedback loops.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm0 6h10v10H4V10zm12 0h4v10h-4V10z"/></svg>
</div>
<h3>Data curation suite</h3>
<p>Active learning, clustering, dedup, and domain filters. Export to DPO formats.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10.011 10.011 0 0012 2zm1 15h-2v-2h2zm0-4h-2V7h2z"/></svg>
</div>
<h3>Security first</h3>
<p>Private networking, per‑dataset ACLs, field‑level encryption, and tamper‑evident logs.</p>
</div>
<div class="card reveal">
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" view