:root { --ink:#101c4b; --muted:#5a6a8e; --line:#d7e5f6; --blue:#1766de; --cyan:#31c8e5; --surface:rgba(255,255,255,.82); --shadow:0 22px 70px rgba(26,87,161,.12); }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:#f6fbff;font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.6} body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.45;background-image:linear-gradient(30deg,rgba(84,149,214,.08) 1px,transparent 1px),linear-gradient(150deg,rgba(84,149,214,.08) 1px,transparent 1px);background-size:90px 52px} a{color:inherit;text-decoration:none} button{font:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;width:min(1180px,calc(100% - 40px));margin:16px auto 0;padding:10px 12px 10px 16px;border:1px solid rgba(170,204,238,.75);border-radius:999px;background:rgba(246,251,255,.78);box-shadow:0 12px 28px rgba(24,86,150,.08);backdrop-filter:blur(18px)} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;font-size:12px;background:linear-gradient(145deg,#1b74ea,#27c5df);box-shadow:0 6px 16px rgba(20,116,229,.24)} .nav-links{display:flex;gap:28px;margin-left:auto;margin-right:28px;color:var(--muted);font-size:14px}.nav-links a{transition:color .2s ease}.nav-links a:hover,.nav-links a:focus-visible{color:var(--blue)} .top-cta,.contact-button{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;background:var(--blue);box-shadow:0 10px 22px rgba(23,102,222,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.top-cta{padding:10px 16px;border-radius:999px;font-size:14px}.top-cta:hover,.contact-button:hover{transform:translateY(-2px);background:#0f53bd;box-shadow:0 14px 28px rgba(23,102,222,.3)}
main{overflow:clip}.poster-shell{width:min(1180px,calc(100% - 32px));margin:30px auto 0}.poster-wrap{position:relative;max-width:980px;margin:0 auto;padding:12px;border:1px solid rgba(175,208,240,.85);border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(231,245,255,.92));box-shadow:var(--shadow)} .poster-image{display:block;width:100%;height:auto;border-radius:26px}.poster-caption{display:flex;justify-content:space-between;width:min(980px,100%);margin:14px auto 0;padding:0 8px;color:#667a9a;font-size:11px;letter-spacing:.16em}.poster-caption span:last-child{letter-spacing:.04em}.hotspot{position:absolute;z-index:2}.hotspot button{display:block;width:100%;height:100%;padding:0;border:0;border-radius:999px;opacity:0;cursor:pointer;background:rgba(18,106,224,.08);transition:opacity .2s ease,box-shadow .2s ease}.hotspot button:hover,.hotspot button:focus-visible{opacity:1;outline:3px solid rgba(23,102,222,.55);box-shadow:0 0 0 6px rgba(23,102,222,.12)}.hotspot-knowledge{left:28%;bottom:21%;width:42%;height:4%}.hotspot-qa{left:10%;bottom:16%;width:43%;height:4%}.hotspot-office{left:10%;bottom:11%;width:43%;height:4%}.hotspot-private{right:8%;bottom:14%;width:39%;height:4%}
.capabilities{width:min(1040px,calc(100% - 40px));margin:110px auto 0}.section-heading{max-width:660px}.eyebrow{margin:0 0 12px;color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.22em}.section-heading h1{max-width:520px;margin:0;font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;letter-spacing:-.04em}.section-heading p:last-child{max-width:580px;margin:20px 0 0;color:var(--muted);font-size:18px}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}.capability-card{min-height:238px;padding:24px 20px 20px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 12px 30px rgba(44,106,163,.06);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.capability-card:hover,.capability-card:target{transform:translateY(-7px);border-color:rgba(23,102,222,.52);box-shadow:0 18px 34px rgba(28,101,174,.13)}.card-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:var(--blue);font-size:22px;background:linear-gradient(145deg,#dff4ff,#effbff)}.capability-card h2{margin:24px 0 8px;font-size:19px}.capability-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.card-tag{display:inline-block;margin-top:20px;padding:4px 10px;border-radius:99px;color:#1463c5;font-size:12px;background:#e9f5ff}
.contact{display:flex;align-items:center;justify-content:space-between;gap:32px;width:min(1040px,calc(100% - 40px));margin:120px auto 0;padding:42px 48px;border-radius:28px;color:#fff;background:radial-gradient(circle at 80% 20%,rgba(66,213,239,.38),transparent 34%),linear-gradient(120deg,#0c1b50,#114fa8);box-shadow:0 22px 60px rgba(15,62,144,.25)}.contact .eyebrow{color:#87e2f0}.contact h2{max-width:600px;margin:0;font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.2;letter-spacing:-.04em}.contact p:last-child{margin:14px 0 0;color:rgba(255,255,255,.76)}.contact-button{flex:0 0 auto;padding:15px 20px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:none}.contact-button:hover{background:#e8f6ff;color:var(--blue)}.footer{display:flex;justify-content:space-between;width:min(1040px,calc(100% - 40px));margin:26px auto 40px;color:#7f91ae;font-size:12px;letter-spacing:.04em}
@media (max-width:820px){.topbar{width:calc(100% - 24px);margin-top:10px}.nav-links{display:none}.poster-shell{width:calc(100% - 20px);margin-top:18px}.poster-wrap{padding:7px;border-radius:22px}.poster-image{border-radius:17px}.poster-caption{flex-direction:column;gap:2px;padding:0 2px;font-size:9px}.capabilities{margin-top:78px}.capability-grid{grid-template-columns:repeat(2,1fr)}.contact{flex-direction:column;align-items:flex-start;padding:32px 28px}.contact-button{width:100%;justify-content:center}.footer{flex-direction:column;gap:4px}}
@media (max-width:480px){.brand{font-size:14px}.top-cta{padding:9px 12px;font-size:12px}.capabilities,.contact,.footer{width:calc(100% - 28px)}.section-heading p:last-child{font-size:16px}.capability-grid{grid-template-columns:1fr}.capability-card{min-height:auto}.hotspot-knowledge{left:26%;width:47%}.hotspot-qa,.hotspot-office{left:8%;width:45%}.hotspot-private{right:6%;width:42%}}
.pulse-card{animation:cardPulse .9s ease}
@keyframes cardPulse{0%,100%{box-shadow:0 12px 30px rgba(44,106,163,.06)}50%{box-shadow:0 0 0 7px rgba(23,102,222,.14),0 18px 34px rgba(28,101,174,.16)}}
/* Cross-device refinements */
html, body { overflow-x: hidden; }
img { max-width: 100%; }
@media (min-width: 1440px) {
  .poster-shell { width: min(1080px, calc(100% - 64px)); }
  .poster-wrap { max-width: 1040px; }
  .capabilities, .contact, .footer { width: min(1120px, calc(100% - 64px)); }
  .capability-grid { gap: 18px; }
}
@media (max-width: 1024px) and (min-width: 821px) {
  .topbar { width: calc(100% - 36px); }
  .poster-shell { width: calc(100% - 36px); }
  .capabilities, .contact, .footer { width: calc(100% - 56px); }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { padding: 36px; }
}
@media (max-width: 640px) and (min-width: 481px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: auto; }
  .contact { margin-top: 88px; }
}
@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .brand { min-width: 0; white-space: nowrap; }
  .top-cta { white-space: nowrap; }
  .poster-caption { font-size: 10px; letter-spacing: .1em; }
}
@media (max-width: 360px) {
  .topbar { padding: 8px 8px 8px 10px; }
  .brand { gap: 7px; font-size: 12px; }
  .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
  .top-cta { padding: 8px 10px; font-size: 11px; }
  .contact { padding: 28px 22px; }
  .contact h2 { font-size: 1.7rem; }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 900px) {
  .topbar { position: relative; }
  .poster-shell { margin-top: 14px; }
}

.top-cta, .contact-button { border: 0; cursor: pointer; }
.wechat-modal-open { overflow: hidden; }
.wechat-dialog { width: min(380px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 36px 24px 24px; border: 1px solid #dce9ed; border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px #081b4038; text-align: center; overflow-y: auto; }
.wechat-dialog::backdrop { background: #081b4070; backdrop-filter: blur(5px); }
.wechat-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #5a6a8e; cursor: pointer; font-size: 28px; line-height: 1; }
.wechat-logo { display: block; width: 72px; height: 72px; margin: 0 auto 18px; }
.wechat-dialog h2 { margin: 0 0 8px; font-size: 24px; }
.wechat-dialog p { font-size: 14px; line-height: 1.6; }
#wechat-help { margin: 0 0 18px; color: var(--muted); }
.wechat-id { display: block; width: 100%; min-width: 0; padding: 12px 6px; border: 1px solid #e0ece5; border-radius: 12px; background: #f3faf6; color: #183d29; text-align: center; font: 600 18px/1.6 system-ui, sans-serif; }
.wechat-copy { width: 100%; min-height: 48px; margin-top: 16px; padding: 12px; border: 0; border-radius: 12px; background: #078842; color: white; font-weight: 700; cursor: pointer; }
.wechat-copy:hover { background: #066f36; }
.wechat-copy:disabled { opacity: .65; cursor: wait; }
.wechat-status { min-height: 2.8em; margin: 12px 0 0; color: #3f6751; }
.wechat-dialog button:focus-visible, .wechat-id:focus-visible, [data-wechat-open]:focus-visible { outline: 3px solid #1766de; outline-offset: 3px; }
@media (max-height: 480px) { .wechat-dialog { padding-top: 20px; } .wechat-logo { width: 48px; height: 48px; margin-bottom: 8px; } }