:root { --blue:#1264ff; --deep:#071a3a; --ink:#14213d; --muted:#61708d; --line:#e6ecf5; --bg:#f7faff; --cyan:#14b8d4; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:118px; }
body { color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.7; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.container { width:min(1180px,calc(100% - 40px)); margin:auto; }
/* ============ 滚动揭示动效 ============ */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease,transform .8s cubic-bezier(.16,.8,.32,1); }
.reveal.left { transform:translateX(-46px); } .reveal.right { transform:translateX(46px); }
.reveal.zoom { transform:scale(.9); }
.reveal.show { opacity:1; transform:none; }
.d1 { transition-delay:.12s; } .d2 { transition-delay:.24s; } .d3 { transition-delay:.36s; } .d4 { transition-delay:.48s; }
/* ============ 顶栏 & 导航 ============ */
.topline { background:linear-gradient(90deg,#071a3a,#0c2f6b,#071a3a); background-size:200% 100%; animation:toplineFlow 9s linear infinite; color:#b9c8e5; font-size:12px; }
@keyframes toplineFlow { 0% { background-position:0 0; } 100% { background-position:200% 0; } }
.topline .container { display:flex; justify-content:space-between; padding:7px 0; }
header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.84); border-bottom:1px solid #dbe7f65e; backdrop-filter:blur(18px); transition:box-shadow .3s,background .3s,border-color .3s; }
header.scrolled { background:rgba(255,255,255,.95); border-bottom-color:#d7e4f6; box-shadow:0 14px 34px #10265d12; }
.nav { height:76px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:12px; align-items:center; font-weight:700; font-size:19px; }
.brand img { width:148px; height:52px; object-fit:contain; padding:6px 10px; border-radius:10px; background:#294583; box-shadow:0 5px 14px #29458335; transition:transform .3s,box-shadow .3s; }
.brand:hover img { transform:translateY(-2px) scale(1.02); box-shadow:0 10px 22px #29458355; }
.brand small { display:block; color:var(--muted); font-size:10px; font-weight:400; letter-spacing:1px; }
nav { display:flex; align-items:center; gap:24px; font-size:14px; color:#4c5a73; }
nav a { position:relative; padding:4px 0; transition:color .25s; white-space:nowrap; }
nav a:not(.nav-cta):after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:right .3s ease; }
nav a:hover:after, nav a.active:after { right:0; }
nav a:hover, nav a.active { color:var(--blue); }
.nav-cta, .btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; font-weight:600; transition:.25s; }
.nav-cta { color:#fff; background:linear-gradient(135deg,#1458df,#0ca3dd); padding:10px 17px; box-shadow:0 12px 24px #1264ff2b; }
.btn { padding:13px 23px; gap:8px; }
.btn:before, .nav-cta:before { content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(105deg,transparent,#ffffff59,transparent); transform:skewX(-20deg); transition:left .5s ease; }
.btn:hover:before, .nav-cta:hover:before { left:130%; }
.btn-primary { color:#fff; background:linear-gradient(120deg,var(--blue),#0a9bdc); box-shadow:0 12px 24px #1264ff2b; }
.btn-primary:hover, .nav-cta:hover { transform:translateY(-2px); box-shadow:0 16px 30px #1264ff45; }
.btn-light { color:var(--blue); border:1px solid #b9d0ff; background:#fff; }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 12px 26px #1264ff22; }
.menu-btn { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.menu-btn i { width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.menu-btn.open i:nth-child(1) { transform:translateY(7px) rotate(45deg); } .menu-btn.open i:nth-child(2) { opacity:0; } .menu-btn.open i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.m-nav { display:none; flex-direction:column; gap:4px; padding:10px 20px 16px; background:#fff; border-bottom:1px solid var(--line); }
.m-nav a { padding:11px 6px; border-bottom:1px dashed #eef2f9; font-size:15px; } .m-nav a:active { color:var(--blue); }
.m-nav.open { display:flex; animation:mNavDrop .3s ease; }
@keyframes mNavDrop { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
/* ============ Hero ============ */
.hero { position:relative; overflow:hidden; background:
linear-gradient(115deg,#071a3a 0%,#0b2f6d 62%,#0b65b7 100%),
radial-gradient(circle at 20% 20%,#6edbff1a,transparent 28%),
radial-gradient(circle at 80% 70%,#8ef0d214,transparent 24%);
 color:#fff; }
.hero:after { content:""; position:absolute; width:700px; height:700px; right:-180px; top:-250px; border:1px solid #64d8ff44; border-radius:50%; box-shadow:0 0 0 70px #64d8ff0d,0 0 0 140px #64d8ff08; animation:ringBreath 7s ease-in-out infinite; }
@keyframes ringBreath { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.06); opacity:.55; } }
.hero .glow { position:absolute; width:480px; height:480px; left:-160px; bottom:-220px; border-radius:50%; background:radial-gradient(circle,#14b8d43a,transparent 65%); animation:glowDrift 11s ease-in-out infinite; pointer-events:none; }
@keyframes glowDrift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(70px,-45px); } }
.particles { position:absolute; inset:0; pointer-events:none; z-index:0; }
.particles i { position:absolute; width:5px; height:5px; border-radius:50%; background:#6edbff; opacity:0; animation:floatUp 9s linear infinite; }
.particles i:nth-child(1){left:8%;animation-delay:0s} .particles i:nth-child(2){left:22%;animation-delay:2.2s;width:3px;height:3px} .particles i:nth-child(3){left:37%;animation-delay:4.6s} .particles i:nth-child(4){left:55%;animation-delay:1.4s;width:3px;height:3px} .particles i:nth-child(5){left:68%;animation-delay:5.8s} .particles i:nth-child(6){left:82%;animation-delay:3.3s;width:4px;height:4px} .particles i:nth-child(7){left:93%;animation-delay:7.1s;width:3px;height:3px}
@keyframes floatUp { 0% { bottom:-4%; opacity:0; } 12% { opacity:.75; } 82% { opacity:.5; } 100% { bottom:104%; opacity:0; } }
.hero .container { min-height:580px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:70px; position:relative; z-index:1; padding-top:20px; padding-bottom:20px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:#72d8ff; font-size:13px; letter-spacing:2px; margin-bottom:20px; font-weight:600; padding:6px 14px; border:1px solid #72d8ff3d; border-radius:30px; background:#72d8ff10; }
.eyebrow:before { content:""; width:7px; height:7px; border-radius:50%; background:#3ce0b8; box-shadow:0 0 0 0 #3ce0b8aa; animation:dotPulse 2s ease-out infinite; }
@keyframes dotPulse { 0% { box-shadow:0 0 0 0 #3ce0b8aa; } 100% { box-shadow:0 0 0 9px #3ce0b800; } }
.hero h1 { font-size:clamp(38px,5vw,66px); line-height:1.18; letter-spacing:-2px; margin-bottom:22px; }
.hero h1 span { background:linear-gradient(90deg,#6edbff,#8ef0d2,#6edbff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:gradFlow 5s linear infinite; }
@keyframes gradFlow { 0% { background-position:0 0; } 100% { background-position:200% 0; } }
.typing { display:inline-block; border-right:3px solid #6edbff; padding-right:5px; white-space:nowrap; animation:caretBlink .9s step-end infinite; }
@keyframes caretBlink { 0%,100% { border-color:#6edbff; } 50% { border-color:transparent; } }
.hero p { max-width:570px; color:#c5d5ef; font-size:17px; margin-bottom:30px; }
.hero-proof { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.hero-proof span { padding:8px 14px; border-radius:999px; border:1px solid #7ad8ff33; background:#ffffff12; color:#d9ecff; font-size:12px; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.hero .btn-light { background:#ffffff12; border-color:#ffffff55; color:#fff; }
.hero .btn-ghost { color:#dbe9ff; border:1px dashed #8ec7ff6e; background:transparent; }
.hero .btn-ghost:hover { transform:translateY(-2px); background:#ffffff12; }
.hero-panel { padding:26px; border:1px solid #ffffff2d; border-radius:22px; background:linear-gradient(180deg,#ffffff14,#ffffff0a); backdrop-filter:blur(14px); animation:panelFloat 6s ease-in-out infinite; box-shadow:0 32px 60px #02132b36; }
@keyframes panelFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
.panel-title { font-size:13px; color:#a9c8ef; margin-bottom:20px; }
.cloud-map { min-height:280px; border-radius:10px; background:radial-gradient(circle at 50% 50%,#149ce844 0 2px,transparent 3px),linear-gradient(145deg,#ffffff09,#ffffff02); background-size:34px 34px,100% 100%; position:relative; overflow:hidden; }
.cloud-map:before,.cloud-map:after { content:""; position:absolute; background:#5bd7ff; opacity:.7; filter:blur(.3px); }
.cloud-map:before { width:70%; height:1px; top:50%; left:15%; box-shadow:0 -65px 0 #5bd7ff55,0 65px 0 #5bd7ff55; }
.cloud-map:after { width:1px; height:70%; left:50%; top:15%; box-shadow:-100px 0 0 #5bd7ff44,100px 0 0 #5bd7ff44; }
.orbit { position:absolute; left:50%; top:50%; width:215px; height:215px; margin:-107px 0 0 -107px; border:1px dashed #6edbff4c; border-radius:50%; animation:spin 22s linear infinite; }
.orbit b { position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:#6edbff; box-shadow:0 0 12px #6edbff; }
@keyframes spin { to { transform:rotate(360deg); } }
.node { position:absolute; z-index:2; width:76px; height:76px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:12px; text-align:center; background:#1264ff; box-shadow:0 0 0 9px #1264ff24,0 0 30px #13bce6aa; animation:nodeBob 4s ease-in-out infinite; transition:transform .3s; }
.node:hover { transform:scale(1.12); }
@keyframes nodeBob { 0%,100% { margin-top:0; } 50% { margin-top:-6px; } }
.node.center { left:calc(50% - 38px); top:calc(50% - 38px); background:linear-gradient(135deg,#1b87ff,#10c4d7); animation:centerPulse 2.6s ease-out infinite; }
@keyframes centerPulse { 0% { box-shadow:0 0 0 0 #14b8d47a,0 0 30px #13bce6aa; } 70% { box-shadow:0 0 0 22px #14b8d400,0 0 30px #13bce6aa; } 100% { box-shadow:0 0 0 0 #14b8d400,0 0 30px #13bce6aa; } }
.node.n1 { left:10%; top:20%; animation-delay:.4s; } .node.n2 { right:8%; top:20%; animation-delay:1.1s; } .node.n3 { left:10%; bottom:14%; animation-delay:1.8s; } .node.n4 { right:8%; bottom:14%; animation-delay:2.5s; }
/* ============ 合作信任 ============ */
.hero-side-proof { display:grid; gap:10px; margin-top:18px; }
.hero-side-proof div { padding:12px 14px; border-radius:16px; background:linear-gradient(180deg,#ffffff12,#ffffff08); border:1px solid #ffffff1f; box-shadow:inset 0 1px 0 #ffffff12; }
.hero-side-proof strong { display:block; color:#fff; font-size:13px; margin-bottom:3px; }
.hero-side-proof span { color:#bdd3f3; font-size:12px; }
.trust-band { position:relative; overflow:hidden; background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%); border-bottom:1px solid var(--line); }
.trust-band:before { content:""; position:absolute; inset:0; opacity:.45; background-image:linear-gradient(#1264ff0c 1px,transparent 1px),linear-gradient(90deg,#1264ff0c 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); animation:gridShift 14s linear infinite; }
.trust-band:after { content:""; position:absolute; inset:auto 0 0; height:90px; background:linear-gradient(180deg,transparent,#ffffff80); pointer-events:none; }
.trust-band .container { position:relative; z-index:1; }
.trust-head { max-width:760px; margin:0 auto 34px; text-align:center; }
.trust-head h2 { position:relative; display:inline-block; padding-bottom:10px; }
.trust-head h2:after { content:""; position:absolute; left:12%; right:12%; bottom:0; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,#1264ff,#21c9e8,transparent); background-size:220% 100%; animation:titleFlow 5s linear infinite; }
.trust-head p { color:var(--muted); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-card { position:relative; padding:24px 20px; border-radius:20px; background:linear-gradient(180deg,#ffffff,#f7fbff); border:1px solid #dce9fb; box-shadow:0 18px 34px #112f650d; overflow:hidden; isolation:isolate; }
.trust-card:before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#1458df,#29d0e8,#1458df); background-size:180% 100%; animation:barFlow 6s linear infinite; }
.trust-card:after { content:""; position:absolute; top:-58px; right:-58px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,#1264ff14,transparent 68%); }
.trust-no { position:absolute; right:14px; top:12px; font-size:11px; font-weight:700; color:#8aa5ca; letter-spacing:.12em; }
.trust-card strong { display:block; margin-bottom:8px; color:#112f5f; font-size:17px; }
.trust-card p { color:#5a6d8d; font-size:14px; }
@keyframes gridShift { from { background-position:0 0,0 0; } to { background-position:36px 36px,36px 36px; } }
@keyframes titleFlow { from { background-position:0 0; } to { background-position:220% 0; } }
@keyframes barFlow { from { background-position:0 0; } to { background-position:180% 0; } }
/* ============ 资质展示 ============ */
.cert-showcase { position:relative; overflow:hidden; background:linear-gradient(180deg,#061632 0%,#0a2552 58%,#0b3f73 100%); color:#fff; }
.cert-showcase:before { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(#73dcff16 1px,transparent 1px),linear-gradient(90deg,#73dcff16 1px,transparent 1px); background-size:44px 44px; }
.cert-showcase:after { content:""; position:absolute; width:760px; height:760px; right:-260px; top:-260px; border-radius:50%; border:1px solid #7bddff22; box-shadow:0 0 0 70px #7bddff08,0 0 0 140px #7bddff06; }
.cert-layout { position:relative; z-index:1; display:grid; grid-template-columns:.92fr 1.08fr; gap:54px; align-items:center; }
.cert-copy h2 { color:#fff; max-width:620px; }
.cert-copy p { color:#bfd3f0; }
.cert-points { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 22px; }
.cert-points span { padding:8px 14px; border-radius:999px; background:#ffffff10; border:1px solid #7bdcff26; color:#def0ff; font-size:12px; }
.cert-notes { display:grid; gap:14px; }
.cert-notes div { padding:16px 18px; border-radius:18px; background:#ffffff0c; border:1px solid #ffffff1a; box-shadow:inset 0 1px 0 #ffffff0f; }
.cert-notes strong { display:block; color:#fff; margin-bottom:5px; font-size:15px; }
.cert-notes span { color:#bdd3f3; font-size:13px; }
.cert-stage { position:relative; min-height:470px; display:grid; place-items:center; padding:18px 24px; }
.cert-plaque { position:relative; width:min(100%,620px); padding:24px; border-radius:28px; background:linear-gradient(145deg,#ffffff 0%,#f3f8ff 40%,#e3efff 100%); border:1px solid #d9e9fb; box-shadow:0 38px 80px #020f2d54; overflow:hidden; }
.cert-plaque:before { content:""; position:absolute; inset:1px; border-radius:27px; background:linear-gradient(180deg,#ffffffc8,transparent 22%,transparent 78%,#d9eaff55); pointer-events:none; }
.cert-plaque:after { content:""; position:absolute; top:-10%; left:-35%; width:45%; height:120%; background:linear-gradient(105deg,transparent,#ffffff9c,transparent); transform:skewX(-20deg); animation:plaqueShine 5.8s ease-in-out infinite; pointer-events:none; }
@keyframes plaqueShine { 0%,60%,100% { left:-35%; } 24% { left:120%; } }
.plaque-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid #dce8f7; position:relative; z-index:1; }
.plaque-mark { color:#1264ff; font-size:12px; letter-spacing:.14em; font-weight:700; }
.plaque-status { padding:6px 12px; border-radius:999px; background:#e8f3ff; color:#0f4daf; font-size:12px; font-weight:700; }
.plaque-body { display:grid; grid-template-columns:180px 1fr; gap:24px; padding-top:22px; position:relative; z-index:1; }
.plaque-logo { display:grid; place-items:center; padding:22px; border-radius:22px; background:linear-gradient(180deg,#0e2e62,#174d97); box-shadow:inset 0 1px 0 #ffffff18,0 20px 34px #0a2b6240; }
.plaque-logo img { width:100%; max-width:132px; height:auto; display:block; }
.plaque-content strong { display:block; color:#0f2548; font-size:28px; line-height:1.25; margin-bottom:10px; }
.plaque-content p { color:#58708f; font-size:14px; line-height:1.8; margin-bottom:20px; }
.plaque-meta { display:grid; gap:10px; }
.plaque-meta span { display:flex; align-items:center; gap:8px; color:#214a82; font-size:12px; font-weight:600; }
.plaque-meta span:before { content:""; width:7px; height:7px; border-radius:50%; background:#2ac8e5; box-shadow:0 0 10px #2ac8e588; }
.plaque-seal { position:absolute; right:22px; bottom:22px; width:112px; height:112px; border-radius:50%; display:grid; place-items:center; border:2px solid #1264ff33; color:#1264ff; font-size:12px; font-weight:800; letter-spacing:.16em; background:radial-gradient(circle,#ffffff 0%,#ecf5ff 68%,#dceaff 100%); box-shadow:0 12px 24px #1264ff1c; transform:rotate(-18deg); }
.cert-float-card { position:absolute; z-index:2; width:220px; padding:16px 18px; border-radius:18px; background:linear-gradient(180deg,#173f74f2,#12325fe8); border:1px solid #93dfff33; backdrop-filter:blur(6px); box-shadow:0 18px 36px #020f2d30; animation:floatCard 6s ease-in-out infinite; }
.cert-float-card b { display:block; color:#fff; margin-bottom:6px; font-size:16px; }
.cert-float-card span { display:block; color:#d7e7fb; font-size:12px; line-height:1.7; }
.cert-float-a { left:10px; top:14px; }
.cert-float-b { right:6px; bottom:18px; animation-delay:1.8s; }
@keyframes floatCard { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
/* ============ 通用区块 ============ */
section { padding:94px 0; } .section-head { max-width:680px; margin-bottom:43px; } .section-head.center { text-align:center; margin-left:auto; margin-right:auto; }
.kicker { color:var(--blue); font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
h2 { font-size:36px; line-height:1.25; letter-spacing:-1px; margin-bottom:13px; } .section-head p { color:var(--muted); }
/* ============ 能力卡片 ============ */
.services-section { position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#061735 0%,#0a2857 55%,#063f70 100%); }
.services-section:before { content:""; position:absolute; width:620px; height:620px; right:-250px; top:-250px; border:1px solid #57d8ff3b; border-radius:50%; box-shadow:0 0 0 55px #57d8ff0d,0 0 0 115px #57d8ff08; animation:ringBreath 8s ease-in-out infinite; pointer-events:none; }
.services-section:after { content:""; position:absolute; inset:0; opacity:.22; pointer-events:none; background-image:linear-gradient(#72d8ff18 1px,transparent 1px),linear-gradient(90deg,#72d8ff18 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%); }
.services-section > .container { position:relative; z-index:1; }
.services-section .section-head.center { max-width:780px; margin-bottom:58px; }
.services-section .section-head h2 { color:#fff; font-size:clamp(32px,4vw,48px); }
.services-section .section-head p { color:#b9cce8; font-size:15px; }
.services-section .kicker { color:#70dcff; }
.cards { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; align-items:stretch; }
.card { position:relative; background:linear-gradient(145deg,#102f60e8,#09234be8); border:1px solid #75b9ed42; border-radius:22px; padding:32px; transition:transform .35s,box-shadow .35s,border-color .35s; overflow:hidden; box-shadow:0 18px 45px #020d251f; }
.cards .card:nth-child(1) { grid-column:span 2; }
.cards .card:nth-child(2) { grid-column:span 2; transform:translateY(28px); }
.cards .card:nth-child(3) { grid-column:span 2; }
.cards .card:nth-child(2):hover { transform:translateY(20px); }
.card:after { content:""; position:absolute; width:170px; height:170px; right:-85px; bottom:-95px; border:1px solid #6edbff28; border-radius:50%; box-shadow:0 0 0 24px #6edbff08; }
.card h3 { color:#fff; }
.card p { color:#b5c9e5; }
.tag-row span { color:#83ddff; background:#1b6d9f3b; border:1px solid #61c9f52e; }
.card:hover { transform:translateY(-9px); box-shadow:0 25px 55px #020d2566; border-color:#6edbff99; }
.card:before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--blue),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.services-section .workbuddy-demo { color:#14213d; background:linear-gradient(135deg,#f5f9ff 0%,#e7f1ff 55%,#fdfefe 100%); border:1px solid #b9d7fa; box-shadow:0 22px 55px #020d2545; }
.services-section .workbuddy-demo .demo-copy h3 { color:#10264d; text-shadow:none; }
.services-section .workbuddy-demo .demo-copy p { color:#536b91; }
.services-section .workbuddy-demo .demo-copy .kicker { color:#138bd0; }
.services-section .workbuddy-demo .demo-points { color:#1264ff; }
.services-section .workbuddy-demo .chat-window { color:#14213d; }
.card:hover:before { transform:scaleX(1); }
.card:hover { transform:translateY(-8px); box-shadow:0 22px 46px #132c5d18; border-color:#bfd4ff; }
.icon { width:58px; height:58px; display:grid; place-items:center; color:#70dcff; background:linear-gradient(135deg,#1e5b9c,#123968); border:1px solid #63cfff55; border-radius:17px; font-size:25px; margin-bottom:26px; animation:iconFloat 3s ease-in-out infinite; transition:.35s; box-shadow:0 8px 20px #02132944; }
.card:hover .icon { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; transform:rotate(-8deg) scale(1.08); }
.card:nth-child(2) .icon { animation-delay:.45s; } .card:nth-child(3) .icon { animation-delay:.9s; }
.card h3 { font-size:19px; margin-bottom:9px; } .card p { color:var(--muted); font-size:14px; }
.tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; } .tag-row span { padding:3px 9px; border-radius:20px; color:var(--blue); background:#edf4ff; font-size:11px; transition:.3s; }
.card:hover .tag-row span { background:#dcebff; }
/* ============ 对话演示 ============ */
.workbuddy-demo { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; margin-top:62px; padding:35px; border-radius:16px; background:linear-gradient(135deg,#eef6ff,#fff); border:1px solid #dbe8fb; overflow:hidden; }
.demo-copy h3 { font-size:28px; line-height:1.35; margin-bottom:14px; } .demo-copy p { color:var(--muted); font-size:14px; }
.demo-points { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:22px; color:var(--blue); font-size:13px; }
.chat-window { height:318px; min-height:318px; box-sizing:border-box; display:flex; flex-direction:column; padding:17px; border:1px solid #d8e5fb; border-radius:13px; background:#fff; box-shadow:0 18px 45px #1d4d9918; animation:windowFloat 5s ease-in-out infinite; overflow:hidden; }
.chat-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:13px; border-bottom:1px solid #edf1f8; font-size:13px; color:#425371; } .chat-top span { width:9px; height:9px; border-radius:50%; background:#13b8da; box-shadow:15px 0 #ffd361,30px 0 #ff7f8d; margin-right:22px; } .chat-top i { color:#9aa9bf; font-style:normal; }
.chat-message { max-width:88%; margin-top:13px; padding:9px 12px; border-radius:9px; font-size:12px; line-height:1.55; opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; } .chat-message.on { opacity:1; transform:none; } .chat-message.bot { background:#f0f5ff; color:#455a7c; } .chat-message.user { margin-left:auto; background:#1264ff; color:#fff; }
.chat-typing { display:none; margin-top:13px; padding:10px 14px; width:56px; border-radius:9px; background:#f0f5ff; } .chat-typing.on { display:flex; gap:5px; }
.chat-typing b { width:6px; height:6px; border-radius:50%; background:#8fa6cd; animation:typingDot 1s ease-in-out infinite; } .chat-typing b:nth-child(2){animation-delay:.16s} .chat-typing b:nth-child(3){animation-delay:.32s}
@keyframes typingDot { 0%,100% { transform:translateY(0); opacity:.5; } 50% { transform:translateY(-4px); opacity:1; } }
.chat-input { margin-top:auto; padding:10px 12px; color:#9aa9bf; border:1px solid #e3eaf5; border-radius:7px; font-size:12px; flex-shrink:0; } .chat-input b { float:right; color:#1264ff; font-size:17px; line-height:14px; animation:arrowNudge 1.6s ease-in-out infinite; display:inline-block; }
@keyframes arrowNudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes iconFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } } @keyframes windowFloat { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-7px) rotate(.5deg); } }
/* ============ 场景 & 指标 ============ */
#solutions { position:relative; overflow:hidden; color:#eaf4ff; background:linear-gradient(125deg,#071a3a 0%,#0b2d61 58%,#074b79 100%); }
#solutions:before { content:""; position:absolute; width:620px; height:620px; left:-330px; top:-190px; border:1px solid #62d9ff2b; border-radius:50%; box-shadow:0 0 0 55px #62d9ff09,0 0 0 115px #62d9ff05; animation:ringBreath 9s ease-in-out infinite; pointer-events:none; }
#solutions:after { content:""; position:absolute; inset:0; opacity:.2; background-image:linear-gradient(#78d8ff16 1px,transparent 1px),linear-gradient(90deg,#78d8ff16 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent); pointer-events:none; }
#solutions > .container { position:relative; z-index:1; }
#solutions .section-head h2 { color:#fff; }
#solutions .section-head p { color:#b8cce7; }
#solutions .kicker { color:#72dcff; }
.two-col { display:grid; grid-template-columns:1.02fr .98fr; gap:68px; align-items:center; }
.service-list { display:grid; gap:12px; padding:0; list-style:none; }
.service-list li { position:relative; padding:17px 20px 17px 25px; color:#b9cde7; background:linear-gradient(100deg,#12386be8,#0d2a54cc); border:1px solid #6ebdf52b; border-left:3px solid #39c8fa; border-radius:10px; font-size:14px; transition:transform .3s,box-shadow .3s,background .3s,border-color .3s; }
.service-list li:before { content:""; position:absolute; left:10px; top:23px; width:5px; height:5px; border-radius:50%; background:#6ee3ff; box-shadow:0 0 10px #6ee3ff; }
.service-list li:hover { transform:translateX(9px); background:#164578; border-color:#65d6ff88; box-shadow:0 12px 26px #020f2d66; }
.service-list b { display:block; margin-bottom:5px; color:#fff; font-size:15px; }
.metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.metric { position:relative; min-height:148px; padding:23px 23px 19px; overflow:hidden; background:linear-gradient(145deg,#f3f8ff,#dcecff); border:1px solid #b9d9fa; border-radius:16px; color:#17345e; transition:transform .3s,box-shadow .3s,border-color .3s; }
.metric:before { content:""; position:absolute; width:100px; height:100px; right:-38px; top:-42px; border:1px solid #1264ff25; border-radius:50%; box-shadow:0 0 0 16px #1264ff08; }
.metric:after { content:""; position:absolute; left:23px; right:23px; bottom:15px; height:3px; border-radius:3px; background:linear-gradient(90deg,#1264ff,#28c8e8); transform:scaleX(.62); transform-origin:left; transition:transform .35s; }
.metric:hover { transform:translateY(-8px); border-color:#6edbff; box-shadow:0 18px 38px #020e2d55; }
.metric:hover:after { transform:scaleX(1); }
.metric strong { position:relative; z-index:1; color:#1264ff; display:block; font-size:31px; line-height:1.1; letter-spacing:-1px; }
.metric span { position:relative; z-index:1; display:block; margin-top:8px; color:#5b7498; font-size:13px; }
.metric small { position:relative; z-index:1; display:block; margin-top:7px; color:#7890b2; font-size:11px; }
.metrics-area { display:grid; gap:24px; }
.metrics-area .metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.delivery-services { padding:24px; border:1px solid #8bc9ed55; border-radius:16px; background:linear-gradient(145deg,#103d72dd,#0b2b57dd); box-shadow:0 15px 34px #020f2d2e; }
.delivery-title { display:flex; align-items:baseline; justify-content:space-between; gap:15px; margin-bottom:18px; }
.delivery-title span { color:#70dcff; font:600 10px "Microsoft YaHei",Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.delivery-title h3 { color:#fff; font-size:20px; }
.delivery-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.delivery-item { display:flex; align-items:flex-start; gap:10px; min-height:86px; padding:12px; border:1px solid #70cfff2e; border-radius:10px; background:#174577aa; transition:transform .3s,background .3s,border-color .3s; }
.delivery-item:hover { transform:translateY(-4px); background:#1c5487; border-color:#70dcff99; }
.delivery-item i { flex:0 0 29px; width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:#0c4779; background:#8de4ff; font-style:normal; font-size:16px; }
.delivery-item b { display:block; margin-bottom:4px; color:#fff; font-size:13px; }
.delivery-item span { display:block; color:#bcd2e9; font-size:11px; line-height:1.65; }
/* ============ 选择理由 ============ */
.value-section { position:relative; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%); }
.value-section:before { content:""; position:absolute; inset:0; opacity:.4; background-image:radial-gradient(circle at 20% 20%,#1264ff06,transparent 18%),radial-gradient(circle at 80% 80%,#14b8d406,transparent 18%); pointer-events:none; }
.value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-card { position:relative; padding:28px 22px; border-radius:22px; border:1px solid #d9e7fb; background:linear-gradient(180deg,#ffffff,#f8fbff); box-shadow:0 16px 34px #112f650b; transition:transform .3s, box-shadow .3s, border-color .3s; overflow:hidden; }
.value-card:after { content:""; position:absolute; right:-24px; top:-24px; width:110px; height:110px; border-radius:50%; border:1px solid #1264ff12; box-shadow:0 0 0 18px #1264ff08; }
.value-card:hover { transform:translateY(-6px); border-color:#97c7ff; box-shadow:0 20px 38px #112f6517; }
.value-card b { display:inline-flex; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; margin-bottom:18px; color:#1264ff; background:#ebf3ff; font-size:13px; }
.value-card h3 { font-size:20px; line-height:1.4; color:#132a50; margin-bottom:10px; }
.value-card p { color:#607390; font-size:14px; }
/* ============ 服务流程 ============ */
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; } .process:before { content:""; height:2px; background:linear-gradient(90deg,#cddbf2,#1264ff66,#cddbf2); background-size:200% 100%; animation:toplineFlow 4s linear infinite; left:9%; right:9%; top:25px; position:absolute; } .step { text-align:center; position:relative; z-index:1; } .step i { display:grid; place-items:center; width:50px; height:50px; margin:0 auto 17px; border-radius:50%; background:#e9f2ff; color:var(--blue); border:7px solid var(--bg); font-style:normal; font-weight:bold; transition:.35s; } .step:hover i { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; transform:scale(1.12); box-shadow:0 0 0 8px #1264ff1c; } .step h3 { font-size:16px; margin-bottom:5px; } .step p { color:var(--muted); font-size:13px; padding:0 12px; }
/* ============ CTA ============ */
.cta { position:relative; overflow:hidden; background:linear-gradient(110deg,#09244f,#0d4a96 58%,#0ca0d6 130%); color:#fff; } .cta:before { content:""; position:absolute; width:420px; height:420px; right:-120px; top:-190px; border-radius:50%; background:radial-gradient(circle,#6edbff2e,transparent 65%); animation:glowDrift 9s ease-in-out infinite; } .cta .container { position:relative; display:flex; justify-content:space-between; align-items:center; gap:35px; } .cta h2 { margin:0; } .cta p { color:#cce1ff; margin-top:8px; }
.contact-points { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.contact-points span { padding:8px 12px; border-radius:999px; background:#ffffff12; border:1px solid #ffffff26; color:#e1eeff; font-size:12px; }
.cta-actions { display:flex; flex-direction:column; gap:12px; min-width:240px; }
/* ============ 页脚 ============ */
footer { background:linear-gradient(180deg,#06142f,#081d42 72%,#071a3a); color:#fff; padding:46px 0 20px; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:35px; } footer h3 { font-size:17px; margin-bottom:15px; } footer p,footer li { color:#9eb0ce; font-size:13px; margin-bottom:7px; transition:color .25s; } footer li:hover { color:#dfe9ff; } footer ul { list-style:none; } .footer-bottom { border-top:1px solid #ffffff18; margin-top:35px; padding-top:17px; color:#8094b7; font-size:12px; }
.about-panel { padding:28px; border-radius:18px; background:linear-gradient(180deg,#ffffff,#f7fbff); border:1px solid #dce8fa; box-shadow:0 14px 28px #112f650d; }
.about-panel h3 { font-size:24px; color:#132a50; margin-bottom:14px; }
.about-panel ul { list-style:none; display:grid; gap:12px; }
.about-panel li { color:#607390; font-size:14px; padding-bottom:12px; border-bottom:1px dashed #d6e4f8; }
.about-panel li:last-child { border-bottom:none; padding-bottom:0; }
/* ============ 返回顶部 ============ */
.to-top { position:fixed; right:22px; bottom:26px; z-index:60; width:44px; height:44px; border:none; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; font-size:18px; cursor:pointer; box-shadow:0 12px 26px #1264ff45; opacity:0; pointer-events:none; transform:translateY(14px); transition:.35s; }
.to-top.show { opacity:1; pointer-events:auto; transform:none; } .to-top:hover { transform:translateY(-4px); }
@media(max-width:800px){ .topline .container{display:none} nav{display:none} .menu-btn{display:flex} .workbuddy-demo{grid-template-columns:1fr;gap:30px;padding:24px}.brand img{width:132px;height:48px}.hero .container,.two-col,.cert-layout{grid-template-columns:1fr; gap:35px} .hero .container{padding-top:62px;padding-bottom:70px;min-height:auto} .hero-panel{max-width:560px}.hero-proof,.contact-points{gap:8px}.cta-actions{width:100%}.cards{grid-template-columns:1fr;gap:16px}.cards .card:nth-child(1),.cards .card:nth-child(2),.cards .card:nth-child(3){grid-column:auto;transform:none}.cards .card:nth-child(2):hover{transform:translateY(-9px)}.services-section .section-head.center{margin-bottom:38px}.two-col{gap:38px}.trust-grid,.value-grid{grid-template-columns:repeat(2,1fr)}.cert-stage{min-height:auto;padding:16px 0 0}.cert-plaque{width:100%}.plaque-body{grid-template-columns:1fr;gap:18px}.plaque-logo{max-width:240px}.cert-float-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}.metrics{gap:12px}.metric{min-height:135px;padding:20px 18px}.metric strong{font-size:25px}.metric small{font-size:10px}.metrics-area{gap:20px}.delivery-services{padding:20px}.delivery-grid{gap:10px}.cta .container{align-items:flex-start;flex-direction:column} section{padding:70px 0} h2{font-size:30px}.process{grid-template-columns:repeat(2,1fr);gap:30px}.process:before{display:none}.footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .container{width:min(100% - 28px,1180px)} .brand{font-size:16px}.brand small{display:none}.hero h1{letter-spacing:-1px}.metrics{gap:10px}.metric{padding:18px}.metric strong{font-size:28px}.footer-grid,.trust-grid,.value-grid{grid-template-columns:1fr}.hero-panel{padding:15px}.cloud-map{min-height:235px}.chat-window{height:300px;min-height:300px}.metrics-area .metrics,.delivery-grid{grid-template-columns:1fr}.delivery-title{display:block}.delivery-title span{display:block;margin-bottom:6px}.cert-showcase{padding-top:74px}.cert-points{gap:8px}.plaque-content strong{font-size:23px}.plaque-seal{position:relative;right:auto;bottom:auto;margin-top:18px;transform:none} }
/* ============ 新增：动态效果增强 ============ */
::selection { background:#1264ff; color:#fff; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
/* 顶部滚动进度条 */
.scroll-bar { position:fixed; top:0; left:0; height:3px; width:0; z-index:120; background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 10px #1264ff99; }
.cursor-ring { display:none !important; }
/* 云图连线流动 */
.cloud-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.cloud-lines path { fill:none; stroke:#5bd7ff; stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:7 11; opacity:.5; animation:lineFlow 3.6s linear infinite; }
@keyframes lineFlow { to { stroke-dashoffset:-36; } }
/* 流程连线光点 */
.process:after { content:""; position:absolute; top:25px; left:9%; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); z-index:2; animation:dotTravel 5.5s ease-in-out infinite; }
@keyframes dotTravel { 0% { left:9%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:calc(91% - 9px); opacity:0; } }
@media(max-width:800px){ .process:after{ display:none; } }
/* 返回顶部进度环 */
.to-top svg { position:absolute; inset:-5px; width:54px; height:54px; transform:rotate(-90deg); pointer-events:none; }
.to-top svg circle { fill:none; stroke-width:2.5; }
.to-top .ring-bg { stroke:#ffffff55; }
.to-top .ring-fg { stroke:#fff; stroke-dasharray:125.6; stroke-dashoffset:125.6; }
/* Hero 面板呼吸渐变描边 */
.hero-panel { position:relative; }
.hero-panel:before { content:""; position:absolute; inset:-1px; border-radius:14px; padding:1px; background:linear-gradient(120deg,transparent,#6edbff66,#8ef0d2aa,#6edbff66,transparent); background-size:300% 100%; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:borderFlow 6s linear infinite; pointer-events:none; }
@keyframes borderFlow { 0% { background-position:0 0; } 100% { background-position:300% 0; } }
/* 卡片标题悬停着色 */
.card h3 { transition:color .3s; } .card:hover h3 { color:var(--blue); }
.trust-card,.value-card,.metric,.delivery-services,.about-panel,.cert-plaque { transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; }
.trust-card:hover,.about-panel:hover,.cert-plaque:hover { transform:translateY(-6px); box-shadow:0 24px 44px #112f6518; }
.trust-card:hover .trust-no { color:#1264ff; }
/* 页脚顶部光边 */
footer { border-top:1px solid #1264ff33; box-shadow:inset 0 18px 30px -24px #14b8d455; }
/* 页面载入淡入 */
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }
body { animation:pageIn .7s ease; }
@media(prefers-reduced-motion:reduce){ *,*:before,*:after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }