:root {
--primary: #2563eb;
--primary-light: #60a5fa;
--primary-dark: #1d4ed8;
--accent: #06b6d4;
--accent-light: #67e8f9;
--indigo: #6366f1;
--violet: #8b5cf6;
--bg: #f0f4ff;
--card-bg: rgba(255,255,255,0.85);
--text: #0f172a;
--text-secondary: #475569;
--border: rgba(37,99,235,0.12);
--shadow: 0 8px 32px rgba(37,99,235,0.10);
--radius: 20px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* background: var(--bg); */
background: radial-gradient(115.05% 125.23% at 10% 20%, #698eff4d 0%, #92adff00 40%), radial-gradient(122.21% 133.03% at 90% 10%, #7bebff4d 0%, #afecff00 40%), radial-gradient(67.9% 73.91% at 50% 50%, #ffddb333 0%, #ffddb300 60%), radial-gradient(108.64% 118.25% at 80% 80%, #c8b4ff59 0%, #c8b4ff00 50%), radial-gradient(116.2% 126.48% at 20% 90%, #3ebcff40 0%, #7fe6ff0d 35.58%);

color: var(--text);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}

/* ===== 动态科技背景 ===== */
.bg-tech {
position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-tech .grid {
position:absolute; inset:0;
background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
background-size: 60px 60px;
}
.bg-tech .gradient-orb {
position:absolute; border-radius:50%; filter:blur(100px); opacity:0.25;
animation: float 20s ease-in-out infinite;
}
.bg-tech .orb1 { width:600px; height:600px; top:-10%; left:-5%;
background: radial-gradient(circle, var(--primary-light), transparent); }
.bg-tech .orb2 { width:500px; height:500px; bottom:-8%; right:-3%;
background: radial-gradient(circle, var(--accent), transparent);
animation-delay:-7s; }
.bg-tech .orb3 { width:400px; height:400px; top:40%; left:60%;
background: radial-gradient(circle, var(--indigo), transparent);
animation-delay:-14s; }
@keyframes float {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(40px,-30px) scale(1.05); }
66% { transform: translate(-20px,20px) scale(0.95); }
}

/* ===== 粒子线条 ===== */
.particle-line {
position:fixed; height:1px; background:linear-gradient(90deg,transparent,rgba(37,99,235,0.15),transparent);
animation: scan 8s linear infinite;
z-index:0; pointer-events:none;
}
.particle-line:nth-child(1) { top:20%; width:100%; animation-delay:0s; }
.particle-line:nth-child(2) { top:55%; width:80%; animation-delay:-2.7s; }
.particle-line:nth-child(3) { top:80%; width:60%; animation-delay:-5.3s; }
@keyframes scan {
0% { transform:translateX(-100%); opacity:0; }
50% { opacity:1; }
100% { transform:translateX(100%); opacity:0; }
}

/* ===== 主容器 ===== */
.container {
position:relative; z-index:1;
max-width:1280px; margin:0 auto; padding:40px 24px 80px;
}

/* ===== 顶部 ===== */
.header {
display:flex; justify-content:space-between; align-items:center;
padding:24px 32px; margin-bottom:48px;
background:var(--card-bg); border:1px solid var(--border);
border-radius:var(--radius); backdrop-filter:blur(20px);
box-shadow:var(--shadow);
}
.header-brand { display:flex; align-items:center; gap:14px; }
.header-brand .logo-icon {
width:44px; height:44px; border-radius:12px;
/* background:linear-gradient(135deg, var(--primary), var(--accent)); */
display:flex; align-items:center; justify-content:center;
font-size:20px; color:#fff; font-weight:800;
/* box-shadow:0 4px 12px rgba(37,99,235,0.3); */
}
.header-brand .logo-icon img {
    width: 80px;
    height: 80px;
}
.header-brand h1 { font-size:22px; font-weight:700; letter-spacing:-0.3px; }
.header-brand span { color:var(--text-secondary); font-size:13px; font-weight:400; display:block; margin-top:2px; }
.header-version {
font-size:12px; color:var(--text-secondary); background:rgba(37,99,235,0.06);
padding:6px 16px; border-radius:20px; border:1px solid var(--border);
}

/* ===== Section Title ===== */
.section-title {
display:flex; align-items:center; gap:12px; margin-bottom:24px;
font-size:18px; font-weight:600; color:var(--text);
}
.section-title .bar {
width:4px; height:22px; border-radius:2px;
background:linear-gradient(180deg, var(--primary), var(--accent));
/* background: linear-gradient(180deg, #ECF2FF, #033CFF); */
}
.section-subtitle { font-size:13px; color:var(--text-secondary); font-weight:400; margin-left:8px; }

/* ===== 卡片网格 ===== */
.grid-4, .grid-3, .grid-2 { display:grid; gap:20px; margin-bottom:48px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

/* ===== 入口卡片 ===== */
.card {
background:var(--card-bg); border:1px solid var(--border);
border-radius:var(--radius); padding:28px 24px;
backdrop-filter:blur(20px); box-shadow:var(--shadow);
transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
cursor:pointer; position:relative; overflow:hidden;
}
.card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, var(--primary), var(--accent));
opacity:0; transition:opacity 0.35s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(37,99,235,0.15); }
.card:hover::before { opacity:1; }
.card:active { transform:translateY(-1px); }

