:root {
  --bg: #0d0e12;
  --panel: #13151b;
  --panel-2: #171a21;
  --line: rgba(255,255,255,.1);
  --muted: #969aa8;
  --text: #f1f0ea;
  --blue: #8ab4ff;
  --green: #9ce4bd;
  --purple: #c5afff;
  --orange: #ffb47e;
  --cyan: #8fdce5;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope, system-ui, sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.shell { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 5; 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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .18; }
.orb-a { width: 420px; height: 420px; top: 20px; right: -130px; background: #294d8f; }
.orb-b { width: 350px; height: 350px; top: 560px; left: -180px; background: #653383; opacity: .1; }
.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 26px 0; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.logo em { color: var(--muted); font-style: normal; font-weight: 500; }
.logo-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #7f93bd; border-radius: 8px; color: var(--blue); font-size: 21px; transform: rotate(-9deg); }
nav { display: flex; align-items: center; gap: 27px; color: var(--muted); font-size: 12px; }
nav a { transition: color .2s ease; } nav a:hover { color: var(--text); }
.nav-cta { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); } .nav-cta span { color: var(--blue); margin-left: 6px; }
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 112px 0 112px; }
.eyebrow { color: var(--blue); font: 500 10px/1.3 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.pulse, .tiny-dot, .live-badge i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7fe0a8; box-shadow: 0 0 0 4px rgba(127,224,168,.1); vertical-align: middle; margin-right: 7px; }
h1, h2, p { margin-top: 0; } h1 { margin: 19px 0 23px; font-size: clamp(48px, 6.3vw, 86px); line-height: .99; letter-spacing: -.075em; font-weight: 700; } h1 span, h2 span { color: #7f9fd8; }
.hero-lede { max-width: 490px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; gap: 11px; margin: 30px 0 27px; } .button { display: inline-flex; align-items: center; gap: 23px; border-radius: 7px; padding: 13px 16px; font-size: 12px; font-weight: 700; transition: transform .2s ease, background .2s ease; } .button:hover { transform: translateY(-2px); }
.button-primary { background: #e9ecf6; color: #11131a; } .button-primary:hover { background: #fff; } .button-quiet { border: 1px solid var(--line); color: var(--muted); } .button-quiet:hover { color: var(--text); }
.hero-note { color: #777c8a; font-size: 10px; } .lock { color: var(--purple); margin-right: 6px; }
.hero-console { box-shadow: 0 25px 90px rgba(0,0,0,.35); border: 1px solid rgba(159,178,228,.2); border-radius: 11px; background: linear-gradient(145deg, rgba(35,41,55,.85), rgba(15,17,23,.9)); overflow: hidden; transform: rotate(1.5deg); }
.console-top, .console-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--line); color: #697185; font: 10px "DM Mono", monospace; } .console-top i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #6d7280; } .console-top b { color: var(--green); font-size: 9px; font-weight: 500; }
.console-body { padding: 25px 20px 16px; font: 11px/1.8 "DM Mono", monospace; } .console-line { color: #c9ccda; } .console-line.muted { color: #8c91a1; } .line-no { display: inline-block; width: 28px; color: #4c5363; } .tag { color: var(--orange); font-size: 9px; margin-right: 10px; } .tag.blue { color: var(--blue); } .tag.purple { color: var(--purple); } .console-divider { height: 1px; margin: 18px 0; background: var(--line); }
.console-answer { display: flex; gap: 13px; padding: 16px; border: 1px solid rgba(138,180,255,.2); border-radius: 6px; background: rgba(138,180,255,.06); } .answer-mark { color: var(--blue); font-size: 19px; } .console-answer small { display: block; margin-bottom: 5px; color: var(--blue); font-size: 8px; letter-spacing: .1em; } .console-answer strong { display: block; color: #eef1fb; font: 500 13px Manrope, sans-serif; } .console-answer p { margin: 5px 0 0; color: #9da5b9; font: 10px/1.6 "DM Mono", monospace; }
.console-footer { border: 0; padding-top: 19px; } .console-footer .tiny-dot { width: 5px; height: 5px; margin-right: 5px; }
.proof-strip { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr) 1.2fr; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .proof-label, .proof-source { color: #797e8d; font-size: 10px; line-height: 1.6; } .proof-stat { border-left: 1px solid var(--line); padding-left: 20px; } .proof-stat strong { display: block; color: #e5e8f2; font-size: 25px; letter-spacing: -.05em; } .proof-stat span { color: #7f8491; font-size: 10px; } .proof-source { text-align: right; } code { font-family: "DM Mono", monospace; }
.section { padding: 135px 0 20px; } .section-heading { max-width: 545px; } h2 { margin: 13px 0 17px; font-size: clamp(33px, 4vw, 56px); line-height: 1.04; letter-spacing: -.07em; } .section-heading p { color: var(--muted); font-size: 14px; line-height: 1.8; } .section-heading.compact { max-width: 430px; }
.architecture { margin-top: 58px; padding: 35px 34px 28px; border: 1px solid var(--line); border-radius: 11px; background: rgba(19,21,27,.7); } .arch-row, .arch-branches, .arch-footer { display: flex; align-items: center; justify-content: center; gap: 18px; } .arch-node { min-width: 176px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #171a22; } .arch-node b, .arch-node small { display: block; } .arch-node b { margin-top: 8px; font-size: 13px; } .arch-node small { margin-top: 4px; color: #888e9c; font: 9px "DM Mono", monospace; } .node-label { color: var(--purple); font: 9px "DM Mono", monospace; letter-spacing: .1em; } .user-node { border-color: rgba(143,220,229,.25); } .user-node .node-icon { color: var(--cyan); font-size: 17px; } .api-node { border-color: rgba(138,180,255,.3); } .graph-node { border-color: rgba(197,175,255,.36); } .arrow { color: #606675; font-size: 20px; } .arch-branches { position: relative; gap: 10px; padding: 45px 0 29px; } .branch-line { position: absolute; top: 18px; left: 19%; right: 19%; height: 28px; border-top: 1px solid #3c4558; border-left: 1px solid #3c4558; border-right: 1px solid #3c4558; } .small-node { flex: 1; min-width: 0; } .node-label.green { color: var(--green); } .node-label.amber { color: var(--orange); } .node-label.pink { color: #ef9fcb; } .arch-footer { align-items: stretch; padding-top: 8px; border-top: 1px solid var(--line); } .wide-node { flex: 1; border: 0; background: #11141b; } .node-label.orange { color: var(--orange); } .node-label.cyan { color: var(--cyan); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; } .text-link { display: inline-flex; gap: 20px; color: var(--blue); font-size: 11px; font-weight: 700; } .memory-card { padding: 25px 25px 15px; border: 1px solid var(--line); border-radius: 9px; background: #13161d; box-shadow: 0 22px 60px rgba(0,0,0,.18); } .memory-top { display: flex; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid var(--line); color: #737987; font: 9px "DM Mono", monospace; } .memory-top code { color: #9ea5b8; } .memory-item { display: flex; gap: 13px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .memory-dot { width: 8px; height: 8px; margin-top: 4px; border: 1px solid #596171; border-radius: 50%; } .memory-dot.active { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 4px rgba(156,228,189,.08); } .memory-dot.next { border-color: var(--blue); background: var(--blue); } .memory-item small, .memory-summary span { display: block; color: #777e8d; font: 9px "DM Mono", monospace; letter-spacing: .1em; } .memory-item b { display: block; margin-top: 3px; color: #d6dae6; font-size: 12px; font-weight: 600; } .memory-summary { margin-top: 17px; padding: 13px; border-radius: 5px; background: rgba(138,180,255,.06); } .memory-summary p { margin: 6px 0 0; color: #9299a9; font: 10px/1.7 "DM Mono", monospace; }
.metrics-section { margin-top: 110px; padding: 38px 30px 28px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(120deg, #141821, #101216); } .metrics-header { display: flex; justify-content: space-between; align-items: start; } .metrics-header h2 { margin-bottom: 0; } .live-badge { margin-top: 10px; color: var(--green); font: 9px "DM Mono", monospace; letter-spacing: .1em; } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 36px; } .metric-card { position: relative; min-height: 158px; padding: 17px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(255,255,255,.025); overflow: hidden; } .metric-card small { color: #777e8d; font: 9px "DM Mono", monospace; } .metric-card strong { display: block; margin: 17px 0 2px; color: #e6e8f2; font-size: 27px; letter-spacing: -.05em; } .metric-card span { color: #858b99; font-size: 10px; } .spark { display: flex; align-items: end; gap: 3px; height: 30px; margin-top: 14px; opacity: .8; } .spark i { display: block; width: 10px; border-radius: 1px; background: var(--blue); } .spark i:nth-child(1) { height: 20%; } .spark i:nth-child(2) { height: 45%; } .spark i:nth-child(3) { height: 32%; } .spark i:nth-child(4) { height: 70%; } .spark i:nth-child(5) { height: 52%; } .spark i:nth-child(6) { height: 86%; } .spark i:nth-child(7) { height: 100%; } .spark-green i { background: var(--green); } .metric-line { position: absolute; right: 17px; bottom: 30px; left: 17px; height: 1px; background: linear-gradient(90deg, transparent, var(--purple), transparent); } .health-line { display: flex; gap: 5px; margin-top: 14px; } .health-line i { width: 21px; height: 4px; border-radius: 2px; background: #4d586b; } .health-line i:first-child { background: var(--green); } .metrics-footnote { margin: 21px 0 0; color: #696f7c; font: 9px "DM Mono", monospace; }
.stack-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; padding-bottom: 105px; } .stack-list { border-top: 1px solid var(--line); } .stack-list > div { display: grid; grid-template-columns: 45px 1fr 1fr; align-items: center; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); } .stack-list span { color: #666d7b; font: 10px "DM Mono", monospace; } .stack-list b { font-size: 13px; } .stack-list small { color: #858b99; font: 10px "DM Mono", monospace; }
.closing { padding: 100px 0 120px; border-top: 1px solid var(--line); } .closing h2 { max-width: 650px; margin-bottom: 30px; font-size: clamp(45px, 6vw, 77px); } .site-footer { display: flex; justify-content: space-between; padding: 22px 0 27px; border-top: 1px solid var(--line); color: #707583; font: 9px "DM Mono", monospace; } .site-footer a { color: var(--blue); }
.legal-page { max-width: 760px; padding: 80px 0; } .legal-page .eyebrow { margin-top: 70px; } .legal-page h1 { font-size: clamp(42px, 6vw, 72px); } .legal-page p { max-width: 650px; color: var(--muted); font-size: 15px; line-height: 1.9; }
@media (max-width: 850px) { .shell { width: min(calc(100% - 32px), var(--max)); } nav a:not(.nav-cta) { display: none; } .hero { grid-template-columns: 1fr; gap: 50px; padding: 76px 0 80px; } .hero-console { transform: none; } .proof-strip { grid-template-columns: repeat(3, 1fr); } .proof-label { grid-column: 1 / -1; } .proof-source { display: none; } .split-section, .stack-section { grid-template-columns: 1fr; gap: 48px; } .architecture { padding: 24px 16px; } .arch-row { gap: 8px; } .arch-node { min-width: 0; padding: 13px 10px; } .arch-node b { font-size: 11px; } .arch-node small { font-size: 8px; } .arrow { font-size: 13px; } .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { h1 { font-size: 48px; } .hero-lede { font-size: 14px; } .hero-actions { flex-wrap: wrap; } .proof-strip { gap: 14px; } .proof-stat { padding-left: 12px; } .proof-stat strong { font-size: 21px; } .proof-stat span { font-size: 9px; } .arch-row { align-items: stretch; } .arch-row .arch-node { flex: 1; } .arch-branches { display: grid; grid-template-columns: 1fr; } .branch-line { display: none; } .arch-footer { display: grid; } .metrics-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .metrics-section { padding: 24px 14px 20px; } .metric-card { padding: 12px; } .metric-card strong { font-size: 22px; } .stack-list > div { grid-template-columns: 35px 1fr; } .stack-list small { grid-column: 2; } .site-footer { flex-wrap: wrap; gap: 10px; } }