:root{

--bg: #0a0e14;

--card-bg: #141b22;

--card-border: #1e2a36;

--text: #d0d6e0;

--text-dim: #8899aa;

--accent: #64b5f6;

--accent2: #4fc3f7;

--tag-bg: #1a2332;

--tag-text: #82b1ff;

--divider: #1e2e3e;

--shadow: 0 4px 24px rgba(0, 0, 0, 0.4);

--radius: 16px;

--radius-sm: 10px;

--max-width: 1200px;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif;

background-color: var(--bg);

color: var(--text);

line-height: 1.7;

-webkit-font-smoothing: antialiased;

scroll-behavior: smooth;

}

/* 导航栏 */

.navbar{

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

background: rgba(10, 14, 20, 0.75);

backdrop-filter: blur(20px);

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}

.navbar-inner{

max-width: var(--max-width);

margin: 0 auto;

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 24px;

height: 60px;

}

.logo{

display: flex;

align-items: center;

gap: 10px;

font-weight: 700;

font-size: 1.3rem;

color: #fff;

text-decoration: none;

}

.logo-icon{

width: 34px;

height: 34px;

border-radius: 8px;

background: linear-gradient(135deg, var(--accent), var(--accent2));

display: flex;

align-items: center;

justify-content: center;

font-size: 1.1rem;

color: #0a0e14;

}

.nav-links{

display: flex;

gap: 24px;

list-style: none;

}

.nav-links a{

color: var(--text-dim);

text-decoration: none;

font-size: 0.9rem;

font-weight: 500;

transition: color 0.25s;

padding: 6px 0;

}

.nav-links a:hover{

color: #fff;

}

.nav-cta{

background: var(--accent);

color: #0a0e14 !important;

font-weight: 700 !important;

padding: 8px 18px !important;

border-radius: 20px;

font-size: 0.85rem !important;

}

.nav-cta:hover{

background: #82c4ff;

transform: translateY(-1px);

}

.mobile-menu-btn{

display: none;

background: none;

border: none;

color: #fff;

font-size: 1.5rem;

cursor: pointer;

}

/* 英雄区 */

.hero{

padding: 140px 24px 100px;

max-width: var(--max-width);

margin: 0 auto;

text-align: center;

}

.hero-badge{

display: inline-block;

background: rgba(100, 180, 246, 0.1);

border: 1px solid rgba(100, 180, 246, 0.25);

color: var(--accent);

padding: 6px 16px;

border-radius: 20px;

font-size: 0.85rem;

font-weight: 600;

letter-spacing: 1px;

margin-bottom: 24px;

}

.hero h1{

font-size: clamp(2.2rem, 5vw, 3.6rem);

font-weight: 800;

line-height: 1.25;

color: #fff;

margin-bottom: 18px;

}

.hero h1 span{

background: linear-gradient(135deg, var(--accent), var(--accent2));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.hero-sub{

font-size: 1.15rem;

color: var(--text-dim);

max-width: 700px;

margin: 0 auto 36px;

}

.hero-stats{

display: flex;

justify-content: center;

gap: 40px;

flex-wrap: wrap;

margin-top: 32px;

}

.hero-stat{

text-align: center;

}

.hero-stat-val{

font-size: 2rem;

font-weight: 700;

color: #fff;

}

.hero-stat-label{

font-size: 0.85rem;

color: var(--text-dim);

}

/* 通用区块 */

.section{

padding: 80px 24px;

max-width: var(--max-width);

margin: 0 auto;

}

.section-dark{

background: #0d1117;

max-width: 100%;

padding-left: 24px;

padding-right: 24px;

}

.section-dark > *{

max-width: var(--max-width);

margin-left: auto;

margin-right: auto;

}

.section-title{

font-size: 1.9rem;

font-weight: 700;

color: #fff;

margin-bottom: 12px;

}

.section-subtitle{

font-size: 1rem;

color: var(--text-dim);

margin-bottom: 48px;

max-width: 600px;

}

/* 卡片网格 */

.grid-2 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 24px;

}

.grid-3 {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 24px;

}

