/* HashPort 官网 · 排版尺度与调色照 cipherdigital.com 的设计令牌：
   标题一律 400 字重、字距 -.01em、行高 1；正文 16px / 行高 1.5 / 字距 .01em；大数字 41→80px 字距 -.05em；
   背景 #0d0e10，线 1px 带 8px 圆点节点，强调色 hypergreen #abd233。字体只用系统栈（网关 CSP 不放外部字体）。 */
:root {
  --n110: #0d0e10; --n100: #141618; --n90: #202427; --n80: #2d3438; --n50: #5a636a; --n40: #939ca2; --n30: #c4ccd1; --n10: #eff0f1; --n05: #f5f6f7;
  --green: #abd233; --line: rgba(255,255,255,.14); --dot: rgba(255,255,255,.55);
  --h1: clamp(41px, calc(-5.67px + 5.83vw), 69px); --h2: clamp(36px, calc(1px + 4.375vw), 57px); --h3: clamp(32px, calc(5.33px + 3.33vw), 48px);
  --h4: clamp(29px, calc(10.67px + 2.29vw), 40px); --h5: clamp(26px, calc(14.33px + 1.46vw), 33px); --h6: clamp(23px, calc(14.67px + 1.04vw), 28px);
  --num: clamp(41px, calc(41px + 39 * ((100vw - 800px) / 640)), 80px);
  --sans: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", arial, sans-serif;
  --mono: "Roboto Mono", Menlo, Consolas, Monaco, "Liberation Mono", monospace;
  --pad: clamp(20px, 3.33vw, 48px); --max: 1440px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { background: var(--n110); color: var(--n10); font: 400 16px/1.5 var(--sans); letter-spacing: .01em; -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: inherit; text-decoration: none }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; line-height: 1.1; text-wrap: balance }
p { text-wrap: pretty }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0 }
.grid-bg { display: none }

/* 线与节点：所有分隔线都是 1px + 端点 8px 圆点，这是 cipher 版式最显眼的记号 */
.rule { position: relative; height: 1px; background: var(--line) }
.rule::before, .rule::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); transform: translate(-50%, -50%) }
.rule::before { left: 0 } .rule::after { left: 100% }

