/* ===== Reset & Base ===== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #f8fafc;
    color: #334155;
    line-height: 1.7;
    overflow-x: hidden;
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#e2e8f0; }
::-webkit-scrollbar-thumb { background:linear-gradient(135deg,#1e3a5f,#2563eb); border-radius:3px; }

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
.section-inner { max-width:1200px; margin:0 auto; padding:80px 24px; }
.section-label {
    display:inline-block; padding:4px 16px; border-radius:50px;
    background:rgba(30,58,95,0.08); color:#1e3a5f;
    font-size:0.8rem; letter-spacing:1px; margin-bottom:16px;
}
.section-title { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:#0f172a; margin-bottom:16px; line-height:1.3; }
.section-desc { color:#64748b; font-size:1.05rem; max-width:700px; }

/* ===== Navigation ===== */
.nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(30,58,95,0.1);
    transition: all 0.3s;
}
.nav-inner {
    max-width:1200px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
}
.nav-logo {
    font-size:1.05rem; font-weight:700; color:#1e3a5f;
    letter-spacing: 0.5px; white-space:nowrap; text-decoration:none;
}
.nav-logo:hover { text-decoration: none; }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a {
    color:#475569; text-decoration:none; font-size:0.9rem;
    transition:color 0.3s; position:relative;
}
.nav-links a:hover, .nav-links a.active { color:#1e3a5f; text-decoration:none; }
.nav-links a::after {
    content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px;
    background:linear-gradient(90deg,#1e3a5f,#2563eb); transition:width 0.3s;
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-cta {
    padding:8px 20px; border-radius:50px;
    background:linear-gradient(135deg,#1e3a5f,#2563eb);
    color:#fff !important; font-size:0.85rem; text-decoration:none;
    transition: transform 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); text-decoration:none; }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
.nav-toggle span { width:26px; height:2px; background:#1e3a5f; transition:0.3s; border-radius:2px; }

/* ===== Hero ===== */
.hero {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    background: radial-gradient(ellipse at 20% 50%, rgba(30,58,95,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(37,99,235,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(30,58,95,0.03) 0%, transparent 50%);
}
.hero canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.hero-content { position:relative; z-index:1; text-align:center; padding:0 24px; max-width:800px; }
.hero-badge {
    display:inline-block; padding:6px 20px; border-radius:50px;
    background:rgba(30,58,95,0.08); border:1px solid rgba(30,58,95,0.15);
    color:#1e3a5f; font-size:0.85rem; margin-bottom:28px; letter-spacing:2px;
}
.hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; line-height:1.2; margin-bottom:20px; }
.hero-sub { font-size:1.15rem; color:#64748b; margin-bottom:40px; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-primary {
    display:inline-block; padding:14px 36px; border-radius:50px;
    background:linear-gradient(135deg,#1e3a5f,#2563eb); color:#fff;
    text-decoration:none; font-size:0.95rem; font-weight:600;
    transition: transform 0.2s, box-shadow 0.2s;
    border:none; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,0.25); text-decoration:none; }
.btn-secondary {
    display:inline-block; padding:14px 36px; border-radius:50px;
    background:rgba(255,255,255,0.8); color:#1e3a5f;
    text-decoration:none; font-size:0.95rem; font-weight:600;
    border:1px solid rgba(30,58,95,0.2); transition: all 0.2s;
}
.btn-secondary:hover { border-color:rgba(30,58,95,0.4); text-decoration:none; }

/* ===== Products Grid ===== */
.product-tabs {
    display:flex; justify-content:center; gap:12px; margin-bottom:48px; flex-wrap:wrap;
}
.product-tab {
    padding:10px 28px; border-radius:50px; cursor:pointer; transition:all 0.3s;
    background:rgba(30,58,95,0.04); border:1px solid rgba(30,58,95,0.1);
    color:#64748b; font-size:0.9rem;
}
.product-tab:hover, .product-tab.active {
    background:rgba(30,58,95,0.1); border-color:rgba(30,58,95,0.3); color:#1e3a5f;
}
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-card {
    background:#fff; border:1px solid rgba(30,58,95,0.08);
    border-radius:20px; overflow:hidden; transition:all 0.4s;
}
.product-card:hover {
    border-color:rgba(30,58,95,0.15); transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,0.08);
}
.product-card-img {
    height:200px; background:linear-gradient(135deg,rgba(30,58,95,0.06),rgba(37,99,235,0.04));
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.product-card-img img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }
.product-badge {
    position:absolute; top:16px; right:16px; z-index:2;
    padding:4px 14px; border-radius:50px;
    background:rgba(30,58,95,0.1); color:#1e3a5f; font-size:0.75rem;
}
.product-card-body { padding:24px; }
.product-card-body h4 { font-size:1.05rem; color:#0f172a; margin-bottom:6px; }
.product-card-body .spec { color:#1e3a5f; font-size:0.8rem; margin-bottom:10px; }
.product-card-body p { color:#94a3b8; font-size:0.85rem; line-height:1.6; }
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.product-tag-sm { padding:4px 10px; border-radius:6px; font-size:0.7rem; background:rgba(30,58,95,0.05); color:#64748b; }

/* ===== Services ===== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card {
    background:#fff; border:1px solid rgba(30,58,95,0.08);
    border-radius:20px; padding:36px 28px; transition:all 0.4s;
}
.service-card:hover { border-color:rgba(30,58,95,0.15); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.service-icon {
    width:80px; height:80px; border-radius:20px; overflow:hidden;
    margin-bottom:24px; border:1px solid rgba(30,58,95,0.1);
}
.service-icon img { width:100%; height:100%; object-fit:cover; }
.service-card h3 { font-size:1.25rem; color:#0f172a; margin-bottom:12px; }
.service-card p { color:#64748b; font-size:0.95rem; margin-bottom:20px; }
.service-features { list-style:none; padding:0; }
.service-features li {
    color:#475569; font-size:0.88rem; padding:6px 0; padding-left:24px; position:relative;
}
.service-features li::before {
    content:''; position:absolute; left:0; top:14px;
    width:6px; height:6px; border-radius:50%; background:rgba(37,99,235,0.5);
}
.service-link {
    display:inline-block; margin-top:16px; color:#2563eb; font-size:0.9rem; font-weight:600;
}

/* ===== Advantages ===== */
.advantages-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.advantage-card {
    background:#fff; border:1px solid rgba(30,58,95,0.08);
    border-radius:20px; padding:36px 28px; text-align:center; transition:all 0.4s;
}
.advantage-card:hover { border-color:rgba(30,58,95,0.15); box-shadow:0 0 30px rgba(0,0,0,0.06); }
.advantage-icon {
    width:70px; height:70px; border-radius:50%; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center; font-size:1.8rem;
    background:linear-gradient(135deg,rgba(30,58,95,0.1),rgba(37,99,235,0.1));
    border:1px solid rgba(30,58,95,0.1);
}
.advantage-card h4 { font-size:1.1rem; color:#0f172a; margin-bottom:8px; }
.advantage-card p { color:#64748b; font-size:0.9rem; }
.advantage-highlight {
    display:inline-block; padding:4px 14px; border-radius:50px;
    background:rgba(30,58,95,0.08); color:#1e3a5f; font-size:0.8rem; margin-top:12px;
}

/* ===== Clients ===== */
.clients { background:linear-gradient(180deg,transparent,rgba(30,58,95,0.02),transparent); }
.clients-marquee {
    overflow:hidden; padding:20px 0;
    mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.clients-track { display:flex; gap:60px; animation:marquee 25s linear infinite; width:max-content; }
.client-tag {
    padding:12px 32px; border-radius:12px;
    background:rgba(30,58,95,0.04); border:1px solid rgba(30,58,95,0.08);
    color:#64748b; font-size:0.95rem; white-space:nowrap;
}
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ===== Partner Bar ===== */
.partner-bar {
    display:flex; justify-content:center; align-items:center; gap:40px;
    margin-top:60px; padding-top:40px; border-top:1px solid rgba(30,58,95,0.08); flex-wrap:wrap;
}
.partner-item { display:flex; flex-direction:column; align-items:center; gap:8px; }
.partner-logo {
    width:80px; height:80px; border-radius:50%;
    background:rgba(30,58,95,0.06); border:1px solid rgba(30,58,95,0.1);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color:#1e3a5f; font-weight:700;
}
.partner-name { color:#94a3b8; font-size:0.8rem; }

/* ===== Breadcrumb ===== */
.breadcrumb {
    max-width:1200px; margin:0 auto; padding:100px 24px 20px;
    font-size:0.85rem; color:#94a3b8;
}
.breadcrumb a { color:#64748b; text-decoration:none; }
.breadcrumb a:hover { color:#1e3a5f; }
.breadcrumb span { margin:0 8px; color:#cbd5e1; }

/* ===== Page Header ===== */
.page-header {
    max-width:1200px; margin:0 auto; padding:20px 24px 40px;
}
.page-header h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; color:#0f172a; margin-bottom:16px; }
.page-header .page-desc { color:#64748b; font-size:1.05rem; max-width:700px; }

/* ===== Content Section ===== */
.content-section { max-width:900px; margin:0 auto; padding:40px 24px; }
.content-section h2 { font-size:1.6rem; font-weight:700; color:#0f172a; margin:40px 0 16px; }
.content-section h3 { font-size:1.25rem; font-weight:600; color:#1e3a5f; margin:32px 0 12px; }
.content-section p { color:#475569; font-size:1rem; margin-bottom:16px; line-height:1.8; }
.content-section ul, .content-section ol { color:#475569; margin-bottom:20px; padding-left:24px; }
.content-section li { margin-bottom:8px; line-height:1.8; }
.content-section img { max-width:100%; border-radius:16px; margin:24px 0; }

/* ===== FAQ ===== */
.faq-section { max-width:800px; margin:0 auto; padding:40px 24px; }
.faq-item {
    background:#fff; border:1px solid rgba(30,58,95,0.08);
    border-radius:16px; padding:24px 28px; margin-bottom:16px;
}
.faq-item h3 { font-size:1.1rem; color:#0f172a; margin-bottom:10px; cursor:pointer; }
.faq-item p { color:#64748b; font-size:0.95rem; line-height:1.7; }

/* ===== Contact ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; margin:0 auto; }
.contact-info-card {
    background:#fff; border:1px solid rgba(30,58,95,0.08);
    border-radius:20px; padding:40px;
}
.contact-info-card h3 { font-size:1.2rem; color:#0f172a; margin-bottom:20px; }
.contact-info-card p { color:#64748b; margin-bottom:12px; font-size:0.95rem; }
.contact-info-card strong { color:#1e3a5f; }

/* ===== CTA Section ===== */
.cta-section {
    background:linear-gradient(135deg,#1e3a5f,#2563eb);
    border-radius:24px; padding:60px 40px; text-align:center; margin:60px auto;
    max-width:1100px;
}
.cta-section h2 { color:#fff; font-size:2rem; margin-bottom:16px; }
.cta-section p { color:rgba(255,255,255,0.85); font-size:1.05rem; margin-bottom:32px; }

/* ===== Footer ===== */
.footer {
    background:#0f172a; color:#94a3b8; padding:60px 24px 30px;
}
.footer-inner {
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand h3 { color:#fff; font-size:1.1rem; margin-bottom:12px; }
.footer-brand p { font-size:0.88rem; line-height:1.7; }
.footer-col h4 { color:#e2e8f0; font-size:0.95rem; margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { color:#94a3b8; text-decoration:none; font-size:0.88rem; }
.footer-col a:hover { color:#fff; text-decoration:none; }
.footer-bottom {
    max-width:1200px; margin:40px auto 0; padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.08);
    text-align:center; font-size:0.82rem; color:#64748b;
}
.footer-bottom a { color:#64748b; text-decoration:none; }
.footer-sys { margin-bottom:14px; }
.footer-sys a { color:#94a3b8; text-decoration:none; font-size:0.85rem; transition:color 0.2s; }
.footer-sys a:hover { color:#fff; }
.footer-sys span { color:#475569; margin:0 6px; }

/* ===== Reveal Animation ===== */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.6s; }
.reveal.active { opacity:1; transform:translateY(0); }

/* ===== Stats Bar ===== */
.stats-bar {
    display:flex; justify-content:center; gap:60px; flex-wrap:wrap;
    padding:40px 24px; background:rgba(30,58,95,0.02);
}
.stat-item { text-align:center; }
.stat-num { font-size:2.5rem; font-weight:800; color:#1e3a5f; }
.stat-label { color:#94a3b8; font-size:0.9rem; margin-top:4px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .nav-links { display:none; position:fixed; top:0; right:0; width:260px; height:100vh;
        background:#fff; flex-direction:column; padding:80px 24px; gap:20px;
        box-shadow:-4px 0 20px rgba(0,0,0,0.1); }
    .nav-links.open { display:flex; }
    .nav-toggle { display:flex; }
    .products-grid { grid-template-columns:1fr; }
    .services-grid { grid-template-columns:1fr; }
    .advantages-grid { grid-template-columns:repeat(2,1fr); }
    .contact-grid { grid-template-columns:1fr; }
    .footer-inner { grid-template-columns:1fr 1fr; }
    .stats-bar { gap:30px; }
}
@media (max-width: 600px) {
    .advantages-grid { grid-template-columns:1fr; }
    .footer-inner { grid-template-columns:1fr; }
    .stats-bar { gap:20px; }
    .stat-num { font-size:1.8rem; }
}


/* ===== Software Section (2026-07-31) ===== */
.software-section {
    background: linear-gradient(180deg, #0f172a 0%, #1e3a5f 100%);
    position: relative;
    overflow: hidden;
}
.software-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(37,99,235,0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(30,58,95,0.3) 0%, transparent 50%);
    pointer-events: none;
}
.software-section .section-inner { position: relative; z-index: 1; }
.software-section .section-label {
    background: rgba(37,99,235,0.2);
    color: #93c5fd;
}
.software-section .section-title { color: #f1f5f9; }
.software-section .section-desc { color: #94a3b8; }

.sw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.sw-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 32px 24px;
    transition: all 0.4s;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.sw-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    opacity: 0;
    transition: opacity 0.4s;
}
.sw-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(59,130,246,0.3);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}
.sw-card:hover::before { opacity: 1; }

.sw-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(96,165,250,0.15));
    border: 1px solid rgba(59,130,246,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.6rem;
}
.sw-card h4 {
    font-size: 1.05rem;
    color: #f1f5f9;
    margin-bottom: 8px;
    font-weight: 700;
}
.sw-card .sw-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(59,130,246,0.15);
    color: #93c5fd;
    font-size: 0.72rem;
    margin-bottom: 14px;
}
.sw-card p {
    color: #94a3b8;
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 16px;
}
.sw-features {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.sw-features li {
    color: #cbd5e1;
    font-size: 0.82rem;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}
.sw-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #60a5fa;
    font-weight: 700;
    font-size: 0.78rem;
}
.sw-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s;
}
.sw-link:hover { gap: 10px; text-decoration: none; }

.sw-banner {
    margin-top: 48px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 16px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.sw-banner-text { flex: 1; min-width: 280px; }
.sw-banner-text h5 {
    color: #f1f5f9;
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.sw-banner-text p {
    color: #94a3b8;
    font-size: 0.88rem;
}
.sw-banner-btn {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sw-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59,130,246,0.4);
    text-decoration: none;
}

@media (max-width: 900px) {
    .sw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sw-grid { grid-template-columns: 1fr; }
    .sw-banner { flex-direction: column; text-align: center; }
}