:root { --ink: #092f44; --ocean: #0a5d80; --sky: #3dbaf0; --mist: #eaf8fd; --paper: #fdfdfb; --line: #c8e5f1; --muted: #53717e; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: 3px; }
.site-header { max-width: 1180px; min-height: 80px; padding: 0 28px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.logo-link { display: block; width: 148px; height: 57px; text-decoration: none; }
.nanomsg-logo { display: block; width: 100%; height: 100%; }
nav { display: flex; gap: 25px; font-size: .92rem; font-weight: 700; }
nav a { text-decoration: none; } nav a:hover { color: var(--ocean); }
.hero { min-height: 590px; padding: 104px max(28px, calc((100vw - 1124px)/2)); display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; color: white; overflow: hidden; background: radial-gradient(circle at 82% 21%, #227a9d 0, #0a5d80 37%, #072d44 100%); }
.hero-copy { position: relative; z-index: 1; max-width: 675px; }
.eyebrow { margin: 0 0 13px; color: var(--sky); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 800; }
h1, h2, h3 { font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif; line-height: 1.08; letter-spacing: -.035em; }
h1 { margin: 0; max-width: 680px; font-size: clamp(3.25rem, 6vw, 5.5rem); }
.lede { max-width: 620px; margin: 26px 0 32px; color: #d9f1fa; font-size: 1.18rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.button { display: inline-block; border-radius: 3px; padding: 12px 18px; text-decoration: none; font-weight: 800; font-size: .91rem; }
.button-primary { background: var(--sky); color: #06293d; } .button-primary:hover { background: #77d3f6; }
.button-quiet { color: white; } .button-quiet:hover { color: var(--sky); }
.hero-art { position: relative; min-height: 330px; }
.hero-art svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; } .hero-art path { fill: none; stroke: #93dcf8; stroke-width: 2; opacity: .75; } .hero-art circle { fill: #3dbaf0; stroke: #dff7ff; stroke-width: 6; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); } .orb-one { width: 258px; height: 258px; top: 3px; right: 15px; background: #15769b; opacity: .65; } .orb-two { width: 90px; height: 90px; bottom: 0; left: 5%; background: #3dbaf0; opacity: .32; } .orb-three { width: 42px; height: 42px; top: 30%; left: 10%; background: #b7ecff; opacity: .55; }
.section { max-width: 1180px; padding: 112px 28px; margin: auto; }
.section-intro { max-width: 730px; } .section-intro .eyebrow { color: var(--ocean); } h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.6rem); } .section-intro > p:last-child { max-width: 665px; color: var(--muted); }
.protocols { border-bottom: 1px solid var(--line); } .protocol-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .protocol-grid article { min-height: 185px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; } .protocol-grid span { color: var(--sky); font-size: .75rem; font-weight: 800; } .protocol-grid h3 { margin: 27px 0 5px; font-size: 1.37rem; } .protocol-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.implementations { max-width: none; background: var(--mist); } .implementations > * { max-width: 1124px; margin-left: auto; margin-right: auto; } .implementation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; } .implementation { min-height: 335px; padding: 31px; background: white; border-top: 5px solid #afddef; display: flex; flex-direction: column; } .implementation.featured { border-top-color: var(--sky); background: var(--ocean); color: white; } .implementation.legacy { border-top-color: #789ca9; } .tag { min-height: 22px; margin: 0; color: var(--ocean); text-transform: uppercase; letter-spacing: .11em; font-size: .66rem; font-weight: 800; } .featured .tag { color: #a7e7ff; } .implementation h3 { margin: 30px 0 13px; font-size: 2rem; } .implementation > p:not(.tag) { margin: 0; color: var(--muted); } .featured > p:not(.tag) { color: #d8f3fc; } .implementation a { margin-top: auto; padding-top: 28px; color: var(--ocean); font-weight: 800; font-size: .88rem; } .featured a { color: #b1edff; }
.closing { max-width: none; padding-top: 125px; padding-bottom: 125px; text-align: center; background: #092f44; color: white; } .closing h2 { max-width: 760px; margin: 0 auto 35px; } .closing .eyebrow { color: var(--sky); }
footer { max-width: 1180px; padding: 48px 28px 56px; margin: auto; display: grid; grid-template-columns: 1fr 2fr; gap: 3px 32px; color: var(--muted); font-size: .86rem; } footer .logo-link { grid-row: span 2; align-self: start; } footer p { margin: 0; } footer a { color: var(--ocean); }
@media (max-width: 760px) { .site-header { min-height: 66px; padding: 0 20px; } .logo-link { width: 116px; height: 47px; } nav { gap: 14px; font-size: .8rem; } .hero { min-height: 0; padding: 77px 25px; grid-template-columns: 1fr; } .hero-art { display: none; } .section { padding: 78px 25px; } .protocol-grid, .implementation-grid { grid-template-columns: 1fr; } .protocol-grid article { min-height: 0; } .implementation { min-height: 280px; } footer { padding: 38px 25px; grid-template-columns: 1fr; } footer .logo-link { grid-row: auto; margin-bottom: 8px; } }