.card .icon-wrap {
width:48px; height:48px; border-radius:14px; margin-bottom:16px;
display:flex; align-items:center; justify-content:center; font-size:22px;
transition:transform 0.35s;
}
.card:hover .icon-wrap { transform:scale(1.08); }
.icon-blue { background:rgba(37,99,235,0.10); color:var(--primary); }
/* .icon-cyan { background:rgba(6,182,212,0.10); color:var(--accent); } */
.icon-indigo { background:rgba(99,102,241,0.10); color:var(--indigo); }
.icon-violet { background:rgba(139,92,246,0.10); color:var(--violet); }
/* .icon-amber { background:rgba(245,158,11,0.10); color:#d97706; } */
.icon-emerald { background:rgba(16,185,129,0.10); color:#059669; }
.icon-rose { background:rgba(244,63,94,0.10); color:#e11d48; }

.card h3 { font-size:16px; font-weight:600; margin-bottom:6px; }
.card p { font-size:13px; color:var(--text-secondary); line-height:1.5; min-height:20px; }
.card .tag-group { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.card .tag {
font-size:11px; padding:3px 10px; border-radius:12px;
background:rgba(37,99,235,0.07); color:var(--primary); font-weight:500;
}
.card .tag.cyan { background:rgba(6,182,212,0.07); color:#0891b2; }
.card .tag.amber { background:rgba(245,158,11,0.07); color:#b45309; }
.card .tag.emerald { background:rgba(16,185,129,0.07); color:#059669; }

.card .card-action {
display:inline-flex; align-items:center; gap:6px; margin-top:16px;
font-size:13px; font-weight:500; color:var(--primary);
transition:gap 0.3s;
}
.card:hover .card-action { gap:10px; }
.card .card-action svg { transition:transform 0.3s; }
.card:hover .card-action svg { transform:translateX(3px); }

/* ===== Legacy 特殊卡片 ===== */
.card.legacy {
background:rgba(255,255,255,0.70);
}
.card.legacy::before { background:linear-gradient(90deg, #f59e0b, #d97706); }
.card.legacy .tag { background:rgba(245,158,11,0.07); color:#b45309; }
.card.legacy .tag.emerald { background:rgba(16,185,129,0.07); color:#059669; }

/* ===== App 下载区块 ===== */
.app-download-grid {
display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.app-card {
display:flex; align-items:center; gap:18px;
background:var(--card-bg); border:1px solid var(--border);
border-radius:var(--radius); padding:20px 24px;
backdrop-filter:blur(20px); box-shadow:var(--shadow);
transition:all 0.3s; cursor:pointer;
}
.app-card:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(37,99,235,0.12); }
.app-card .app-icon {
width:52px; height:52px; border-radius:14px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:24px;
}
.app-card .app-info h4 { font-size:15px; font-weight:600; }
.app-card .app-info span { font-size:12px; color:var(--text-secondary); }
.app-card .download-btn {
margin-left:auto; padding:8px 20px; border-radius:10px;
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff; font-size:12px; font-weight:600; border:none; cursor:pointer;
transition:transform 0.2s, box-shadow 0.2s;
}
.app-card .download-btn:hover { transform:scale(1.05); box-shadow:0 4px 16px rgba(37,99,235,0.35); }

/* ===== 微信小程序区块 ===== */
.miniprogram-section {
display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px;
}
.mp-card {
background:var(--card-bg); border:1px solid var(--border);
border-radius:var(--radius); padding:28px 24px;
backdrop-filter:blur(20px); box-shadow:var(--shadow);
transition:all 0.35s; cursor:pointer;
overflow:hidden; position:relative;
}
.mp-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, #06b6d4, #6366f1);
opacity:0; transition:opacity 0.35s;
}
.mp-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(37,99,235,0.15); }
.mp-card:hover::before { opacity:1; }
.mp-card .mp-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.mp-card .mp-icon {
width:44px; height:44px; border-radius:12px;
background:linear-gradient(135deg, #06b6d4, #6366f1);
display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;
}
.mp-card h3 { font-size:16px; font-weight:600; }
.mp-card p { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.mp-card .qr-placeholder {
margin-top:16px; display:flex; align-items:center; gap:16px;
padding:14px; border-radius:12px;
background:rgba(6,182,212,0.05); border:1px dashed rgba(6,182,212,0.20);
}
.mp-card .qr-placeholder .qr-box {
    width:64px; height:64px; border-radius:8px;
    background:linear-gradient(135deg, var(--accent-light), var(--primary-light));
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff; flex-shrink:0;
}
.mp-card .qr-placeholder .qr-box img {
    width:100%; height:100%;
}
.mp-card .qr-placeholder .qr-box img:hover { 
    transform:scale(3) translate(20px, -20px);
}
.mp-card .qr-placeholder span { font-size:12px; color:var(--text-secondary); line-height:1.4; }
.mp-card .mp-links { display:flex; gap:10px; margin-top:14px; }
.mp-card .mp-links a {
flex:1; text-align:center; padding:9px; border-radius:10px;
font-size:13px; font-weight:500;
border:1px solid var(--border); color:var(--primary);
text-decoration:none; transition:all 0.25s;
}
.mp-card .mp-links a:last-child {
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff; border-color:transparent;
}
.mp-card .mp-links a:hover { transform:translateY(-2px); }

/* ===== 底部 ===== */
.footer {
margin-top:48px; padding:32px; text-align:center;
background:var(--card-bg); border:1px solid var(--border);
border-radius:var(--radius); backdrop-filter:blur(20px); box-shadow:var(--shadow);
}
.footer p { font-size:13px; color:var(--text-secondary); }
.footer .links { display:flex; justify-content:center; gap:24px; margin-top:12px; }
.footer .links a { font-size:12px; color:var(--primary); text-decoration:none; transition:color 0.2s; }
.footer .links a:hover { color:var(--primary-dark); text-decoration:underline; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
.container { padding:20px 16px 48px; }
.header { flex-direction:column; gap:12px; text-align:center; padding:20px; }
.grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
.app-download-grid, .miniprogram-section { grid-template-columns:1fr; }
.card p { min-height:auto; }
.footer .links { flex-wrap:wrap; gap:12px; }
}

/* ===== 入场动画 ===== */
.card, .app-card, .mp-card, .header, .footer {
opacity:0; animation:fadeInUp 0.5s ease forwards;
}
.card:nth-child(1) { animation-delay:0.05s; }
.card:nth-child(2) { animation-delay:0.10s; }
.card:nth-child(3) { animation-delay:0.15s; }
.card:nth-child(4) { animation-delay:0.20s; }
.card:nth-child(5) { animation-delay:0.25s; }
.card:nth-child(6) { animation-delay:0.30s; }
.app-card:nth-child(1) { animation-delay:0.10s; }
.app-card:nth-child(2) { animation-delay:0.15s; }
.mp-card:nth-child(1) { animation-delay:0.10s; }
.mp-card:nth-child(2) { animation-delay:0.15s; }
.header { animation-delay:0s; }
.footer { animation-delay:0.30s; }

@keyframes fadeInUp {
from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:translateY(0); }
}

.view-to-right {
    margin-right: 30px;
}