:root {
  --ink: #eaf5f3;
  --muted: #91a8a7;
  --line: rgba(185, 231, 220, .14);
  --green: #61e3c1;
  --deep: #07111f;
  --paper: #dceee8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  overflow-x: hidden;
}

.wrap { width: min(1120px, calc(100% - 48px)); margin: auto; }
.glow { position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(15px); opacity: .25; pointer-events: none; }
.glow-a { right: -190px; top: -265px; background: #117367; }
.glow-b { left: -310px; top: 550px; background: #245b9e; }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--green); color: #07302a; font-size: 18px; }
.brand small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
nav { display: flex; gap: 28px; }
nav a, .quiet { color: var(--muted); font-size: 14px; text-decoration: none; }
nav a:hover, .quiet:hover { color: var(--green); }

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; min-height: 630px; align-items: center; padding: 70px 0; }
.eyebrow { margin: 0 0 18px; color: #a6c5bf; font-size: 11px; font-weight: 750; letter-spacing: .15em; }
.eyebrow::before { content: ""; display: inline-block; width: 23px; height: 1px; margin: 0 8px 3px 0; background: var(--green); vertical-align: middle; }
h1, h2 { margin: 0; letter-spacing: -.065em; line-height: 1.08; }
h1 { font-size: clamp(44px, 5.2vw, 70px); }
h1 em { color: var(--green); font-style: normal; }
.lede { max-width: 535px; margin: 27px 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.actions { display: flex; gap: 12px; }
.button { display: inline-flex; align-items: center; padding: 13px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s; }
.button:hover { transform: translateY(-2px); }
.solid { background: var(--green); color: #06241f; }
.outline { border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink); }
.facts { display: flex; gap: 18px; margin: 37px 0 0; padding: 0; color: #b3c8c4; font-size: 12px; list-style: none; }
.facts li + li::before { content: "•"; margin-right: 18px; color: #557370; }

.visual { position: relative; height: 455px; }
.grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(183,233,223,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(183,233,223,.055) 1px, transparent 1px); background-size: 27px 27px; }
.ring { position: absolute; border: 1px solid rgba(124,219,201,.16); border-radius: 50%; }
.r1 { width: 355px; height: 355px; top: 37px; left: 74px; }
.r2 { width: 425px; height: 425px; top: 4px; left: 41px; border-color: rgba(124,219,201,.08); }
.app-card { position: absolute; z-index: 1; top: 60px; left: 9%; width: 83%; overflow: hidden; transform: rotate(-3deg); border: 1px solid rgba(183,233,223,.22); border-radius: 15px; background: rgba(11,28,43,.94); box-shadow: 0 28px 75px rgba(0,0,0,.45); }
.bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-bottom: 1px solid var(--line); color: #78908e; font-size: 10px; }
.bar i { width: 7px; height: 7px; border-radius: 50%; background: #ef786f; }
.bar i:nth-child(2) { background: #e5bb62; }.bar i:nth-child(3) { background: #63ce8e; }.bar b { margin: auto; font-weight: 500; }
.app-body { padding: 18px; }.status { display: flex; align-items: center; gap: 8px; margin: 0; color: #cce2de; font-size: 11px; }.status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }.status b { margin-left: auto; color: var(--green); font-size: 10px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 17px 0; }.metrics div { padding: 11px; border: 1px solid rgba(192,236,227,.08); border-radius: 7px; background: #102537; }.metrics small { display: block; color: #829a98; font-size: 9px; }.metrics strong { display: block; margin: 2px 0; font-size: 21px; letter-spacing: -.05em; }
.chart { height: 112px; overflow: hidden; border-radius: 7px; background: #0b1f30; }.chart svg { width: 100%; height: 100%; padding: 10px; }
.pill { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 177px; padding: 10px 12px; border: 1px solid rgba(184,234,223,.18); border-radius: 10px; background: #11293b; box-shadow: 0 14px 40px rgba(0,0,0,.32); font-size: 10px; }.pill b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: #193b38; color: var(--green); font-size: 15px; }.pill small { display: block; color: #8ea9a6; font-size: 9px; }.pill i { margin-left: auto; color: var(--green); font-style: normal; }.safari { top: 18px; left: 0; }.mcp { right: -4px; bottom: 32px; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }.principles article { padding: 33px 30px 38px 0; }.principles article + article { padding-left: 30px; border-left: 1px solid var(--line); }.principles span, .steps b { color: var(--green); font-size: 12px; }.principles h2 { margin: 12px 0 7px; font-size: 18px; }.principles p, .steps p, .split p, .mcp-section p:not(.eyebrow), .privacy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.dark-section { margin-top: 110px; padding: 110px 0; background: #0a1827; }.split { display: grid; grid-template-columns: 1.25fr .75fr; gap: 80px; align-items: end; }.split h2, .mcp-section h2, .privacy h2 { font-size: clamp(35px, 4.3vw, 58px); }.split p { font-size: 15px; }.steps { margin: 60px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }.steps li { display: grid; grid-template-columns: 70px 1fr 25px; gap: 20px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }.steps h3 { margin: 0 0 4px; font-size: 18px; }.steps i { color: #557370; font-size: 20px; font-style: normal; }
.mcp-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; padding: 130px 0; }.terminal { overflow: hidden; border: 1px solid rgba(196,240,232,.16); border-radius: 14px; background: #06101a; box-shadow: 0 22px 65px rgba(0,0,0,.25); }.terminal pre { margin: 0; padding: 24px; color: #c6ded9; font: 12px/2.05 ui-monospace, SFMono-Regular, Menlo, monospace; }.terminal strong, .terminal em { color: var(--green); font-style: normal; }.terminal span { color: #728d8c; }.mcp-section h2 { margin-bottom: 22px; }.mcp-section p:not(.eyebrow) { margin-bottom: 23px; font-size: 15px; }.mcp-section code, .policy code { color: #b8e9dc; }
.beta-section { padding: 105px 0; background: linear-gradient(135deg, #102d35, #0a1827); }.beta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }.beta-grid h2, .faq h2 { font-size: clamp(35px, 4.3vw, 58px); }.beta-grid > div > p:not(.eyebrow) { max-width: 590px; color: var(--muted); font-size: 16px; line-height: 1.8; }.beta-card { padding: 32px; border: 1px solid rgba(97,227,193,.28); border-radius: 16px; background: rgba(6,16,26,.72); box-shadow: 0 22px 65px rgba(0,0,0,.2); }.beta-card p { margin: 0; color: var(--muted); }.beta-card .beta-label { color: #a6c5bf; font-size: 12px; font-weight: 750; letter-spacing: .1em; }.beta-card strong { display: block; margin: 4px 0 9px; color: var(--green); font-size: 57px; letter-spacing: -.07em; line-height: 1; }.beta-card .button { margin: 25px 0 16px; }.beta-card .quiet { display: block; width: max-content; }.faq { padding: 115px 0; }.faq > h2 { margin-bottom: 45px; }.faq details { padding: 23px 0; border-top: 1px solid var(--line); }.faq details:last-child { border-bottom: 1px solid var(--line); }.faq summary { cursor: pointer; color: var(--ink); font-size: 18px; font-weight: 700; }.faq p { max-width: 720px; margin: 13px 0 0; color: var(--muted); line-height: 1.8; }
.privacy { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; margin-bottom: 105px; padding: 57px 65px; border-radius: 16px; background: var(--paper); color: #0a2724; }.privacy .eyebrow { color: #3e6660; }.privacy .eyebrow::before { background: #277b6b; }.privacy p:not(.eyebrow) { margin: 5px 0 22px; color: #43625e; font-size: 15px; }footer { display: flex; align-items: center; gap: 23px; padding: 27px 0 39px; border-top: 1px solid var(--line); }footer p { margin: 0 auto 0 0; color: #698683; font-size: 12px; }
.policy { width: min(760px, calc(100% - 48px)); margin: auto; padding: 80px 0 110px; }.policy h1 { margin-bottom: 25px; }.policy .intro { margin: 0 0 65px; color: #b9cfcb; font-size: 20px; line-height: 1.7; }.policy section { padding: 29px 0; border-top: 1px solid var(--line); }.policy h2 { margin-bottom: 14px; font-size: 24px; }.policy section p { margin: 0 0 13px; color: var(--muted); line-height: 1.8; }.policy a { color: var(--green); }
@media (max-width: 760px) { .wrap { width: min(100% - 34px, 560px); }.nav { height: 72px; }nav { display: none; }.quiet { font-size: 12px; }.hero { display: block; min-height: 0; padding: 65px 0 50px; }h1 { font-size: 50px; }.visual { height: 385px; margin: 42px -10px 0; }.principles, .split, .mcp-section, .beta-grid, .privacy { grid-template-columns: 1fr; }.principles article, .principles article + article { padding: 25px 0; border-left: 0; }.principles article + article { border-top: 1px solid var(--line); }.dark-section { margin-top: 70px; padding: 75px 0; }.split { gap: 28px; }.steps { margin-top: 39px; }.steps li { grid-template-columns: 47px 1fr; }.steps i { display: none; }.mcp-section, .beta-grid { gap: 28px; padding: 80px 0; }.beta-section { padding: 75px 0; }.faq { padding: 75px 0; }.terminal { order: 2; }.privacy { gap: 28px; margin-bottom: 65px; padding: 37px 26px; }footer { display: grid; grid-template-columns: auto 1fr; gap: 14px; }footer p { grid-column: 1 / -1; order: 3; margin: 0; }.facts { gap: 10px; font-size: 10px; }.facts li + li::before { margin-right: 10px; }.policy { width: min(100% - 34px, 760px); padding: 55px 0 75px; }.policy .intro { font-size: 18px; } }