*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.7; color: #1a2332; background: #f5f6f8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } :root { --navy-900: #0a1628; --navy-800: #0f1f38; --navy-700: #162a4a; --navy-600: #1e3a5f; --navy-500: #2a4a73; --amber-500: #c89b3c; --amber-400: #d9b05a; --amber-300: #e6c67a; --gray-100: #f5f6f8; --gray-200: #e8ebf0; --gray-300: #d0d5dd; --gray-500: #667085; --gray-700: #344054; --gray-900: #1a2332; --jd-red: #E1251B; --jd-red-soft: rgba(225, 37, 27, 0.12); --jd-red-line: rgba(225, 37, 27, 0.25); } .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(200, 155, 60, 0.15); box-shadow: inset 0 -2px 0 -1px var(--jd-red); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 12px; } .nav-logo-img { height: 42px; width: auto; display: block; } .nav-logo-text { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.5px; } .nav-logo-text span { display: block; font-size: 11px; font-weight: 400; color: var(--amber-300); letter-spacing: 2px; margin-top: 2px; } .nav-links { display: flex; align-items: center; gap: 30px; flex-wrap: nowrap; } .nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500; transition: color 0.2s; white-space: nowrap; } .nav-links a:hover { color: var(--amber-300); } .nav-links a.nav-link:hover { position: relative; } .nav-links a.nav-link:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -24px; height: 2px; background: var(--jd-red); } .nav-cta { background: var(--jd-red); color: #fff !important; padding: 10px 22px; border-radius: 4px; font-weight: 600 !important; transition: all 0.2s; position: relative; } .nav-cta:hover { background: #c41d14; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225, 37, 27, 0.35); }  .hero { position: relative; min-height: 100vh; padding-top: 68px; background: var(--navy-900); overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; opacity: 0.35; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-900) 0%, rgba(10,22,40,0.7) 50%, rgba(10,22,40,0.3) 100%), linear-gradient(180deg, rgba(10,22,40,0.4) 0%, transparent 30%, transparent 70%, var(--navy-900) 100%); } .hero-content { position: relative; z-index: 2; padding: 80px 0; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; background: rgba(200, 155, 60, 0.08); border: 1px solid rgba(200, 155, 60, 0.3); border-left: 3px solid var(--jd-red); border-radius: 0 100px 100px 0; font-size: 13px; color: var(--amber-300); font-weight: 500; letter-spacing: 1px; margin-bottom: 28px; } .hero-badge-dot { width: 6px; height: 6px; background: var(--jd-red); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.8); } } .hero h1 { font-family: 'Noto Serif SC', serif; font-size: clamp(32px, 5vw, 56px); font-weight: 900; color: #fff; line-height: 1.25; letter-spacing: 2px; margin-bottom: 24px; } .hero h1 em { font-style: normal; background: linear-gradient(135deg, var(--amber-300), var(--amber-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: clamp(15px, 1.6vw, 18px); color: rgba(255,255,255,0.7); max-width: 580px; line-height: 1.8; margin-bottom: 48px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 4px; font-size: 15px; font-weight: 600; transition: all 0.25s; cursor: pointer; border: none; letter-spacing: 0.5px; } .btn-primary { background: linear-gradient(135deg, var(--jd-red), #c41d14); color: #fff; box-shadow: 0 4px 20px rgba(225, 37, 27, 0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(225, 37, 27, 0.45); background: linear-gradient(135deg, #ff3329, var(--jd-red)); } .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); } .btn-ghost:hover { border-color: var(--jd-red); color: #fff; background: var(--jd-red-soft); } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); max-width: 700px; } .hero-stat-num { font-family: 'Noto Serif SC', serif; font-size: 32px; font-weight: 700; color: var(--amber-400); line-height: 1; margin-bottom: 8px; position: relative; display: inline-block; } .hero-stat-num::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 24px; height: 2px; background: var(--jd-red); } .hero-stat-num sup { font-size: 16px; margin-left: 2px; } .hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.4; }  .section { padding: 100px 0; } .section-dark { background: var(--navy-900); color: #fff; } .section-light { background: #fff; } .section-gray { background: var(--gray-100); } .section-header { text-align: center; margin-bottom: 64px; } .section-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: var(--amber-500); text-transform: uppercase; margin-bottom: 16px; position: relative; padding: 4px 20px; border-top: 1px solid var(--jd-red); border-bottom: 1px solid var(--jd-red); } .section-title { font-family: 'Noto Serif SC', serif; font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; color: var(--gray-900); line-height: 1.3; margin-bottom: 16px; letter-spacing: 1px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 48px; height: 3px; background: var(--jd-red); border-radius: 2px; } .section-header { position: relative; } .section-header .section-title { margin-bottom: 28px; } .section-dark .section-title { color: #fff; } .section-desc { font-size: 16px; color: var(--gray-500); max-width: 640px; margin: 0 auto; line-height: 1.8; } .section-dark .section-desc { color: rgba(255,255,255,0.6); }  .industries { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; } .industry-item { padding: 36px 20px; text-align: center; background: #fff; border-right: 1px solid var(--gray-200); border-bottom: 2px solid transparent; transition: all 0.3s; position: relative; } .industry-item:last-child { border-right: none; } .industry-item:hover { background: var(--navy-800); border-bottom-color: var(--jd-red); } .industry-item:hover .industry-icon { color: var(--amber-400); } .industry-item:hover .industry-name { color: #fff; } .industry-icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--navy-700); transition: color 0.3s; } .industry-icon svg { width: 100%; height: 100%; } .industry-name { font-size: 14px; font-weight: 600; color: var(--gray-900); transition: color 0.3s; }  .about-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; } .about-company { font-family: 'Noto Serif SC', serif; font-size: 26px; font-weight: 700; color: var(--gray-900); margin-bottom: 20px; letter-spacing: 0.5px; } .about-desc { font-size: 15px; color: var(--gray-700); line-height: 1.95; margin-bottom: 18px; text-align: justify; } .about-desc:last-child { margin-bottom: 0; } .about-badges { background: var(--gray-100); border-radius: 8px; padding: 32px; } .about-badges-title { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--jd-red); display: inline-block; position: relative; } .about-badges-title::before { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 2px; background: var(--amber-500); } .badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .badge-item { background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 16px 14px; display: flex; align-items: flex-start; gap: 10px; transition: all 0.3s; } .badge-item:hover { border-color: var(--jd-red); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(225, 37, 27, 0.1); } .badge-icon { flex-shrink: 0; width: 32px; height: 32px; background: var(--jd-red-soft); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--jd-red); } .badge-icon svg { width: 16px; height: 16px; } .badge-item span { font-size: 13px; color: var(--gray-700); font-weight: 500; line-height: 1.5; padding-top: 4px; }  .partners-wall { background: rgba(255,255,255,0.97); border-radius: 12px; padding: 28px 32px; margin-bottom: 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.25); position: relative; overflow: hidden; } .partners-wall::before, .partners-wall::after { content: ''; position: absolute; width: 24px; height: 24px; border: 2px solid var(--jd-red); } .partners-wall::before { top: 0; left: 0; border-right: none; border-bottom: none; } .partners-wall::after { bottom: 0; right: 0; border-left: none; border-top: none; } .partner-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px 12px; } .partner-logo-card { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; } .partner-logo-card:hover { border-color: var(--jd-red); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(225,37,27,0.18); } .partner-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(0%) brightness(1); transition: filter 0.3s ease; } .partners-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; color: rgba(255,255,255,0.55); } .partners-names span { position: relative; padding-left: 14px; } .partners-names span::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--amber-400); transform: translateY(-50%); } .partners-names span:last-child::before { display: none; } .partners-names span:last-child { padding-left: 0; color: var(--jd-red); font-weight: 600; } .footer-logo-img { height: 44px; width: auto; display: block; } .footer-contact { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: grid; gap: 10px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; } .footer-contact-item svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; color: var(--jd-red); } .footer-contact-item.sub { padding-left: 24px; font-size: 12.5px; color: rgba(255,255,255,0.45); } .footer-contact-item strong { color: rgba(255,255,255,0.75); font-weight: 600; } .footer-contact-item .footer-hotline { color: var(--jd-red); font-weight: 600; font-size: 14px; } .footer-contact-item .footer-hotline strong { color: var(--jd-red); }  .selling-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .selling-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 40px 32px; transition: all 0.3s; position: relative; overflow: hidden; } .selling-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--jd-red), var(--amber-500)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; } .selling-card:hover { border-color: rgba(225, 37, 27, 0.35); background: rgba(225, 37, 27, 0.03); transform: translateY(-4px); } .selling-card:hover::before { transform: scaleX(1); } .selling-card-icon { position: relative; } .selling-card-icon::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 24px; height: 2px; background: var(--jd-red); border-radius: 1px; } .selling-card-icon { width: 52px; height: 52px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; background: rgba(200, 155, 60, 0.1); border-radius: 8px; color: var(--amber-400); } .selling-card-icon svg { width: 26px; height: 26px; } .selling-card h3 { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 14px; letter-spacing: 0.5px; } .selling-card p { font-size: 14.5px; color: rgba(255,255,255,0.55); line-height: 1.8; }  .feature-section { padding: 80px 0; border-bottom: 1px solid var(--gray-200); position: relative; } .feature-section:last-child { border-bottom: none; } .feature-section::before { content: ''; position: absolute; left: 0; top: 30px; width: 3px; height: 40px; background: var(--jd-red); border-radius: 0 2px 2px 0; } .feature-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .feature-layout.reverse .feature-visual { order: 2; } .feature-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--amber-500); letter-spacing: 2px; margin-bottom: 16px; padding-left: 14px; border-left: 3px solid var(--jd-red); } .feature-title { font-family: 'Noto Serif SC', serif; font-size: 32px; font-weight: 700; color: var(--gray-900); margin-bottom: 20px; letter-spacing: 1px; } .feature-desc { font-size: 15px; color: var(--gray-500); line-height: 1.9; margin-bottom: 28px; } .feature-list { display: grid; gap: 14px; } .feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--gray-700); line-height: 1.7; } .feature-item-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(200, 155, 60, 0.12); display: flex; align-items: center; justify-content: center; color: var(--amber-500); } .feature-item-check svg { width: 12px; height: 12px; } .feature-visual { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--navy-800); } .feature-visual-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .feature-visual-bg { position: absolute; inset: 0; opacity: 0.3; } .feature-visual-bg img { width: 100%; height: 100%; object-fit: cover; } .feature-mockup { position: relative; z-index: 2; width: 80%; background: rgba(15, 31, 56, 0.9); border: 1px solid rgba(200, 155, 60, 0.25); border-radius: 8px; overflow: hidden; backdrop-filter: blur(8px); } .mockup-header { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; } .mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); } .mockup-dot:nth-child(1) { background: #ff5f57; } .mockup-dot:nth-child(2) { background: #febc2e; } .mockup-dot:nth-child(3) { background: #28c840; } .mockup-title { margin-left: 12px; font-size: 11px; color: rgba(255,255,255,0.4); font-family: 'JetBrains Mono', monospace; } .mockup-body { padding: 24px; } .mockup-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; } .mockup-row:last-child { border-bottom: none; } .mockup-label { color: rgba(255,255,255,0.5); } .mockup-value { color: var(--amber-300); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .mockup-value.ok { color: #4ade80; } .mockup-value.warn { color: #fbbf24; } .mockup-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-top: 6px; } .mockup-bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber-500), var(--amber-300)); border-radius: 3px; }  .trace-flow { position: relative; padding: 40px 0; } .trace-flow-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(200, 155, 60, 0.3) 10%, rgba(200, 155, 60, 0.5) 50%, rgba(200, 155, 60, 0.3) 90%, transparent 100% ); } .trace-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; position: relative; } .trace-step { text-align: center; padding: 20px 12px; } .trace-step-icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--navy-800); border: 2px solid var(--amber-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--amber-400); position: relative; z-index: 2; } .trace-step-icon svg { width: 28px; height: 28px; } .trace-step h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; } .trace-step p { font-size: 12.5px; color: rgba(255,255,255,0.5); line-height: 1.6; }  .integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--gray-200); border-radius: 8px; overflow: hidden; } .integration-item { background: #fff; padding: 32px 24px; text-align: center; transition: all 0.3s; border-bottom: 2px solid transparent; position: relative; } .integration-item:hover { background: var(--navy-700); border-bottom-color: var(--jd-red); } .integration-item:hover h4 { color: #fff; } .integration-item:hover p { color: rgba(255,255,255,0.6); } .integration-item svg { width: 40px; height: 40px; margin-bottom: 14px; color: var(--amber-500); } .integration-item h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; transition: color 0.3s; } .integration-item p { font-size: 12.5px; color: var(--gray-500); transition: color 0.3s; }  .deployment-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; } .deploy-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 8px; padding: 40px 36px; transition: all 0.3s; position: relative; border-top: 3px solid transparent; } .deploy-card.featured { border-color: var(--amber-500); border-top: 3px solid var(--jd-red); box-shadow: 0 8px 32px rgba(200, 155, 60, 0.1); } .deploy-card.featured::before { content: '推荐'; position: absolute; top: -1px; right: 24px; background: var(--jd-red); color: #fff; padding: 4px 14px; font-size: 12px; font-weight: 700; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .deploy-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); border-top-color: var(--jd-red); } .deploy-card.featured:hover { box-shadow: 0 12px 40px rgba(225, 37, 27, 0.12); } .deploy-icon { width: 56px; height: 56px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; background: rgba(200, 155, 60, 0.1); border-radius: 8px; color: var(--amber-500); position: relative; } .deploy-icon::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--jd-red); border-radius: 1px; } .deploy-icon svg { width: 28px; height: 28px; } .deploy-card h3 { font-family: 'Noto Serif SC', serif; font-size: 24px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; } .deploy-tag { display: inline-block; padding: 4px 12px; background: rgba(200, 155, 60, 0.1); color: var(--amber-500); font-size: 12px; font-weight: 600; border-radius: 4px; margin-bottom: 20px; } .deploy-desc { font-size: 14.5px; color: var(--gray-500); line-height: 1.8; margin-bottom: 24px; } .deploy-features { display: grid; gap: 12px; } .deploy-features li { font-size: 14px; color: var(--gray-700); display: flex; align-items: center; gap: 10px; } .deploy-features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--jd-red); flex-shrink: 0; }  .cta-section { background: var(--navy-900); position: relative; overflow: hidden; padding: 100px 0; text-align: center; } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(200, 155, 60, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(30, 58, 95, 0.5) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(225, 37, 27, 0.08) 0%, transparent 40%); } .cta-content { position: relative; z-index: 2; } .cta-section h2 { font-family: 'Noto Serif SC', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: #fff; margin-bottom: 20px; letter-spacing: 1px; } .cta-section h2 em { font-style: normal; color: var(--amber-400); } .cta-section p { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 560px; margin: 0 auto 40px; line-height: 1.8; } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }  .footer { background: #070f1c; padding: 60px 0 32px; color: rgba(255,255,255,0.5); border-top: 3px solid var(--jd-red); } .footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand p { font-size: 14px; line-height: 1.8; margin-top: 16px; max-width: 360px; } .footer h5 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 20px; } .footer-links { display: grid; gap: 12px; } .footer-links a { font-size: 13.5px; color: rgba(255,255,255,0.5); transition: color 0.2s; } .footer-links a:hover { color: var(--amber-300); } .footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .footer-bottom a.footer-icp { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; } .footer-bottom a.footer-icp:hover { color: var(--amber-300); text-decoration: underline; } [data-custom-element^="doubao-watermark"] { display: none !important; }  @media (max-width: 968px) { .nav-links { display: none; } .about-layout { grid-template-columns: 1fr; gap: 40px; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } .industries { grid-template-columns: repeat(4, 1fr); } .selling-points { grid-template-columns: 1fr; } .feature-layout, .feature-layout.reverse .feature-visual { grid-template-columns: 1fr; order: initial; } .feature-visual { order: -1; } .trace-steps { grid-template-columns: repeat(3, 1fr); } .trace-flow-line { display: none; } .integration-grid { grid-template-columns: repeat(3, 1fr); } .deployment-cards { grid-template-columns: 1fr; } .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; } .section { padding: 70px 0; } } @media (max-width: 560px) { .badge-grid { grid-template-columns: 1fr; } .about-badges { padding: 24px; } .partners-wall { padding: 16px; } .partner-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; } .container { padding: 0 20px; } .nav-inner { padding: 0 20px; } .industries { grid-template-columns: repeat(2, 1fr); } .trace-steps { grid-template-columns: repeat(2, 1fr); } .integration-grid { grid-template-columns: repeat(2, 1fr); } .footer-main { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stat-num { font-size: 26px; } }