/* 导航：90px 高，线在下 */
.nav { position: sticky; top: 0; z-index: 20; height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad);
  background: rgba(13,14,16,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.brand { display: inline-flex; align-items: center; gap: 0; color: #fff; font-size: 19px; letter-spacing: -.01em; justify-self: start }
.brand span { color: var(--green) } .brand.small { font-size: 16px }
.brand-mark { width: 20px; height: 24px; margin-right: 10px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22150 170 640 790%22%3E%3Cpath fill=%22%23ffffff%22 d=%22M170 190 L470.0 361.0 L770 190 L770 360 L470.0 531.0 L170 360 Z M215 425 L472.5 571.775 L730 425 L730 595 L472.5 741.775 L215 595 Z M260 645 L472.5 766.125 L685 645 L685 815 L472.5 936.125 L260 815 Z%22/%3E%3C/svg%3E") center / contain no-repeat }
.nav-links { display: flex; gap: 32px; justify-self: center; margin-right: 18px } .nav-links a { color: var(--n10); font-size: 13px; letter-spacing: .02em; opacity: .85 } .nav-links a:hover { opacity: 1; box-shadow: 0 1px 0 var(--green) }
.nav-right { display: flex; align-items: center; gap: 12px; justify-self: end }
.x-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: 4px; border: 1px solid var(--green); background: var(--green); color: var(--n110); font-size: 13px; letter-spacing: .02em; box-shadow: 0 0 18px rgba(171,210,51,.4); flex: 0 0 auto; transition: background .15s, border-color .15s, box-shadow .15s }
.x-link svg { display: block; width: 14px; height: 14px; flex: 0 0 auto }
.x-link:hover { background: #d6ff4f; border-color: #d6ff4f; box-shadow: 0 0 22px rgba(214,255,79,.6) }
.x-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.lang { font: 500 12px/1 var(--mono); color: var(--n10); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 9px 10px; cursor: pointer }
.lang:hover { border-color: var(--n40) }
@media (max-width: 1040px) { .x-link span { display: none } .x-link { width: 36px; padding: 0; justify-content: center } }
@media (max-width: 900px) { .nav { grid-template-columns: 1fr auto } .nav-links { display: none } }

/* 按钮：照 cipher 的 Contact：浅灰底、4px 圆角、13px、不加粗 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; letter-spacing: .02em; padding: 11px 18px; border-radius: 4px;
  border: 1px solid var(--line); color: var(--n10); background: var(--n90); transition: background .15s, border-color .15s; white-space: nowrap }
.btn:hover { background: var(--n80); border-color: var(--n50) }
.btn.primary { background: var(--n10); color: var(--n110); border-color: var(--n10) } .btn.primary:hover { background: #fff }
.btn.green { background: var(--green); color: var(--n110); border-color: var(--green) } .btn.green:hover { background: #bfe24a }
.btn.big { font-size: 14px; padding: 14px 22px }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap } .cta-row.center { justify-content: center }

/* ===== Hero：整屏画布，标题在左下的格子里；上面一条横线，左侧一条竖线（title-rule） ===== */
.hero { position: relative; z-index: 1; height: calc(100svh - 72px); min-height: 640px; display: grid; grid-template-rows: 1fr auto 1.15fr; overflow: hidden }
#chips { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0 }
.hero-inner { position: relative; z-index: 2; grid-row: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; max-width: var(--max); width: 100%; margin: 0 auto; padding: 48px var(--pad) 0 }
.hero-inner::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: var(--line) }
.hero-inner::after { content: ""; position: absolute; left: var(--pad); top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); transform: translate(-50%, -50%) }
.hero-copy { position: relative; padding-left: 28px; border-left: 1px solid var(--line) }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .02em; color: var(--n40); margin-bottom: 20px }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green) }
.hero-title { font-size: clamp(44px, 5.8vw, 84px); line-height: 1.02; letter-spacing: -.015em; color: #fff; margin-bottom: 28px }
.hero-title .accent { color: #d6ff4f; text-shadow: 0 0 28px rgba(214,255,79,.35) }
.hero-lead { font-size: clamp(17px, calc(17px + 4 * ((100vw - 800px) / 640)), 21px); line-height: 1.6; color: var(--n30); max-width: 40ch; margin-bottom: 36px }

/* 钱包地址栏示意：右下角，整屏最该被记住的一个画面 */
.hero-badge { justify-self: end; align-self: center; width: 100%; max-width: 520px; background: rgba(20,22,24,.92); border: 0; border-radius: 6px; padding: 14px 16px; backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0,0,0,.55) }
.hero-badge { position: relative } .badge-tag { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--n50); letter-spacing: .08em }
.badge-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.badge-lock { width: 12px; height: 14px; border: 2px solid var(--n40); border-radius: 3px; position: relative; flex: 0 0 auto }
.badge-lock::before { content: ""; position: absolute; left: 1px; top: -8px; width: 6px; height: 8px; border: 2px solid var(--n40); border-bottom: 0; border-radius: 6px 6px 0 0 }
.badge-url { color: var(--n30); flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }
.badge-pill { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--green); border-radius: 999px; padding: 6px 12px; font-size: 13px; letter-spacing: .01em; animation: pillIn .8s .5s both }
.tick { width: 16px; height: 16px; border-radius: 50%; background: var(--green); position: relative; flex: 0 0 auto }
.tick::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--n110); border-width: 0 2px 2px 0; transform: rotate(45deg) }
.badge-sub { color: var(--n40); font-size: 12px; margin-top: 10px; padding-left: 24px }
@keyframes pillIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* 底部一条：三句价值，竖线分隔，照 cipher 的 Trusted-by 栏 */
.hero-stats { position: relative; z-index: 2; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: rgba(13,14,16,.72); backdrop-filter: blur(8px) }
.stat { padding: 18px var(--pad); border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px } .stat:last-child { border-right: 0 }
.stat .num { font-size: 13px; letter-spacing: .02em; color: var(--green); font-family: var(--mono) } .stat .lbl { color: var(--n10); font-size: 15px }
@media (max-width: 900px) { .hero { height: auto; min-height: calc(100svh - 72px); grid-template-rows: 48px auto 1fr } .hero-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px } .hero-badge { justify-self: start } .hero-stats { grid-template-columns: 1fr } .stat { border-right: 0; border-bottom: 1px solid var(--line) } }

/* ===== 段落：cipher 的 ctext 版式 = 左标题（h-4）右正文（16px，46ch），上下各一条带节点的线 ===== */
.sec { position: relative; z-index: 1; padding: clamp(72px, 9vw, 128px) var(--pad); border-top: 1px solid var(--line) }
.sec::before { content: ""; position: absolute; left: var(--pad); top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); transform: translate(-50%, -50%) }
.sec.alt { background: var(--n100) }
.sec-inner { max-width: var(--max); margin: 0 auto }
.sec-head { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; margin-bottom: 48px }
.sec-head h2 { font-size: var(--h4); line-height: 1.1 }
.sec-head .lead { font-size: 16px; line-height: 1.5; color: var(--n30); max-width: 52ch }
.label { font-size: 13px; letter-spacing: .02em; color: var(--n40); margin-bottom: 16px; font-family: var(--mono) }
.sec-inner.two .sec-head { margin-bottom: 0 }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px } }