.card{

background: var(--card-bg);

border: 1px solid var(--card-border);

border-radius: var(--radius);

padding: 28px 26px;

box-shadow: var(--shadow);

transition: transform 0.25s, border-color 0.25s;

}

.card:hover{

transform: translateY(-3px);

border-color: rgba(100, 180, 246, 0.3);

}

.card-icon{

font-size: 1.6rem;

margin-bottom: 16px;

display: block;

}

.card h3{

font-weight: 700;

font-size: 1.05rem;

color: #fff;

margin-bottom: 8px;

}

.card p{

color: var(--text-dim);

font-size: 0.9rem;

line-height: 1.6;

}

.card-detail{

font-size: 0.85rem;

margin-top: 6px;

color: var(--text-dim);

}

/* 架构图 */

.arch-row{

display: flex;

gap: 16px;

flex-wrap: wrap;

justify-content: center;

align-items: stretch;

}

.arch-block{

background: var(--card-bg);

border: 1px solid var(--card-border);

border-radius: var(--radius);

padding: 22px 20px;

flex: 1 1 220px;

max-width: 260px;

text-align: center;

}

.arch-block h4{

color: #fff;

margin-bottom: 10px;

font-size: 0.95rem;

}

.arch-block p{

font-size: 0.8rem;

color: var(--text-dim);

}

.arch-block-highlight{

border-color: rgba(100, 180, 246, 0.5);

}

.arch-arrow{

display: flex;

align-items: center;

font-size: 1.5rem;

color: var(--accent);

flex: 0 0 auto;

padding: 0 4px;

}

/* 算法表格 */

.algo-table{

width: 100%;

border-collapse: collapse;

margin-top: 32px;

background: var(--card-bg);

border-radius: var(--radius-sm);

overflow: hidden;

box-shadow: var(--shadow);

}

.algo-table th,

.algo-table td{

padding: 14px 18px;

text-align: left;

font-size: 0.9rem;

border-bottom: 1px solid var(--divider);

}

.algo-table th{

background: #1a2432;

color: #fff;

font-weight: 700;

}

.algo-table tr:last-child td{

border-bottom: none;

}

.code-inline {

background: #1a2332;

color: #ffb74d;

padding: 2px 8px;

border-radius: 4px;

font-family: 'JetBrains Mono', 'Fira Code', monospace;

font-size: 0.82rem;

}

.algo-note{

margin-top: 20px;

font-size: 0.9rem;

color: var(--text-dim);

}

/* 标签 */

.tag{

display: inline-block;

background: var(--tag-bg);

color: var(--tag-text);

padding: 3px 10px;

border-radius: 6px;

font-size: 0.78rem;

font-weight: 600;

margin-right: 6px;

margin-bottom: 6px;

}

/* 仓库树 */

.repo-tree{

background: #0d131b;

border: 1px solid var(--card-border);

border-radius: var(--radius-sm);

padding: 24px;

font-family: 'JetBrains Mono', 'Fira Code', monospace;

font-size: 0.85rem;

color: #c0c8d4;

line-height: 1.8;

overflow-x: auto;

}

.repo-tree .dir{

color: #64b5f6;

font-weight: 600;

}

.repo-tree .comment{

color: #546e7a;

margin-left: 16px;

}

/* 技术栈 */

.tech-stack{

margin-top: 8px;

}

/* 页脚 */

.footer{

border-top: 1px solid var(--divider);

padding: 40px 24px;

text-align: center;

font-size: 0.85rem;

color: var(--text-dim);

max-width: var(--max-width);

margin: 0 auto;

}

.footer a{

color: var(--accent);

text-decoration: none;

}

.footer-links{

margin-top: 6px;

}

/* 响应式 */

@media(max-width: 768px) {

.mobile-menu-btn{

display: block;

}

.nav-links{

display: none;

flex-direction: column;

position: absolute;

top: 60px;

left: 0;

width: 100%;

background: rgba(10, 14, 20, 0.95);

padding: 20px;

gap: 16px;

}

.nav-links.active{

display: flex;

}

.hero{

padding: 120px 16px 60px;

}

.section{

padding: 50px 16px;

}

.arch-row{

flex-direction: column;

align-items: center;

}

.arch-arrow{

transform: rotate(90deg);

}

}