/* ================= 站点适配补充（锚点偏移 / 首屏背景 / 移动端菜单） ================= */
section[id], .cta-section[id] { scroll-margin-top: 76px; }

/* 首屏背景：原稿该容器为空，补一层深蓝渐变色，避免大面积纯黑 */
.hero-bg {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(30, 58, 95, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 68%, rgba(200, 155, 60, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(225, 37, 27, 0.07) 0%, transparent 45%),
    linear-gradient(160deg, #0a1628 0%, #0f1f38 55%, #0a1628 100%);
}

.nav-toggle { display: none; }

@media (max-width: 968px) {
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 40px; height: 40px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid rgba(200, 155, 60, 0.35); border-radius: 6px;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--amber-300); transition: 0.25s; }
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav.nav-open .nav-links {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 22, 40, 0.98); border-top: 1px solid rgba(200, 155, 60, 0.2);
    padding: 8px 20px 16px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }
  .nav.nav-open .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.82); }
  .nav.nav-open .nav-links a:last-child { border-bottom: none; margin-top: 12px; text-align: center; }
}

/* 中文字体回退：原稿指定 Noto Sans/Serif SC，本机无该字体时给出更贴近的系统中文字体 */
body { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.hero h1, .section-title, .feature-title, .selling-card h3, .about-company, .deploy-card h3, .cta-section h2 {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, SimSun, serif;
}

/* ===== 新闻动态区块 ===== */
.news-grid > * { min-width: 0; }
.news-featured { min-width: 0; }
.news-list { min-width: 0; }
.news-featured-imgwrap { min-height: 0; }
.news-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 40px; }
.news-tab { background: transparent; border: none; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--gray-500); padding: 10px 22px 12px; position: relative; transition: color .2s; letter-spacing: .5px; font-family: inherit; }
.news-tab::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 3px; background: var(--jd-red); border-radius: 2px; transition: width .25s; }
.news-tab:hover { color: var(--gray-900); }
.news-tab.active { color: var(--jd-red); }
.news-tab.active::after { width: 32px; }
.news-panel { display: none; }
.news-panel.active { display: block; animation: newsFade .35s ease; }
@keyframes newsFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.news-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: stretch; }
.news-featured { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(16,36,69,.08); transition: transform .3s, box-shadow .3s; }
.news-featured:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(16,36,69,.14); }
.news-featured-imgwrap { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.news-featured-imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-featured:hover .news-featured-imgwrap img { transform: scale(1.04); }
.news-featured-body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-featured-body h3 { font-size: 19px; font-weight: 700; color: var(--gray-900); line-height: 1.5; transition: color .2s; }
.news-featured:hover .news-featured-body h3 { color: var(--jd-red); }
.news-meta { font-size: 13px; color: var(--gray-500); }
.news-featured-body p { font-size: 14px; color: var(--gray-500); line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item { display: flex; gap: 18px; background: #fff; border-radius: 10px; padding: 20px 22px; box-shadow: 0 4px 18px rgba(16,36,69,.06); transition: transform .25s, box-shadow .25s; flex: 1; }
.news-item:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(16,36,69,.12); }
.news-item-date { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, var(--jd-red), #b5150c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.news-item-date b { font-size: 22px; font-weight: 700; font-family: 'Noto Serif SC', serif; }
.news-item-date span { font-size: 11px; opacity: .85; }
.news-item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.news-item-body h4 { font-size: 15.5px; font-weight: 600; color: var(--gray-900); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.news-item:hover .news-item-body h4 { color: var(--jd-red); }
.news-item-body p { font-size: 13px; color: var(--gray-500); line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-more { text-align: center; margin-top: 40px; }
.news-more a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--gray-700); padding: 12px 30px; border: 1px solid var(--gray-300); border-radius: 100px; transition: all .25s; }
.news-more a:hover { background: var(--jd-red); border-color: var(--jd-red); color: #fff; }
@media (max-width: 968px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-tabs { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .news-featured-body { padding: 20px; }
  .news-item { padding: 14px 16px; gap: 14px; }
  .news-item-date { width: 54px; height: 54px; }
  .news-item-date b { font-size: 18px; }
  .news-featured-body h3 { font-size: 17px; }
}

/* ===== 内页通用：横幅 / 面包屑 ===== */
.page-banner { background: linear-gradient(135deg, var(--navy-900), var(--navy-800) 60%, #0a1628); padding: 132px 0 56px; position: relative; overflow: hidden; }
.page-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 20%, rgba(200,155,60,0.12), transparent 50%), radial-gradient(ellipse at 10% 90%, rgba(225,37,27,0.08), transparent 45%); }
.page-banner-inner { position: relative; z-index: 2; }
.page-banner-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; color: var(--amber-300); border-top: 1px solid var(--jd-red); border-bottom: 1px solid var(--jd-red); padding: 4px 18px; margin-bottom: 18px; }
.page-banner-title { font-family: 'Noto Serif SC', serif; font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: #fff; letter-spacing: 1px; }
.page-banner-sub { margin-top: 12px; color: rgba(255,255,255,0.6); font-size: 15px; letter-spacing: 1px; }

.breadcrumb { padding: 22px 0; font-size: 14px; color: var(--gray-500); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--gray-500); transition: color .2s; }
.breadcrumb a:hover { color: var(--jd-red); }
.breadcrumb .sep { color: var(--gray-300); }
.breadcrumb .current { color: var(--gray-900); font-weight: 500; }

.page-section { padding: 12px 0 90px; }

/* 新闻列表布局 */
.news-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.news-main { min-width: 0; }
.news-cat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; border-bottom: 1px solid var(--gray-200); padding-bottom: 18px; }
.news-cat-tabs a { font-size: 14px; font-weight: 600; color: var(--gray-500); padding: 8px 18px; border-radius: 100px; border: 1px solid var(--gray-200); transition: all .2s; }
.news-cat-tabs a:hover { color: var(--jd-red); border-color: var(--jd-red); }
.news-cat-tabs a.active { background: var(--jd-red); border-color: var(--jd-red); color: #fff; }

.news-rows { display: flex; flex-direction: column; gap: 22px; }
.news-row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px; transition: all .3s; }
.news-row:hover { box-shadow: 0 12px 34px rgba(16,36,69,.12); border-color: rgba(225,37,27,.3); transform: translateY(-2px); }
.news-row-thumb { border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-800); }
.news-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-row:hover .news-row-thumb img { transform: scale(1.05); }
.news-row-main { min-width: 0; display: flex; flex-direction: column; }
.news-row-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 12px; }
.news-row-date { flex-shrink: 0; width: 62px; height: 62px; border-radius: 8px; background: linear-gradient(135deg, var(--jd-red), #b5150c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.news-row-date b { font-size: 22px; font-family: 'Noto Serif SC', serif; font-weight: 700; }
.news-row-date span { font-size: 11px; opacity: .85; }
.news-row-title { font-size: 19px; font-weight: 700; color: var(--gray-900); line-height: 1.5; align-self: center; }
.news-row-title a { transition: color .2s; }
.news-row:hover .news-row-title a { color: var(--jd-red); }
.news-row-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray-500); margin-bottom: 10px; flex-wrap: wrap; }
.news-row-meta .cat { color: var(--jd-red); font-weight: 600; }
.news-row-meta .dot { color: var(--gray-300); }
.news-row-desc { font-size: 14px; color: var(--gray-500); line-height: 1.8; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-row-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy-700); transition: color .2s; margin-top: auto; }
.news-row-more:hover { color: var(--jd-red); }

