/* ============================================================
   鑫乔安网络科技 - 企业官网样式 v2.0
   ============================================================ */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-bg: #eff6ff;
    --dark: #0f172a;
    --dark-2: #1e293b;
    --gray: #64748b;
    --gray-light: #94a3b8;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --white: #ffffff;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 35px rgba(37,99,235,0.12);
    --transition: all 0.3s ease;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif; color:#333; line-height:1.6; background:var(--white); }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:var(--transition); }
.header.scrolled { border-bottom:1px solid var(--border); box-shadow:0 2px 20px rgba(0,0,0,0.08); }
.header-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; height:68px; }
.logo { flex-shrink:0; }
.nav-list { display:flex; gap:32px; align-items:center; }
.nav-link { font-size:15px; color:var(--gray); font-weight:500; position:relative; padding:4px 0; transition:color 0.3s; }
.nav-link::after { content:""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--primary); border-radius:1px; transition:width 0.3s; }
.nav-link:hover, .nav-link.active { color:var(--primary); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.menu-toggle { display:none; background:none; border:none; width:32px; height:32px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:4px; }
.menu-toggle span { display:block; width:100%; height:2px; background:var(--dark); border-radius:2px; transition:var(--transition); }
.menu-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.hero { position:relative; min-height:85vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 50%,#2563eb 100%); padding-top:68px; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(circle at 20% 30%,rgba(59,130,246,0.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(99,102,241,0.1) 0%,transparent 50%); }
.hero-overlay { position:absolute; inset:0; opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size:60px 60px; }
.hero-content { position:relative; z-index:1; text-align:center; padding:0 20px; max-width:800px; }
.hero-badge { display:inline-block; padding:8px 20px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:50px; color:rgba(255,255,255,0.9); font-size:14px; font-weight:500; letter-spacing:1px; margin-bottom:24px; }
.hero-title { font-size:48px; font-weight:800; color:var(--white); line-height:1.2; margin-bottom:20px; letter-spacing:-0.5px; }
.text-gradient { background:linear-gradient(135deg,#60a5fa,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-desc { font-size:18px; color:rgba(255,255,255,0.75); margin-bottom:36px; line-height:1.8; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-wave { position:absolute; bottom:-1px; left:0; right:0; line-height:0; }
.hero-wave svg { display:block; width:100%; height:100px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 32px; font-size:15px; font-weight:600; border-radius:50px; border:none; cursor:pointer; transition:var(--transition); font-family:inherit; gap:6px; }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,99,235,0.3); }
.btn-outline { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.4); }
.btn-outline:hover { border-color:var(--white); background:rgba(255,255,255,0.1); transform:translateY(-2px); }
.btn-cta { background:var(--white); color:var(--primary); font-size:16px; padding:16px 45px; }
.btn-cta:hover { background:#f0f4ff; transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }
.btn-block { width:100%; }
.section-header { text-align:center; margin-bottom:50px; }
.section-tag { display:inline-block; padding:6px 16px; background:var(--primary-bg); color:var(--primary); font-size:13px; font-weight:600; border-radius:50px; letter-spacing:1px; margin-bottom:14px; }
.section-header h2 { font-size:32px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.section-header p { font-size:16px; color:var(--gray); max-width:600px; margin:0 auto; }
.section { padding:80px 0; }
.section-bg { background:var(--bg); }
.section-services { background:var(--white); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.service-card { background:var(--white); border-radius:var(--radius); padding:32px 24px; border:1px solid var(--border); transition:var(--transition); }
.service-card:hover { transform:translateY(-6px); border-color:var(--primary); box-shadow:var(--shadow-lg); }
.card-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; background:var(--primary-bg); border-radius:var(--radius); margin-bottom:18px; transition:var(--transition); }
.service-card:hover .card-icon { background:var(--primary); }
.service-card:hover .card-icon img { filter:brightness(10); }
.service-card h3 { font-size:20px; font-weight:600; color:var(--dark); margin-bottom:10px; }
.service-card > p { font-size:15px; color:var(--gray); line-height:1.7; margin-bottom:16px; }
.card-tags { display:flex; flex-wrap:wrap; gap:8px; }
.card-tags li { padding:4px 12px; background:var(--bg); border-radius:50px; font-size:13px; color:var(--gray); }
.section-stats { background:linear-gradient(135deg,var(--dark),#1e3a5f); padding:60px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat-item { color:var(--white); }
.stat-num { font-size:42px; font-weight:800; display:inline-block; }
.stat-plus, .stat-percent { font-size:28px; font-weight:700; color:var(--primary-light); }
.stat-label { display:block; font-size:15px; color:rgba(255,255,255,0.7); margin-top:6px; }
.section-why { background:var(--bg); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.why-item { background:var(--white); border-radius:var(--radius); padding:36px 28px; border:1px solid var(--border); transition:var(--transition); }
.why-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.why-number { font-size:36px; font-weight:800; color:var(--primary); opacity:0.3; margin-bottom:16px; line-height:1; }
.why-item h3 { font-size:20px; font-weight:600; color:var(--dark); margin-bottom:12px; }
.why-item p { font-size:15px; color:var(--gray); line-height:1.7; }
.section-cta { padding:0 0 80px; background:var(--white); }
.cta-box { text-align:center; background:linear-gradient(135deg,var(--primary),#7c3aed); border-radius:20px; padding:60px 40px; color:var(--white); }
.cta-box h2 { font-size:32px; font-weight:700; margin-bottom:14px; }
.cta-box p { font-size:16px; opacity:0.85; margin-bottom:30px; }
.footer { background:var(--dark-2); color:#cbd5e1; padding:60px 0 0; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand p { font-size:14px; line-height:1.8; margin-top:12px; opacity:0.8; }
.footer-links h4, .footer-services h4, .footer-contact h4 { color:var(--white); font-size:16px; font-weight:600; margin-bottom:16px; }
.footer-links ul li, .footer-services ul li, .footer-contact ul li { margin-bottom:8px; }
.footer-links ul li a, .footer-services ul li a { font-size:14px; opacity:0.8; transition:var(--transition); }
.footer-links ul li a:hover, .footer-services ul li a:hover { opacity:1; color:var(--primary-light); }
.contact-row { font-size:14px; opacity:0.8; }
.contact-label { font-size:16px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:20px 0; display:flex; justify-content:center; gap:20px; font-size:13px; opacity:0.6; flex-wrap:wrap; }
.footer-bottom a { color:var(--primary-light); }
.page-banner { position:relative; padding:120px 0 60px; background:linear-gradient(135deg,var(--dark),#1e3a5f); text-align:center; overflow:hidden; }
.page-banner-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,rgba(59,130,246,0.12) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(99,102,241,0.08) 0%,transparent 50%); }
.page-banner-content { position:relative; z-index:1; }
.page-banner-content h1 { font-size:36px; font-weight:700; color:var(--white); margin-bottom:10px; }
.page-banner-content p { font-size:16px; color:rgba(255,255,255,0.7); }
.about-intro { display:grid; grid-template-columns:1.5fr 1fr; gap:50px; align-items:start; }
.about-text .section-tag { margin-bottom:14px; }
.about-text h2 { font-size:28px; font-weight:700; color:var(--dark); margin-bottom:20px; line-height:1.3; }
.about-text p { font-size:16px; color:var(--gray); line-height:1.8; margin-bottom:14px; }
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-stat-card { background:var(--primary-bg); border-radius:var(--radius); padding:24px 16px; text-align:center; border:1px solid rgba(37,99,235,0.1); }
.about-stat-num { display:block; font-size:32px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.about-stat-label { font-size:14px; color:var(--gray); }
.scope-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.scope-item { background:var(--white); border-radius:var(--radius); padding:28px 20px; text-align:center; border:1px solid var(--border); transition:var(--transition); }
.scope-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.scope-icon { font-size:36px; margin-bottom:14px; }
.scope-item h3 { font-size:17px; font-weight:600; color:var(--dark); margin-bottom:8px; }
.scope-item p { font-size:14px; color:var(--gray); line-height:1.6; }
.culture-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.culture-card { background:var(--white); border-radius:var(--radius); padding:36px 28px; text-align:center; border:1px solid var(--border); transition:var(--transition); }
.culture-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.culture-img { width:80px; height:80px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:var(--primary-bg); border-radius:50%; }
.culture-card h3 { font-size:20px; font-weight:600; color:var(--dark); margin-bottom:10px; }
.culture-card p { font-size:15px; color:var(--gray); line-height:1.7; }
.service-list { display:flex; flex-direction:column; gap:24px; }
.service-detail-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:var(--transition); }
.service-detail-card:hover { border-color:var(--primary); box-shadow:var(--shadow); }
.service-detail-header { display:flex; gap:20px; align-items:center; padding:24px 32px; background:var(--bg); border-bottom:1px solid var(--border); }
.sd-icon { width:60px; height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--white); border-radius:var(--radius); }
.service-detail-header h3 { font-size:20px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.service-detail-header p { font-size:14px; color:var(--gray); }
.service-detail-body { padding:24px 32px; }
.service-detail-body > p { font-size:15px; color:var(--gray); line-height:1.7; margin-bottom:18px; }
.sd-sub h4 { font-size:15px; font-weight:600; color:var(--dark); margin-bottom:10px; }
.sd-sub ul { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sd-sub ul li { font-size:14px; color:var(--gray); padding-left:24px; position:relative; line-height:1.8; }
.sd-sub ul li::before { content:"\2192"; position:absolute; left:0; top:2px; color:var(--primary); font-weight:600; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contact-left .section-tag { margin-bottom:14px; }
.contact-left h2 { font-size:28px; font-weight:700; color:var(--dark); margin-bottom:10px; }
.contact-sub { font-size:15px; color:var(--gray); margin-bottom:30px; }
.contact-methods { display:flex; flex-direction:column; gap:20px; }
.contact-method { display:flex; gap:16px; align-items:flex-start; }
.cm-icon { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--primary-bg); border-radius:var(--radius); font-size:22px; }
.cm-info h4 { font-size:15px; font-weight:600; color:var(--dark); margin-bottom:4px; }
.cm-info p { font-size:14px; color:var(--gray); line-height:1.6; }
.cm-info a { color:var(--primary); }
.cm-info a:hover { text-decoration:underline; }
.contact-extra { margin-top:30px; padding:20px; background:var(--bg); border-radius:var(--radius); font-size:14px; color:var(--gray); line-height:1.8; }
.contact-extra strong { color:var(--dark); }
.contact-form-box { background:var(--white); border-radius:var(--radius); padding:36px; border:1px solid var(--border); box-shadow:var(--shadow); }
.contact-form-box h3 { font-size:22px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.contact-form-box > p { font-size:14px; color:var(--gray); margin-bottom:24px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:16px; }
.form-control { width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:15px; font-family:inherit; transition:border-color 0.3s,box-shadow 0.3s; background:var(--white); }
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control { appearance:auto; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-step { background:var(--white); border-radius:var(--radius); padding:32px 24px; text-align:center; border:1px solid var(--border); transition:var(--transition); }
.process-step:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.process-num { font-size:40px; font-weight:800; color:var(--primary); opacity:0.25; line-height:1; margin-bottom:14px; }
.process-step h3 { font-size:18px; font-weight:600; color:var(--dark); margin-bottom:8px; }
.process-step p { font-size:14px; color:var(--gray); }
.cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:var(--transition); }
.case-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.case-header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:var(--bg); border-bottom:1px solid var(--border); }
.case-tag { padding:4px 12px; background:var(--primary); color:var(--white); font-size:12px; font-weight:600; border-radius:50px; }
.case-date { font-size:13px; color:var(--gray-light); }
.case-body { padding:24px; }
.case-body h3 { font-size:18px; font-weight:600; color:var(--dark); margin-bottom:10px; }
.case-body p { font-size:14px; color:var(--gray); line-height:1.7; margin-bottom:16px; }
.case-tech { display:flex; flex-wrap:wrap; gap:8px; }
.case-tech span { padding:4px 12px; background:var(--primary-bg); color:var(--primary); font-size:13px; border-radius:50px; }
.animate-on-scroll { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
.animate-on-scroll.animate-in { opacity:1; transform:translateY(0); }
@media (max-width:992px) {
.hero-title { font-size:36px; }
.stats-grid{grid-template-columns:repeat(2,1fr)}
.why-grid{grid-template-columns:1fr 1fr}
.about-intro{grid-template-columns:1fr}
.scope-grid{grid-template-columns:repeat(2,1fr)}
.culture-grid{grid-template-columns:1fr 1fr}
.process-grid{grid-template-columns:repeat(2,1fr)}
.cases-grid{grid-template-columns:repeat(2,1fr)}
.footer-top{grid-template-columns:1fr 1fr}
.section{padding:60px 0}
.section-header h2{font-size:28px}
}
@media (max-width:768px) {
.nav-list{display:none;position:absolute;top:68px;left:0;right:0;background:var(--white);flex-direction:column;padding:16px 20px;box-shadow:0 10px 30px rgba(0,0,0,0.1);gap:0}
.nav-list.active{display:flex}
.nav-list li{width:100%;padding:12px 0;border-bottom:1px solid var(--border)}
.nav-list li:last-child{border-bottom:none}
.menu-toggle{display:flex}
.hero-title{font-size:28px}
.hero-desc{font-size:16px}
.hero-actions{flex-direction:column;align-items:center}
.hero-wave svg{height:50px}
.stats-grid{gap:20px}
.stat-num{font-size:32px}
.services-grid{grid-template-columns:1fr}
.why-grid{grid-template-columns:1fr}
.cta-box{padding:40px 24px}
.cta-box h2{font-size:24px}
.section{padding:40px 0}
.section-header h2{font-size:24px}
.section-header{margin-bottom:32px}
.page-banner{padding:100px 0 40px}
.page-banner-content h1{font-size:28px}
.about-intro{gap:30px}
.about-text h2{font-size:22px}
.about-stats{grid-template-columns:1fr 1fr}
.about-stat-num{font-size:26px}
.scope-grid{grid-template-columns:repeat(2,1fr)}
.culture-grid{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr;gap:30px}
.contact-form-box{padding:24px}
.form-row{grid-template-columns:1fr}
.process-grid{grid-template-columns:repeat(2,1fr)}
.cases-grid{grid-template-columns:1fr}
.service-detail-header{flex-direction:column;text-align:center;padding:20px 24px}
.service-detail-body{padding:20px 24px}
.sd-sub ul{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr;gap:24px}
.footer-bottom{flex-direction:column;text-align:center;gap:4px}
}
@media (max-width:480px) {
.scope-grid{grid-template-columns:1fr}
.process-grid{grid-template-columns:1fr}
.hero-title{font-size:24px}
}