/* 卡片：不圆角、细线、留白大；标题 h-6，正文 16px */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line) }
.card { padding: 32px 28px 36px; border-right: 1px solid var(--line); background: transparent } .card:last-child { border-right: 0 }
.card h3 { font-size: var(--h6); line-height: 1.15; margin-bottom: 14px }
.card p { color: var(--n30); font-size: 15px; line-height: 1.55 }
.card-k { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--green); margin-bottom: 36px }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr } .card { border-right: 0; border-bottom: 1px solid var(--line) } .card:last-child { border-bottom: 0 } }

.flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-bottom: 32px }
.flow li { padding: 28px 24px 32px; border-right: 1px solid var(--line) } .flow li:last-child { border-right: 0 }
.flow .no { font-family: var(--mono); font-size: 12px; color: var(--n40); margin-bottom: 28px } .flow li:last-child .no { color: var(--green) }
.flow h3 { font-size: 20px; line-height: 1.2; margin-bottom: 10px } .flow p { color: var(--n30); font-size: 14.5px; line-height: 1.55 }
@media (max-width: 1000px) { .flow { grid-template-columns: repeat(2, 1fr) } .flow li:nth-child(2n) { border-right: 0 } .flow li:nth-child(-n+2) { border-bottom: 1px solid var(--line) } }
@media (max-width: 600px) { .flow { grid-template-columns: 1fr } .flow li { border-right: 0; border-bottom: 1px solid var(--line) } .flow li:last-child { border-bottom: 0 } }

.callout { display: grid; grid-template-columns: 5fr 7fr auto; gap: 48px; align-items: center; border: 1px solid var(--line); padding: 28px 32px }
.callout-t { font-size: var(--h6); line-height: 1.15 } .callout p { color: var(--n30); font-size: 15px }
@media (max-width: 900px) { .callout { grid-template-columns: 1fr; gap: 16px } }

.ticks { list-style: none; border: 1px solid var(--line) }
.ticks li { position: relative; padding: 20px 24px 20px 56px; border-bottom: 1px solid var(--line); color: var(--n10); font-size: 16px } .ticks li:last-child { border-bottom: 0 }
.ticks li::before { content: ""; position: absolute; left: 24px; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--green) }
.ticks li::after { content: ""; position: absolute; left: 29px; top: 26px; width: 4px; height: 8px; border: solid var(--n110); border-width: 0 2px 2px 0; transform: rotate(45deg) }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line) }
.step { padding: 32px 28px 40px; border-right: 1px solid var(--line) } .step:last-child { border-right: 0 }
.step .big { font-size: var(--num); line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #fff; margin-bottom: 24px }
.step h3 { font-size: var(--h6); line-height: 1.15; margin-bottom: 10px } .step p { color: var(--n30); font-size: 15px; line-height: 1.55 }
@media (max-width: 900px) { .steps3 { grid-template-columns: 1fr } .step { border-right: 0; border-bottom: 1px solid var(--line) } .step:last-child { border-bottom: 0 } }

/* 大数字：cipher 的 metrics */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 32px }
.metric { padding: 32px 28px; border-right: 1px solid var(--line) } .metric:last-child { border-right: 0 }
.metric .v { font-size: var(--num); line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #fff; display: flex; align-items: flex-end; gap: 8px }
.metric .v small { font-size: clamp(19px, calc(19px + 9 * ((100vw - 800px) / 640)), 28px); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 6px; color: var(--n30) }
.metric .l { font-size: clamp(16px, calc(16px + 3 * ((100vw - 800px) / 640)), 19px); color: var(--n40); margin-top: 16px }
.metrics.two { grid-template-columns: repeat(2, 1fr) }
@media (max-width: 900px) { .metrics, .metrics.two { grid-template-columns: 1fr } .metric { border-right: 0; border-bottom: 1px solid var(--line) } .metric:last-child { border-bottom: 0 } }

.facts { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--line) }
.facts td { padding: 16px 20px; border-top: 1px solid var(--line); vertical-align: top; color: var(--n10) }
.facts tr:first-child td { border-top: 0 }
.facts td:first-child { color: var(--n40); width: 200px; white-space: nowrap; border-right: 1px solid var(--line) }
.facts a { color: var(--green); word-break: break-all }

.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 48px var(--pad) 64px; color: var(--n40); font-size: 14px }
.foot-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center }
.foot-links { display: flex; flex-wrap: wrap; gap: 24px } .foot-links a { color: var(--n10); opacity: .8 } .foot-links a:hover { opacity: 1 }
.foot-note { flex-basis: 100%; font-size: 12px; color: var(--n50) }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .badge-pill { animation: none } }

/* 控制台：未认证处理器警告（2026-09-17） */
.row.warn{color:#b45309;font-weight:600}
#cpuinfo{overflow-wrap:anywhere}
#site{max-width:100%}