/* 侧边栏 */
.news-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 88px; }
.side-box { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 24px; }
.side-title { font-size: 16px; font-weight: 700; color: var(--gray-900); padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--jd-red); position: relative; }
.side-title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 2px; background: var(--amber-500); }
.side-cat { display: flex; flex-direction: column; gap: 2px; }
.side-cat a { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 6px; font-size: 14px; color: var(--gray-700); transition: all .2s; }
.side-cat a:hover, .side-cat a.active { background: var(--gray-100); color: var(--jd-red); }
.side-cat a span { font-size: 12px; color: var(--gray-500); background: var(--gray-100); border-radius: 100px; padding: 2px 10px; }
.side-cat a.active span { background: rgba(225,37,27,.1); color: var(--jd-red); }
.side-hot { display: flex; flex-direction: column; gap: 14px; }
.side-hot li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--gray-200); }
.side-hot li:last-child { border-bottom: none; padding-bottom: 0; }
.side-hot a { font-size: 14px; color: var(--gray-700); line-height: 1.6; transition: color .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-hot a:hover { color: var(--jd-red); }
.side-hot span { font-size: 12px; color: var(--gray-500); }

/* 分页 */
.pagebar { margin-top: 36px; display: flex; justify-content: center; }
.pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagination a, .pagination .page-num-current { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 14px; color: var(--gray-700); transition: all .2s; }
.pagination a:hover { border-color: var(--jd-red); color: var(--jd-red); }
.pagination .page-num-current { background: var(--jd-red); border-color: var(--jd-red); color: #fff; }

/* 空状态 */
.news-empty { text-align: center; padding: 60px 0; color: var(--gray-500); font-size: 15px; }

/* 文章详情 */
.article { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 40px; }
.article-head { text-align: center; padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--gray-200); }
.article-title { font-family: 'Noto Serif SC', serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--gray-900); line-height: 1.5; margin-bottom: 18px; }
.article-meta { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 13px; color: var(--gray-500); flex-wrap: wrap; }
.article-meta .cat { color: var(--jd-red); font-weight: 600; }
.article-meta .dot { color: var(--gray-300); }
.article-body { font-size: 15.5px; color: var(--gray-700); line-height: 2; }
.article-body p { margin-bottom: 18px; }
.article-body img { max-width: 100%; border-radius: 8px; margin: 18px 0; }
.article-body h2, .article-body h3 { color: var(--gray-900); margin: 28px 0 14px; font-family: 'Noto Serif SC', serif; }
.article-prevnext { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.article-prevnext a { display: block; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 8px; padding: 16px 18px; font-size: 14px; color: var(--gray-700); transition: all .2s; }
.article-prevnext a:hover { border-color: var(--jd-red); color: var(--jd-red); }
.article-prevnext .pn-label { font-size: 12px; color: var(--gray-500); margin-bottom: 6px; }
.article-prevnext .pn-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-prevnext .next { text-align: right; }

/* 导航当前项高亮 */
.nav-links a.active { color: var(--amber-300); }

/* 内页响应式 */
@media (max-width: 968px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-side { position: static; }
  .news-row { grid-template-columns: 1fr; }
  .news-row-thumb { aspect-ratio: 16 / 9; }
  .article { padding: 24px; }
}
@media (max-width: 560px) {
  .news-row-head { gap: 12px; }
  .news-row-date { width: 54px; height: 54px; }
  .news-row-date b { font-size: 18px; }
  .news-row-title { font-size: 17px; }
  .article-prevnext { grid-template-columns: 1fr; }
  .article-prevnext .next { text-align: left; }
}

/* 导航提前折叠：避免 7 个导航项在 968~1080 之间拥挤/重叠（仅作用于导航，不影响其他板块断点） */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; cursor: pointer; background: transparent; border: 1px solid rgba(200, 155, 60, 0.35); border-radius: 6px; }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--amber-300); transition: 0.25s; }
  .nav-links { display: none; }
  .nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav.nav-open .nav-links { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(10, 22, 40, 0.98); border-top: 1px solid rgba(200, 155, 60, 0.2); padding: 8px 20px 16px; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
  .nav.nav-open .nav-links a { padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); }
  .nav.nav-open .nav-links a:last-child { border-bottom: none; margin-top: 12px; text-align: center; }
}