| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Spread — pay nothing unless you save</title>
|
| 7 |
<style>
|
| 8 |
/* self-hosted, subset — no external font CDN */
|
| 9 |
@font-face { font-family:'Iosevka'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/iosevka-latin-400-normal.woff2') format('woff2'); }
|
| 10 |
@font-face { font-family:'Iosevka'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/iosevka-latin-500-normal.woff2') format('woff2'); }
|
| 11 |
@font-face { font-family:'Iosevka'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/iosevka-latin-600-normal.woff2') format('woff2'); }
|
| 12 |
@font-face { font-family:'Iosevka'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/iosevka-latin-400-italic.woff2') format('woff2'); }
|
| 13 |
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
|
| 14 |
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
|
| 15 |
|
| 16 |
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
| 17 |
|
| 18 |
:root {
|
| 19 |
--bg: #0a0a0c;
|
| 20 |
--surface: #131316;
|
| 21 |
--surface-raised: #18181c;
|
| 22 |
--surface-highlight: #1e1e22;
|
| 23 |
--border: #2a2a2e;
|
| 24 |
--border-strong: #3a3a40;
|
| 25 |
--text: #f5f4f0;
|
| 26 |
--text-secondary: #a8a6a0;
|
| 27 |
--text-tertiary: #6a6864;
|
| 28 |
--green: #5dd39e;
|
| 29 |
--green-dim: #1f3a2c;
|
| 30 |
--green-bg: #11201a;
|
| 31 |
--red: #ff8a7a;
|
| 32 |
--red-bg: #2a1410;
|
| 33 |
--serif: 'Iosevka', ui-monospace, monospace;
|
| 34 |
--sans: 'IBM Plex Sans', system-ui, sans-serif;
|
| 35 |
--mono: 'Iosevka', ui-monospace, monospace;
|
| 36 |
}
|
| 37 |
|
| 38 |
html, body { background: var(--bg); color: var(--text); }
|
| 39 |
body {
|
| 40 |
font-family: var(--sans);
|
| 41 |
min-height: 100vh;
|
| 42 |
-webkit-font-smoothing: antialiased;
|
| 43 |
line-height: 1.6;
|
| 44 |
}
|
| 45 |
|
| 46 |
a { color: inherit; text-decoration: none; }
|
| 47 |
|
| 48 |
/* NAV */
|
| 49 |
nav {
|
| 50 |
display: flex;
|
| 51 |
align-items: center;
|
| 52 |
justify-content: space-between;
|
| 53 |
padding: 1.25rem 2.5rem;
|
| 54 |
border-bottom: 0.5px solid var(--border);
|
| 55 |
position: sticky;
|
| 56 |
top: 0;
|
| 57 |
background: rgba(10, 10, 12, 0.85);
|
| 58 |
backdrop-filter: blur(10px);
|
| 59 |
z-index: 10;
|
| 60 |
}
|
| 61 |
.nav-logo {
|
| 62 |
display: flex;
|
| 63 |
align-items: baseline;
|
| 64 |
gap: 8px;
|
| 65 |
font-family: var(--serif);
|
| 66 |
font-size: 22px;
|
| 67 |
font-weight: 500;
|
| 68 |
letter-spacing: -0.5px;
|
| 69 |
}
|
| 70 |
.nav-logo .dot { color: var(--green); font-size: 14px; }
|
| 71 |
.nav-links { display: flex; align-items: center; gap: 2.5rem; }
|
| 72 |
.nav-links a {
|
| 73 |
font-size: 13px;
|
| 74 |
color: var(--text-secondary);
|
| 75 |
transition: color 0.15s;
|
| 76 |
}
|
| 77 |
.nav-links a:hover { color: var(--text); }
|
| 78 |
.nav-cta {
|
| 79 |
font-family: var(--sans);
|
| 80 |
font-size: 13px;
|
| 81 |
padding: 8px 18px;
|
| 82 |
background: var(--text);
|
| 83 |
color: var(--bg);
|
| 84 |
border: none;
|
| 85 |
border-radius: 100px;
|
| 86 |
cursor: pointer;
|
| 87 |
font-weight: 500;
|
| 88 |
}
|
| 89 |
.nav-right { display: flex; align-items: center; gap: 1.5rem; }
|
| 90 |
.nav-login { font-size: 13px; color: var(--text-secondary); transition: color 0.15s; }
|
| 91 |
.nav-login:hover { color: var(--text); }
|
| 92 |
|
| 93 |
/* HERO */
|
| 94 |
.hero {
|
| 95 |
max-width: 900px;
|
| 96 |
margin: 0 auto;
|
| 97 |
padding: 6rem 2.5rem 3rem;
|
| 98 |
text-align: center;
|
| 99 |
}
|
| 100 |
.hero-eyebrow {
|
| 101 |
display: inline-flex;
|
| 102 |
align-items: center;
|
| 103 |
gap: 8px;
|
| 104 |
font-family: var(--mono);
|
| 105 |
font-size: 11px;
|
| 106 |
text-transform: uppercase;
|
| 107 |
letter-spacing: 2px;
|
| 108 |
color: var(--text-tertiary);
|
| 109 |
margin-bottom: 2rem;
|
| 110 |
padding: 5px 14px 5px 12px;
|
| 111 |
border: 0.5px solid var(--border);
|
| 112 |
border-radius: 100px;
|
| 113 |
}
|
| 114 |
.hero-eyebrow::before {
|
| 115 |
content: '';
|
| 116 |
width: 6px; height: 6px;
|
| 117 |
background: var(--green);
|
| 118 |
border-radius: 50%;
|
| 119 |
box-shadow: 0 0 10px var(--green);
|
| 120 |
}
|
| 121 |
h1 {
|
| 122 |
font-family: var(--serif);
|
| 123 |
font-size: 60px;
|
| 124 |
font-weight: 600;
|
| 125 |
line-height: 1.05;
|
| 126 |
letter-spacing: -2px;
|
| 127 |
margin-bottom: 1.5rem;
|
| 128 |
color: var(--text);
|
| 129 |
}
|
| 130 |
h1 .crossed {
|
| 131 |
position: relative;
|
| 132 |
color: var(--text-tertiary);
|
| 133 |
}
|
| 134 |
h1 .crossed::after {
|
| 135 |
content: '';
|
| 136 |
position: absolute;
|
| 137 |
left: -4px;
|
| 138 |
right: -4px;
|
| 139 |
top: 52%;
|
| 140 |
height: 3px;
|
| 141 |
background: var(--red);
|
| 142 |
transform: rotate(-3deg);
|
| 143 |
border-radius: 2px;
|
| 144 |
}
|
| 145 |
h1 em {
|
| 146 |
font-style: italic;
|
| 147 |
color: var(--green);
|
| 148 |
}
|
| 149 |
.hero-sub {
|
| 150 |
font-family: var(--serif);
|
| 151 |
font-size: 22px;
|
| 152 |
font-weight: 400;
|
| 153 |
color: var(--text-secondary);
|
| 154 |
line-height: 1.4;
|
| 155 |
max-width: 600px;
|
| 156 |
margin: 0 auto 2.5rem;
|
| 157 |
font-style: italic;
|
| 158 |
letter-spacing: -0.3px;
|
| 159 |
}
|
| 160 |
.hero-actions {
|
| 161 |
display: flex;
|
| 162 |
gap: 12px;
|
| 163 |
justify-content: center;
|
| 164 |
flex-wrap: wrap;
|
| 165 |
margin-bottom: 3rem;
|
| 166 |
}
|
| 167 |
.btn-primary {
|
| 168 |
font-family: var(--sans);
|
| 169 |
font-size: 14px;
|
| 170 |
padding: 13px 28px;
|
| 171 |
background: var(--green);
|
| 172 |
color: #061a12;
|
| 173 |
border: none;
|
| 174 |
border-radius: 100px;
|
| 175 |
cursor: pointer;
|
| 176 |
font-weight: 500;
|
| 177 |
}
|
| 178 |
.btn-secondary {
|
| 179 |
font-family: var(--sans);
|
| 180 |
font-size: 14px;
|
| 181 |
padding: 13px 28px;
|
| 182 |
background: transparent;
|
| 183 |
color: var(--text);
|
| 184 |
border: 0.5px solid var(--border-strong);
|
| 185 |
border-radius: 100px;
|
| 186 |
cursor: pointer;
|
| 187 |
}
|
| 188 |
.hero-trust {
|
| 189 |
font-family: var(--mono);
|
| 190 |
font-size: 11px;
|
| 191 |
text-transform: uppercase;
|
| 192 |
letter-spacing: 2px;
|
| 193 |
color: var(--text-tertiary);
|
| 194 |
}
|
| 195 |
.hero-trust .green { color: var(--green); }
|
| 196 |
|
| 197 |
/* SECTIONS */
|
| 198 |
.section {
|
| 199 |
max-width: 900px;
|
| 200 |
margin: 0 auto;
|
| 201 |
padding: 4rem 2.5rem;
|
| 202 |
border-top: 0.5px solid var(--border);
|
| 203 |
}
|
| 204 |
.section-label {
|
| 205 |
font-family: var(--mono);
|
| 206 |
font-size: 11px;
|
| 207 |
text-transform: uppercase;
|
| 208 |
letter-spacing: 2px;
|
| 209 |
color: var(--text-tertiary);
|
| 210 |
margin-bottom: 0.75rem;
|
| 211 |
text-align: center;
|
| 212 |
}
|
| 213 |
.section-headline {
|
| 214 |
font-family: var(--serif);
|
| 215 |
font-size: 34px;
|
| 216 |
font-weight: 600;
|
| 217 |
letter-spacing: -0.5px;
|
| 218 |
margin-bottom: 3rem;
|
| 219 |
text-align: center;
|
| 220 |
line-height: 1.15;
|
| 221 |
}
|
| 222 |
.section-headline em {
|
| 223 |
font-style: italic;
|
| 224 |
color: var(--green);
|
| 225 |
}
|
| 226 |
|
| 227 |
/* STEPS */
|
| 228 |
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
| 229 |
.step {
|
| 230 |
background: var(--surface-raised);
|
| 231 |
border: 0.5px solid var(--border);
|
| 232 |
border-radius: 12px;
|
| 233 |
padding: 1.75rem;
|
| 234 |
position: relative;
|
| 235 |
}
|
| 236 |
.step-num {
|
| 237 |
font-family: var(--serif);
|
| 238 |
font-size: 40px;
|
| 239 |
font-weight: 600;
|
| 240 |
color: var(--green);
|
| 241 |
line-height: 1;
|
| 242 |
margin-bottom: 1rem;
|
| 243 |
letter-spacing: -1px;
|
| 244 |
}
|
| 245 |
.step h3 {
|
| 246 |
font-family: var(--sans);
|
| 247 |
font-size: 17px;
|
| 248 |
font-weight: 500;
|
| 249 |
color: var(--text);
|
| 250 |
margin-bottom: 8px;
|
| 251 |
letter-spacing: -0.2px;
|
| 252 |
}
|
| 253 |
.step p {
|
| 254 |
font-size: 14px;
|
| 255 |
color: var(--text-secondary);
|
| 256 |
line-height: 1.55;
|
| 257 |
}
|
| 258 |
|
| 259 |
/* UPLOAD / DROPZONE */
|
| 260 |
.dropzone {
|
| 261 |
border: 1px dashed var(--border-strong);
|
| 262 |
border-radius: 12px;
|
| 263 |
padding: 1.5rem;
|
| 264 |
display: flex;
|
| 265 |
align-items: center;
|
| 266 |
justify-content: space-between;
|
| 267 |
gap: 1rem;
|
| 268 |
margin-bottom: 14px;
|
| 269 |
background: var(--surface);
|
| 270 |
transition: border-color 0.15s, background 0.15s;
|
| 271 |
flex-wrap: wrap;
|
| 272 |
}
|
| 273 |
.dropzone.drag { border-color: var(--green); background: var(--green-bg); }
|
| 274 |
.dropzone .dz-copy { font-size: 13.5px; color: var(--text-secondary); }
|
| 275 |
.dropzone .dz-copy b { color: var(--text); font-weight: 500; }
|
| 276 |
.dropzone .dz-copy .hint { display: block; font-family: var(--mono); font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
|
| 277 |
.dropzone .dz-actions { display: flex; gap: 10px; flex-wrap: wrap; }
|
| 278 |
.dz-link {
|
| 279 |
font-family: var(--mono);
|
| 280 |
font-size: 11px;
|
| 281 |
color: var(--text-tertiary);
|
| 282 |
text-transform: uppercase;
|
| 283 |
letter-spacing: 1px;
|
| 284 |
align-self: center;
|
| 285 |
border-bottom: 0.5px solid var(--border-strong);
|
| 286 |
cursor: pointer;
|
| 287 |
}
|
| 288 |
.dz-link:hover { color: var(--text-secondary); }
|
| 289 |
.banner {
|
| 290 |
border-radius: 10px;
|
| 291 |
padding: 10px 14px;
|
| 292 |
margin-bottom: 14px;
|
| 293 |
font-size: 13px;
|
| 294 |
display: none;
|
| 295 |
}
|
| 296 |
.banner.error { display: block; background: var(--red-bg); color: var(--red); border: 0.5px solid #4a2018; }
|
| 297 |
|
| 298 |
/* SUPPLIER MARQUEE */
|
| 299 |
.marquee-wrap { max-width: 1100px; margin: 0 auto; padding: 0.5rem 0 3.5rem; }
|
| 300 |
.marquee-label {
|
| 301 |
font-family: var(--mono);
|
| 302 |
font-size: 11px;
|
| 303 |
text-transform: uppercase;
|
| 304 |
letter-spacing: 2px;
|
| 305 |
color: var(--text-tertiary);
|
| 306 |
text-align: center;
|
| 307 |
margin-bottom: 1.5rem;
|
| 308 |
}
|
| 309 |
.logo-marquee {
|
| 310 |
position: relative;
|
| 311 |
overflow: hidden;
|
| 312 |
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
|
| 313 |
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
|
| 314 |
}
|
| 315 |
.logo-track {
|
| 316 |
display: flex;
|
| 317 |
width: max-content;
|
| 318 |
animation: logo-scroll 46s linear infinite;
|
| 319 |
}
|
| 320 |
.logo-marquee:hover .logo-track { animation-play-state: paused; }
|
| 321 |
.logo-row { display: flex; align-items: center; }
|
| 322 |
.logo-card {
|
| 323 |
display: flex;
|
| 324 |
align-items: center;
|
| 325 |
justify-content: center;
|
| 326 |
margin: 0 7px;
|
| 327 |
height: 54px;
|
| 328 |
padding: 0 26px;
|
| 329 |
background: transparent;
|
| 330 |
}
|
| 331 |
.logo-card img {
|
| 332 |
height: 22px;
|
| 333 |
width: auto;
|
| 334 |
max-width: 128px;
|
| 335 |
object-fit: contain;
|
| 336 |
display: block;
|
| 337 |
/* full brand color on a transparent chip; the few black-ink marks
|
| 338 |
(Vercel, Automattic, Sentry, AWS, NVIDIA, Whop) are recolored to
|
| 339 |
near-white in their SVGs so nothing vanishes on the dark page */
|
| 340 |
opacity: 0.85;
|
| 341 |
transition: opacity 0.2s;
|
| 342 |
}
|
| 343 |
.logo-card:hover img { opacity: 1; }
|
| 344 |
@keyframes logo-scroll {
|
| 345 |
from { transform: translateX(0); }
|
| 346 |
to { transform: translateX(-50%); }
|
| 347 |
}
|
| 348 |
@media (prefers-reduced-motion: reduce) {
|
| 349 |
.logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
|
| 350 |
.logo-marquee { -webkit-mask-image: none; mask-image: none; }
|
| 351 |
.logo-row[aria-hidden="true"] { display: none; }
|
| 352 |
}
|
| 353 |
|
| 354 |
/* BOM TABLE */
|
| 355 |
.bom-wrapper {
|
| 356 |
background: var(--surface-raised);
|
| 357 |
border: 0.5px solid var(--border);
|
| 358 |
border-radius: 12px;
|
| 359 |
overflow: hidden;
|
| 360 |
transition: opacity 0.2s;
|
| 361 |
}
|
| 362 |
.bom-wrapper.busy { opacity: 0.45; pointer-events: none; }
|
| 363 |
.bom-header {
|
| 364 |
padding: 1rem 1.4rem;
|
| 365 |
border-bottom: 0.5px solid var(--border);
|
| 366 |
display: flex;
|
| 367 |
justify-content: space-between;
|
| 368 |
align-items: center;
|
| 369 |
background: var(--surface-highlight);
|
| 370 |
}
|
| 371 |
.bom-header .title {
|
| 372 |
font-family: var(--mono);
|
| 373 |
font-size: 12px;
|
| 374 |
color: var(--text-secondary);
|
| 375 |
}
|
| 376 |
.bom-header .title .dim { color: var(--text-tertiary); }
|
| 377 |
.bom-header .meta {
|
| 378 |
font-family: var(--mono);
|
| 379 |
font-size: 11px;
|
| 380 |
color: var(--text-tertiary);
|
| 381 |
display: flex;
|
| 382 |
align-items: center;
|
| 383 |
gap: 8px;
|
| 384 |
}
|
| 385 |
.bom-header .meta::before {
|
| 386 |
content: '';
|
| 387 |
width: 7px; height: 7px;
|
| 388 |
background: var(--green);
|
| 389 |
border-radius: 50%;
|
| 390 |
box-shadow: 0 0 8px var(--green);
|
| 391 |
}
|
| 392 |
table {
|
| 393 |
width: 100%;
|
| 394 |
border-collapse: collapse;
|
| 395 |
font-family: var(--mono);
|
| 396 |
font-size: 12.5px;
|
| 397 |
}
|
| 398 |
thead th {
|
| 399 |
text-align: left;
|
| 400 |
padding: 12px 14px;
|
| 401 |
font-family: var(--mono);
|
| 402 |
font-size: 10px;
|
| 403 |
text-transform: uppercase;
|
| 404 |
letter-spacing: 1.5px;
|
| 405 |
color: var(--text-tertiary);
|
| 406 |
font-weight: 500;
|
| 407 |
border-bottom: 0.5px solid var(--border);
|
| 408 |
background: var(--surface);
|
| 409 |
}
|
| 410 |
thead th.num { text-align: right; }
|
| 411 |
tbody td {
|
| 412 |
padding: 14px 14px;
|
| 413 |
border-bottom: 0.5px solid var(--border);
|
| 414 |
color: var(--text-secondary);
|
| 415 |
}
|
| 416 |
tbody td.part {
|
| 417 |
color: var(--text);
|
| 418 |
font-family: var(--sans);
|
| 419 |
font-size: 13.5px;
|
| 420 |
}
|
| 421 |
tbody td.part .pn {
|
| 422 |
display: block;
|
| 423 |
font-family: var(--mono);
|
| 424 |
font-size: 11px;
|
| 425 |
color: var(--text-tertiary);
|
| 426 |
margin-top: 2px;
|
| 427 |
}
|
| 428 |
tbody td.part .pn .est {
|
| 429 |
color: var(--text-tertiary);
|
| 430 |
opacity: 0.7;
|
| 431 |
}
|
| 432 |
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
|
| 433 |
tbody td.market {
|
| 434 |
color: var(--text-tertiary);
|
| 435 |
text-decoration: line-through;
|
| 436 |
text-decoration-color: var(--text-tertiary);
|
| 437 |
}
|
| 438 |
tbody td.ours { color: var(--text); font-weight: 500; }
|
| 439 |
tbody td.save { color: var(--green); font-weight: 500; }
|
| 440 |
tbody td.save.zero { color: var(--text-tertiary); font-weight: 400; }
|
| 441 |
tbody tr:last-child td { border-bottom: none; }
|
| 442 |
.bom-totals {
|
| 443 |
display: grid;
|
| 444 |
grid-template-columns: repeat(3, 1fr);
|
| 445 |
border-top: 0.5px solid var(--border);
|
| 446 |
background: var(--surface);
|
| 447 |
}
|
| 448 |
.bom-totals .cell {
|
| 449 |
padding: 1.25rem 1.4rem;
|
| 450 |
border-right: 0.5px solid var(--border);
|
| 451 |
}
|
| 452 |
.bom-totals .cell:last-child { border-right: none; }
|
| 453 |
.bom-totals .cell .label {
|
| 454 |
font-family: var(--mono);
|
| 455 |
font-size: 10px;
|
| 456 |
text-transform: uppercase;
|
| 457 |
letter-spacing: 1.5px;
|
| 458 |
color: var(--text-tertiary);
|
| 459 |
margin-bottom: 6px;
|
| 460 |
}
|
| 461 |
.bom-totals .cell .value {
|
| 462 |
font-family: var(--serif);
|
| 463 |
font-size: 24px;
|
| 464 |
font-weight: 500;
|
| 465 |
letter-spacing: -0.5px;
|
| 466 |
font-variant-numeric: tabular-nums;
|
| 467 |
}
|
| 468 |
.bom-totals .cell.savings .value { color: var(--green); }
|
| 469 |
.bom-totals .cell .sub {
|
| 470 |
font-family: var(--mono);
|
| 471 |
font-size: 11px;
|
| 472 |
color: var(--text-tertiary);
|
| 473 |
margin-top: 2px;
|
| 474 |
}
|
| 475 |
|
| 476 |
/* PRICING */
|
| 477 |
.pricing-card {
|
| 478 |
background: linear-gradient(180deg, var(--green-bg) 0%, var(--surface-raised) 80%);
|
| 479 |
border: 0.5px solid var(--green-dim);
|
| 480 |
border-radius: 16px;
|
| 481 |
padding: 3rem 2.5rem;
|
| 482 |
text-align: center;
|
| 483 |
}
|
| 484 |
.pricing-card .big {
|
| 485 |
font-family: var(--serif);
|
| 486 |
font-size: 84px;
|
| 487 |
font-weight: 600;
|
| 488 |
color: var(--green);
|
| 489 |
line-height: 1;
|
| 490 |
letter-spacing: -3px;
|
| 491 |
margin-bottom: 0.5rem;
|
| 492 |
}
|
| 493 |
.pricing-card .big-sub {
|
| 494 |
font-family: var(--serif);
|
| 495 |
font-size: 26px;
|
| 496 |
font-style: italic;
|
| 497 |
color: var(--text);
|
| 498 |
margin-bottom: 1.5rem;
|
| 499 |
letter-spacing: -0.5px;
|
| 500 |
}
|
| 501 |
.pricing-card .fine {
|
| 502 |
font-family: var(--sans);
|
| 503 |
font-size: 15px;
|
| 504 |
color: var(--text-secondary);
|
| 505 |
max-width: 500px;
|
| 506 |
margin: 0 auto;
|
| 507 |
line-height: 1.55;
|
| 508 |
}
|
| 509 |
|
| 510 |
/* PHILOSOPHY */
|
| 511 |
.philosophy {
|
| 512 |
display: grid;
|
| 513 |
grid-template-columns: repeat(3, 1fr);
|
| 514 |
gap: 14px;
|
| 515 |
}
|
| 516 |
.principle {
|
| 517 |
background: var(--surface-raised);
|
| 518 |
border: 0.5px solid var(--border);
|
| 519 |
border-radius: 12px;
|
| 520 |
padding: 1.5rem;
|
| 521 |
}
|
| 522 |
.principle .mark {
|
| 523 |
font-family: var(--serif);
|
| 524 |
font-size: 18px;
|
| 525 |
font-weight: 500;
|
| 526 |
color: var(--green);
|
| 527 |
margin-bottom: 0.5rem;
|
| 528 |
letter-spacing: -0.3px;
|
| 529 |
font-style: italic;
|
| 530 |
}
|
| 531 |
.principle h4 {
|
| 532 |
font-family: var(--sans);
|
| 533 |
font-size: 15px;
|
| 534 |
font-weight: 500;
|
| 535 |
margin-bottom: 6px;
|
| 536 |
}
|
| 537 |
.principle p {
|
| 538 |
font-size: 13.5px;
|
| 539 |
color: var(--text-secondary);
|
| 540 |
line-height: 1.55;
|
| 541 |
}
|
| 542 |
|
| 543 |
/* FOOTER */
|
| 544 |
footer {
|
| 545 |
max-width: 900px;
|
| 546 |
margin: 3rem auto 0;
|
| 547 |
padding: 4rem 2.5rem;
|
| 548 |
border-top: 0.5px solid var(--border);
|
| 549 |
text-align: center;
|
| 550 |
}
|
| 551 |
footer h2 {
|
| 552 |
font-family: var(--serif);
|
| 553 |
font-size: 40px;
|
| 554 |
font-weight: 600;
|
| 555 |
letter-spacing: -1px;
|
| 556 |
margin-bottom: 1rem;
|
| 557 |
line-height: 1.1;
|
| 558 |
}
|
| 559 |
footer h2 em { font-style: italic; color: var(--green); }
|
| 560 |
footer p {
|
| 561 |
font-size: 16px;
|
| 562 |
color: var(--text-secondary);
|
| 563 |
margin-bottom: 2rem;
|
| 564 |
max-width: 480px;
|
| 565 |
margin-left: auto;
|
| 566 |
margin-right: auto;
|
| 567 |
}
|
| 568 |
.footer-meta {
|
| 569 |
margin-top: 4rem;
|
| 570 |
padding-top: 2rem;
|
| 571 |
border-top: 0.5px solid var(--border);
|
| 572 |
display: flex;
|
| 573 |
justify-content: space-between;
|
| 574 |
align-items: center;
|
| 575 |
font-family: var(--mono);
|
| 576 |
font-size: 11px;
|
| 577 |
color: var(--text-tertiary);
|
| 578 |
}
|
| 579 |
|
| 580 |
@media (max-width: 760px) {
|
| 581 |
h1 { font-size: 34px; letter-spacing: -1px; }
|
| 582 |
.hero-sub { font-size: 18px; }
|
| 583 |
.section-headline { font-size: 26px; }
|
| 584 |
.steps, .philosophy { grid-template-columns: 1fr; }
|
| 585 |
.pricing-card .big { font-size: 60px; }
|
| 586 |
.bom-totals { grid-template-columns: 1fr; }
|
| 587 |
.bom-totals .cell { border-right: none; border-bottom: 0.5px solid var(--border); }
|
| 588 |
.bom-totals .cell:last-child { border-bottom: none; }
|
| 589 |
nav { padding: 1rem 1.25rem; }
|
| 590 |
.nav-links { display: none; }
|
| 591 |
.hero, .section, footer { padding-left: 1.25rem; padding-right: 1.25rem; }
|
| 592 |
footer h2 { font-size: 30px; }
|
| 593 |
.dropzone { flex-direction: column; align-items: flex-start; }
|
| 594 |
/* hide some columns on mobile */
|
| 595 |
table thead th:nth-child(3),
|
| 596 |
table tbody td:nth-child(3) { display: none; }
|
| 597 |
}
|
| 598 |
</style>
|
| 599 |
</head>
|
| 600 |
<body>
|
| 601 |
|
| 602 |
<nav>
|
| 603 |
<div class="nav-logo">Spread<span class="dot">●</span></div>
|
| 604 |
<div class="nav-links">
|
| 605 |
<a href="#how">How it works</a>
|
| 606 |
<a href="#example">Example</a>
|
| 607 |
<a href="#pricing">Pricing</a>
|
| 608 |
</div>
|
| 609 |
<div class="nav-right">
|
| 610 |
<a href="/login" class="nav-login">Log in</a>
|
| 611 |
<button class="nav-cta" data-upload>Upload a BOM →</button>
|
| 612 |
</div>
|
| 613 |
</nav>
|
| 614 |
|
| 615 |
<section class="hero">
|
| 616 |
<div class="hero-eyebrow">For manufacturers · By a parts guy</div>
|
| 617 |
<h1>Not <span class="crossed">SaaS</span>.<br>Just <em>software</em>.</h1>
|
| 618 |
<p class="hero-sub">If you don't save money,<br>we don't earn any.</p>
|
| 619 |
<div class="hero-actions">
|
| 620 |
<button class="btn-primary" data-upload>Upload your BOM →</button>
|
| 621 |
<button class="btn-secondary" data-example>See an example</button>
|
| 622 |
</div>
|
| 623 |
<div class="hero-trust">
|
| 624 |
No subscription · No setup fee · <span class="green">20%</span> of savings — that's it
|
| 625 |
</div>
|
| 626 |
</section>
|
| 627 |
|
| 628 |
<div class="marquee-wrap">
|
| 629 |
<div class="marquee-label">Trusted by teams at</div>
|
| 630 |
<div class="logo-marquee" aria-label="Company logos">
|
| 631 |
<div class="logo-track">
|
| 632 |
<div class="logo-row">
|
| 633 |
<div class="logo-card"><img src="/assets/company-logos/jetbrains.svg" alt="JetBrains" loading="lazy"></div>
|
| 634 |
<div class="logo-card"><img src="/assets/company-logos/docker.svg" alt="Docker" loading="lazy"></div>
|
| 635 |
<div class="logo-card"><img src="/assets/company-logos/vercel.svg" alt="Vercel" loading="lazy"></div>
|
| 636 |
<div class="logo-card"><img src="/assets/company-logos/sentry.svg" alt="Sentry" loading="lazy"></div>
|
| 637 |
<div class="logo-card"><img src="/assets/company-logos/google.svg" alt="Google" loading="lazy"></div>
|
| 638 |
<div class="logo-card"><img src="/assets/company-logos/nvidia.svg" alt="NVIDIA" loading="lazy"></div>
|
| 639 |
<div class="logo-card"><img src="/assets/company-logos/aws.svg" alt="AWS" loading="lazy"></div>
|
| 640 |
<div class="logo-card"><img src="/assets/company-logos/bytedance.svg" alt="ByteDance" loading="lazy"></div>
|
| 641 |
<div class="logo-card"><img src="/assets/company-logos/tencent.svg" alt="Tencent" loading="lazy"></div>
|
| 642 |
<div class="logo-card"><img src="/assets/company-logos/alibaba.svg" alt="Alibaba" loading="lazy"></div>
|
| 643 |
<div class="logo-card"><img src="/assets/company-logos/salesforce.svg" alt="Salesforce" loading="lazy"></div>
|
| 644 |
<div class="logo-card"><img src="/assets/company-logos/ibm.svg" alt="IBM" loading="lazy"></div>
|
| 645 |
<div class="logo-card"><img src="/assets/company-logos/atlassian.svg" alt="Atlassian" loading="lazy"></div>
|
| 646 |
<div class="logo-card"><img src="/assets/company-logos/whop.svg" alt="Whop" loading="lazy"></div>
|
| 647 |
<div class="logo-card"><img src="/assets/company-logos/automattic.svg" alt="Automattic" loading="lazy"></div>
|
| 648 |
</div>
|
| 649 |
<div class="logo-row" aria-hidden="true">
|
| 650 |
<div class="logo-card"><img src="/assets/company-logos/jetbrains.svg" alt="" loading="lazy"></div>
|
| 651 |
<div class="logo-card"><img src="/assets/company-logos/docker.svg" alt="" loading="lazy"></div>
|
| 652 |
<div class="logo-card"><img src="/assets/company-logos/vercel.svg" alt="" loading="lazy"></div>
|
| 653 |
<div class="logo-card"><img src="/assets/company-logos/sentry.svg" alt="" loading="lazy"></div>
|
| 654 |
<div class="logo-card"><img src="/assets/company-logos/google.svg" alt="" loading="lazy"></div>
|
| 655 |
<div class="logo-card"><img src="/assets/company-logos/nvidia.svg" alt="" loading="lazy"></div>
|
| 656 |
<div class="logo-card"><img src="/assets/company-logos/aws.svg" alt="" loading="lazy"></div>
|
| 657 |
<div class="logo-card"><img src="/assets/company-logos/bytedance.svg" alt="" loading="lazy"></div>
|
| 658 |
<div class="logo-card"><img src="/assets/company-logos/tencent.svg" alt="" loading="lazy"></div>
|
| 659 |
<div class="logo-card"><img src="/assets/company-logos/alibaba.svg" alt="" loading="lazy"></div>
|
| 660 |
<div class="logo-card"><img src="/assets/company-logos/salesforce.svg" alt="" loading="lazy"></div>
|
| 661 |
<div class="logo-card"><img src="/assets/company-logos/ibm.svg" alt="" loading="lazy"></div>
|
| 662 |
<div class="logo-card"><img src="/assets/company-logos/atlassian.svg" alt="" loading="lazy"></div>
|
| 663 |
<div class="logo-card"><img src="/assets/company-logos/whop.svg" alt="" loading="lazy"></div>
|
| 664 |
<div class="logo-card"><img src="/assets/company-logos/automattic.svg" alt="" loading="lazy"></div>
|
| 665 |
</div>
|
| 666 |
</div>
|
| 667 |
</div>
|
| 668 |
</div>
|
| 669 |
|
| 670 |
<section class="section" id="how">
|
| 671 |
<div class="section-label">How it works</div>
|
| 672 |
<h2 class="section-headline">Three steps. <em>That's the whole thing.</em></h2>
|
| 673 |
<div class="steps">
|
| 674 |
<div class="step">
|
| 675 |
<div class="step-num">01</div>
|
| 676 |
<h3>Upload your BOM</h3>
|
| 677 |
<p>Drop in a CSV or Excel file of your bill of materials. Any format your engineers already use.</p>
|
| 678 |
</div>
|
| 679 |
<div class="step">
|
| 680 |
<div class="step-num">02</div>
|
| 681 |
<h3>We re-quote every line</h3>
|
| 682 |
<p>Each part is cross-referenced against our supplier network. You see the market price, our price, and what you save — line by line.</p>
|
| 683 |
</div>
|
| 684 |
<div class="step">
|
| 685 |
<div class="step-num">03</div>
|
| 686 |
<h3>You only pay if you save</h3>
|
| 687 |
<p>If the total savings is zero, our invoice is zero. If you save, we keep 20% of what you saved. Nothing else.</p>
|
| 688 |
</div>
|
| 689 |
</div>
|
| 690 |
</section>
|
| 691 |
|
| 692 |
<section class="section" id="example">
|
| 693 |
<div class="section-label">Live example</div>
|
| 694 |
<h2 class="section-headline">Drop in a BOM. <em>See it re-quoted.</em></h2>
|
| 695 |
|
| 696 |
<div class="dropzone" id="dropzone">
|
| 697 |
<div class="dz-copy">
|
| 698 |
<b>Drop a BOM here</b> or choose a file to re-quote it live.
|
| 699 |
<span class="hint">.csv or .xlsx · columns: part number, description, qty, unit price</span>
|
| 700 |
</div>
|
| 701 |
<div class="dz-actions">
|
| 702 |
<button class="btn-primary" data-upload>Choose file →</button>
|
| 703 |
<button class="btn-secondary" data-example>Try the example</button>
|
| 704 |
</div>
|
| 705 |
</div>
|
| 706 |
|
| 707 |
<div class="banner error" id="error-banner"></div>
|
| 708 |
|
| 709 |
<div class="bom-wrapper" id="bom-wrapper">
|
| 710 |
<div class="bom-header">
|
| 711 |
<div class="title" id="bom-title">example-bom <span class="dim">· 5 parts</span></div>
|
| 712 |
<div class="meta" id="bom-meta">analysis complete</div>
|
| 713 |
</div>
|
| 714 |
|
| 715 |
<table>
|
| 716 |
<thead>
|
| 717 |
<tr>
|
| 718 |
<th>Part</th>
|
| 719 |
<th class="num">Qty</th>
|
| 720 |
<th class="num">Market</th>
|
| 721 |
<th class="num">Spread price</th>
|
| 722 |
<th class="num">You save</th>
|
| 723 |
</tr>
|
| 724 |
</thead>
|
| 725 |
<tbody id="bom-body">
|
| 726 |
<tr><td class="part" colspan="5" style="color:var(--text-tertiary)">Loading example…</td></tr>
|
| 727 |
</tbody>
|
| 728 |
</table>
|
| 729 |
|
| 730 |
<div class="bom-totals">
|
| 731 |
<div class="cell">
|
| 732 |
<div class="label">Total savings</div>
|
| 733 |
<div class="value" id="t-savings">—</div>
|
| 734 |
<div class="sub">vs current market</div>
|
| 735 |
</div>
|
| 736 |
<div class="cell">
|
| 737 |
<div class="label">Our cut (20%)</div>
|
| 738 |
<div class="value" id="t-cut">—</div>
|
| 739 |
<div class="sub">invoiced on delivery</div>
|
| 740 |
</div>
|
| 741 |
<div class="cell savings">
|
| 742 |
<div class="label">Your net savings</div>
|
| 743 |
<div class="value" id="t-net">—</div>
|
| 744 |
<div class="sub">cash in your pocket</div>
|
| 745 |
</div>
|
| 746 |
</div>
|
| 747 |
</div>
|
| 748 |
|
| 749 |
<div style="text-align:center;margin-top:14px">
|
| 750 |
<a class="dz-link" href="/example-bom.csv" download>Download the example BOM (.csv)</a>
|
| 751 |
</div>
|
| 752 |
</section>
|
| 753 |
|
| 754 |
<section class="section" id="pricing">
|
| 755 |
<div class="section-label">Pricing</div>
|
| 756 |
<h2 class="section-headline">One line. <em>No fine print.</em></h2>
|
| 757 |
<div class="pricing-card">
|
| 758 |
<div class="big">20%</div>
|
| 759 |
<div class="big-sub">of what you save. <span style="color: var(--text-tertiary);">Otherwise $0.</span></div>
|
| 760 |
<p class="fine">No monthly fee. No seat license. No setup cost. No usage tier. If the BOM you upload can't be sourced cheaper than what you're paying today, your invoice is zero and we move on. Every dollar Spread bills is a dollar you'd never have seen otherwise.</p>
|
| 761 |
</div>
|
| 762 |
</section>
|
| 763 |
|
| 764 |
<section class="section">
|
| 765 |
<div class="section-label">Why Spread</div>
|
| 766 |
<h2 class="section-headline">Aligned on one thing. <em>Your bottom line.</em></h2>
|
| 767 |
<div class="philosophy">
|
| 768 |
<div class="principle">
|
| 769 |
<div class="mark">No subscription</div>
|
| 770 |
<h4>We don't bill if you don't save</h4>
|
| 771 |
<p>Every other procurement tool charges a seat license whether it works or not. Ours only earns when you do.</p>
|
| 772 |
</div>
|
| 773 |
<div class="principle">
|
| 774 |
<div class="mark">Transparent margin</div>
|
| 775 |
<h4>You see what we keep</h4>
|
| 776 |
<p>Our cut is printed on every line. No hidden markup, no mystery quote, no broker games. Just numbers.</p>
|
| 777 |
</div>
|
| 778 |
<div class="principle">
|
| 779 |
<div class="mark">Real suppliers</div>
|
| 780 |
<h4>Quotes we can actually honor</h4>
|
| 781 |
<p>Every price in the system comes from suppliers we have accounts with. If we quote it, we can deliver it.</p>
|
| 782 |
</div>
|
| 783 |
</div>
|
| 784 |
</section>
|
| 785 |
|
| 786 |
<footer>
|
| 787 |
<h2>Spend ten minutes.<br>See what <em>your BOM</em> is hiding.</h2>
|
| 788 |
<p>Upload your bill of materials. We re-quote it against our supplier network on the spot — line by line, no commitment.</p>
|
| 789 |
<button class="btn-primary" style="font-size: 15px; padding: 14px 32px;" data-upload>Upload your BOM →</button>
|
| 790 |
|
| 791 |
<div class="footer-meta">
|
| 792 |
<span>Spread · made for makers</span>
|
| 793 |
<span>not SaaS · just software</span>
|
| 794 |
</div>
|
| 795 |
</footer>
|
| 796 |
|
| 797 |
<input type="file" id="file-input" accept=".csv,.tsv,.txt,.xlsx" hidden>
|
| 798 |
<script src="app.js"></script>
|
| 799 |
</body>
|
| 800 |
</html>
|