:root { --ink:#132c3b; --deep:#102b3a; --paper:#f5f3ed; --warm:#e9e3d6; --cloud:#dce5e5; --line:#c7d0cd; --muted:#62757a; --gold:#b88747; --serif:Georgia,"Songti SC","STSong",serif; --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; --mono:"SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); -webkit-font-smoothing:antialiased; } button,input,textarea,select { font:inherit; } button,a,summary { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .site-shell { overflow:hidden; } .topbar,.hero,.section,footer { width:min(1280px,calc(100% - 64px)); margin:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; height:92px; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:10px; color:var(--deep); font:700 18px var(--sans); letter-spacing:.03em; } .brand small { padding-left:10px; border-left:1px solid #aebbb9; color:#6c7a7d; font:11px var(--sans); letter-spacing:.08em; } .brand-mark { width:28px; height:28px; } .topbar nav { display:flex; gap:32px; margin-left:auto; margin-right:33px; } .topbar nav a { color:#415d67; font-size:13px; } .topbar nav a:hover { color:#1f5470; } .nav-cta,.button { min-height:42px; border:0; background:transparent; font-weight:700; } .nav-cta { padding:0 16px; color:#eef3f2; background:var(--deep); font-size:13px; }
.hero { display:grid; grid-template-columns:1.04fr .96fr; gap:8vw; align-items:center; min-height:645px; padding:76px 0 86px; } .eyebrow { margin:0 0 18px; color:#6a7a78; font:11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .hero h1,.section-heading h2 { margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-.065em; } .hero h1 { font-size:clamp(45px,5.2vw,72px); line-height:1.2; } .hero h1 em { color:#23556b; font-style:normal; } .hero-summary { max-width:555px; margin:28px 0 28px; color:#526a72; font-size:16px; line-height:1.95; } .term { position:relative; color:#244e67; border-bottom:1px dashed #78909a; } .term-tip { position:absolute; z-index:5; bottom:calc(100% + 10px); left:50%; width:230px; padding:10px 12px; color:#eef4f3; background:#173a4c; box-shadow:0 9px 25px rgba(13,37,49,.18); font:12px/1.65 var(--sans); opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:.2s; } .term:hover .term-tip,.term:focus .term-tip { opacity:1; transform:translate(-50%,0); } .hero-actions { display:flex; flex-wrap:wrap; gap:13px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 20px; font-size:14px; } .button-primary { color:#f8f7f2; background:#17455d; } .button-primary:hover { background:#0d354a; } .button-quiet { color:#254c61; border:1px solid #9fb0b2; } .hero-notes { display:flex; flex-wrap:wrap; gap:0; margin-top:46px; } .hero-notes span { padding:0 15px; color:#6a7e81; border-left:1px solid #bac6c3; font-size:12px; } .hero-notes span:first-child { padding-left:0; border:0; } .hero-photo { position:relative; min-height:440px; margin:0; overflow:hidden; background:#bdc7c5; } .hero-photo img { width:100%; height:100%; min-height:440px; object-fit:cover; filter:saturate(.57) contrast(.98); } .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(6,24,35,.03),rgba(6,24,35,.3)); pointer-events:none; } .hero-photo figcaption { position:absolute; z-index:1; right:0; bottom:0; width:245px; padding:18px 22px; color:#e9efeb; background:rgba(16,43,58,.91); } .hero-photo figcaption span { display:block; margin-bottom:5px; color:#c7d6d2; font:10px var(--mono); } .hero-photo figcaption strong { font:600 17px/1.45 var(--serif); }
.proof-strip { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; width:min(1280px,calc(100% - 64px)); margin:auto; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .proof-strip p { margin:0; color:#4b636b; font:600 14px/1.7 var(--serif); } .proof-strip div { display:flex; flex-wrap:wrap; align-items:center; gap:0; } .proof-strip span { padding:0 16px; color:#65797d; border-left:1px solid #bdc8c5; font-size:12px; }
.section { padding:118px 0; } .section-heading { max-width:720px; } .wide-heading { display:grid; grid-template-columns:1.05fr .7fr; gap:10vw; max-width:none; align-items:end; } .section-heading h2 { font-size:clamp(35px,4vw,56px); line-height:1.28; } .wide-heading > p { margin:0 0 3px; color:#63777d; font-size:14px; line-height:1.9; } .service-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:65px; border-top:1px solid var(--line); border-left:1px solid var(--line); } .service-grid article { min-height:287px; padding:25px 23px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .service-grid span,.card-kicker { color:#b17d3a; font:11px var(--mono); letter-spacing:.08em; } .service-grid h3 { margin:34px 0 10px; font:600 23px/1.35 var(--serif); letter-spacing:-.035em; } .service-grid p { min-height:76px; margin:0; color:#5c7076; font-size:13px; line-height:1.8; } .service-grid small { display:block; margin-top:15px; padding-top:11px; color:#7c8c8b; border-top:1px solid #d5ddda; font-size:11px; line-height:1.6; }
.industry-section { color:#e9f0ed; background:var(--deep); } .industry-inner,.delivery-inner { width:min(1280px,calc(100% - 64px)); margin:auto; padding:118px 0; } .industry-section .eyebrow,.delivery-section .eyebrow { color:#b1c3c1; } .industry-section .wide-heading > p,.delivery-section .wide-heading > p { color:#b9c7c6; } .industry-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:65px; border-top:1px solid rgba(225,238,234,.22); border-left:1px solid rgba(225,238,234,.22); } .industry-grid article { display:flex; flex-direction:column; min-height:260px; padding:26px 28px; border-right:1px solid rgba(225,238,234,.22); border-bottom:1px solid rgba(225,238,234,.22); } .industry-grid span { color:#d8bc82; font:11px var(--mono); } .industry-grid h3 { margin:32px 0 13px; font:600 24px/1.4 var(--serif); letter-spacing:-.04em; } .industry-grid p { margin:0; color:#b9cbd0; font-size:13px; line-height:1.78; } .industry-grid a { display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:17px; color:#e7d1a0; border-bottom:1px solid rgba(223,196,140,.55); align-self:flex-start; font-size:12px; } .industry-grid b { font-size:17px; font-weight:400; }
.role-section { padding-bottom:110px; } .role-list { margin-top:55px; border-top:1px solid var(--line); } .role-list article { display:grid; grid-template-columns:82px minmax(220px,.9fr) 1.1fr; gap:24px; align-items:center; min-height:116px; border-bottom:1px solid var(--line); } .role-number { color:#b47f3e; font:12px var(--mono); } .role-list h3 { margin:0; font:600 22px/1.4 var(--serif); } .role-list p { margin:0; color:#5c7076; font-size:13px; line-height:1.8; } .role-list article > span { color:#66808a; font:11px/1.7 var(--mono); }
.delivery-section { color:#eef3ef; background:#163a4d; } .workline { display:grid; grid-template-columns:repeat(4,1fr); margin-top:63px; border-top:1px solid rgba(235,243,237,.25); border-left:1px solid rgba(235,243,237,.25); } .workline article { min-height:218px; padding:23px 22px; border-right:1px solid rgba(235,243,237,.25); border-bottom:1px solid rgba(235,243,237,.25); } .workline span { color:#d7ba7c; font:10px var(--mono); } .workline h3 { margin:32px 0 10px; font:600 22px/1.4 var(--serif); } .workline p { margin:0; color:#bbcbcc; font-size:13px; line-height:1.75; } .delivery-lower { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:22px; } .responsibility-card { padding:28px 30px; background:#0e2b3b; } .responsibility-card h3 { max-width:440px; margin:11px 0 26px; font:600 28px/1.35 var(--serif); letter-spacing:-.04em; } .responsibility-card dl { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0; } .responsibility-card dt { color:#e2c891; font-size:12px; font-weight:700; } .responsibility-card dd { margin:9px 0 0; color:#b8c9cb; font-size:12px; line-height:1.75; } .tech-details { align-self:stretch; padding:27px 28px; color:#d8e4df; border:1px solid rgba(235,243,237,.3); } .tech-details summary { display:flex; justify-content:space-between; list-style:none; color:#f1f5f0; font:600 21px/1.4 var(--serif); cursor:pointer; } .tech-details summary::-webkit-details-marker { display:none; } .tech-details summary span { color:#dfc188; font:22px/1 var(--sans); } .tech-details[open] summary span { transform:rotate(45deg); } .tech-details div { margin-top:19px; padding-top:18px; border-top:1px solid rgba(235,243,237,.2); } .tech-details p { margin:0 0 12px; color:#b9cbcb; font-size:12px; line-height:1.85; }
.showcase { overflow:hidden; } .showcase-heading > p { max-width:400px; } .showcase-filters { display:flex; flex-wrap:wrap; gap:15px; margin-top:43px; } .showcase-filters label { display:flex; align-items:center; gap:10px; color:#5a7077; font-size:12px; font-weight:700; } .showcase-filters select { min-width:178px; min-height:42px; padding:0 35px 0 12px; color:#183a4d; border:1px solid #aebebb; border-radius:0; outline-color:#3a7083; background:#faf9f4; font-size:13px; } .showcase-controls { display:flex; align-items:center; justify-content:space-between; margin-top:30px; padding:13px 0; color:#6f8283; border-top:1px solid var(--line); font:11px var(--mono); } .showcase-controls > div { display:flex; gap:8px; } .showcase-arrow { display:grid; width:42px; height:42px; place-items:center; color:#214d62; border:1px solid #aebfbe; background:transparent; font-size:19px; } .showcase-arrow:hover { color:#f7f8f3; border-color:#17465d; background:#17465d; } .showcase-track { display:flex; gap:18px; width:calc(100% + 64px); padding:0 64px 18px 0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-color:#9dafad transparent; } .showcase-card { flex:0 0 min(490px,calc(100% - 55px)); overflow:hidden; scroll-snap-align:start; border:1px solid #c4cfcd; background:#fbfaf5; } .showcase-card[hidden] { display:none; } .showcase-image { position:relative; height:272px; overflow:hidden; background:#1e3b49; } .showcase-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,18,25,.03),rgba(7,24,34,.82)); } .showcase-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.62) contrast(.98); transition:transform .45s ease; } .showcase-card:hover .showcase-image img { transform:scale(1.025); } .showcase-image-copy { position:absolute; z-index:1; right:25px; bottom:22px; left:25px; color:#f3f4ed; } .showcase-image-copy span { display:inline-block; margin-right:8px; color:#e1c083; font:10px var(--mono); } .showcase-image-copy h3 { margin:8px 0 0; font:600 27px/1.32 var(--serif); letter-spacing:-.04em; } .showcase-body { padding:23px 25px; } .showcase-body > p { min-height:51px; margin:0 0 20px; color:#5a7076; font-size:13px; line-height:1.78; } .showcase-flow { padding:14px; border:1px solid #d2d9d4; background:#f0f2ec; } .flow-kicker { margin:0 0 10px; color:#748582; font:10px var(--mono); } .flow-steps { display:grid; grid-template-columns:repeat(3,1fr); } .flow-steps button { position:relative; min-height:38px; padding:0 5px; color:#506873; border:1px solid #c7d0ca; border-right:0; background:#fafbf7; font-size:12px; font-weight:700; } .flow-steps button:last-child { border-right:1px solid #c7d0ca; } .flow-steps button[aria-selected="true"] { z-index:1; color:#f6f7f1; border-color:#17465d; background:#17465d; } .flow-output { min-height:41px; margin:12px 0 0; color:#597078; font-size:12px; line-height:1.7; } .showcase-order { display:flex; align-items:center; gap:10px; min-height:40px; margin-top:18px; padding:0; color:#285873; border:0; border-bottom:1px solid #91a7a9; background:transparent; font-size:13px; font-weight:700; } .showcase-order span { font-size:18px; }
.contact-section { display:grid; grid-template-columns:1.04fr .96fr; gap:9vw; align-items:start; padding-top:116px; padding-bottom:116px; } .contact-section h2 { margin:0; font-size:clamp(36px,4.1vw,58px); } .contact-panel { padding:32px; background:var(--warm); border-top:3px solid var(--gold); } .contact-panel p { margin:0 0 22px; color:#50676e; font-size:15px; line-height:1.9; } .contact-panel ul { margin:0 0 27px; padding:0; list-style:none; border-top:1px solid #c4c7bb; } .contact-panel li { padding:10px 0; color:#47616a; border-bottom:1px solid #c4c7bb; font-size:13px; } .contact-panel li::before { content:"—"; margin-right:9px; color:#af7c3d; }
footer { display:flex; align-items:center; justify-content:space-between; min-height:105px; color:#70807f; border-top:1px solid var(--line); font-size:12px; } footer p { margin:0; } .lead-dialog { width:min(650px,calc(100% - 30px)); max-height:calc(100dvh - 30px); padding:0; color:var(--ink); border:0; background:transparent; overflow:auto; } .lead-dialog::backdrop { background:rgba(7,24,34,.72); backdrop-filter:blur(6px); } .lead-form { position:relative; padding:41px; background:#faf9f4; box-shadow:0 25px 80px rgba(0,0,0,.3); } .lead-form h2 { margin:0 0 9px; font:600 36px/1.25 var(--serif); letter-spacing:-.045em; } .form-lede { margin:0 0 27px; color:#61757a; font-size:14px; } .dialog-close { position:absolute; top:17px; right:18px; width:40px; height:40px; color:#52717c; border:1px solid #bdc9c4; border-radius:50%; background:transparent; font-size:23px; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; } .lead-form label { display:block; margin-bottom:17px; color:#365a67; font-size:12px; font-weight:700; } .lead-form input:not([type=checkbox]),.lead-form textarea { display:block; width:100%; margin-top:7px; padding:11px 0; color:var(--ink); border:0; border-bottom:1px solid #b6c5c1; outline:0; background:transparent; font-size:15px; } .lead-form textarea { padding:10px; border:1px solid #b6c5c1; resize:vertical; } .lead-form input:focus,.lead-form textarea:focus { border-color:#316c82; box-shadow:0 2px 0 #316c82; } .lead-form .consent { display:flex; align-items:flex-start; gap:9px; margin:5px 0 15px; color:#62777b; font-weight:400; line-height:1.6; } .lead-form .consent input { margin-top:4px; accent-color:var(--deep); } .form-status { min-height:24px; margin-bottom:5px; color:#2a657b; font-size:13px; } .form-status.error { color:#a94339; } .form-submit { width:100%; } .trap { position:absolute; left:-9999px; }
.mobile-dock,.install-prompt { display:none; }
@media (max-width:900px) { .topbar,.hero,.section,footer,.industry-inner,.delivery-inner,.proof-strip { width:min(100% - 36px,1280px); } .topbar { height:72px; } .topbar nav { display:none; } .brand small { display:none; } .nav-cta { padding:0 13px; font-size:12px; } .hero { grid-template-columns:1fr; gap:31px; min-height:0; padding:54px 0 58px; } .hero h1 { font-size:clamp(43px,10vw,62px); } .hero-summary { max-width:640px; margin:23px 0; } .hero-photo,.hero-photo img { min-height:320px; } .proof-strip { grid-template-columns:1fr; gap:16px; } .proof-strip span:first-child { padding-left:0; border:0; } .section,.industry-inner,.delivery-inner { padding-top:78px; padding-bottom:78px; } .wide-heading { grid-template-columns:1fr; gap:16px; } .section-heading h2 { font-size:38px; } .service-grid { grid-template-columns:1fr 1fr; margin-top:40px; } .industry-grid { grid-template-columns:1fr 1fr; margin-top:40px; } .role-list { margin-top:38px; } .role-list article { grid-template-columns:48px 1fr; gap:13px; padding:19px 0; } .role-list article > span { grid-column:2; } .workline { grid-template-columns:1fr 1fr; margin-top:42px; } .delivery-lower { grid-template-columns:1fr; } .responsibility-card dl { grid-template-columns:1fr 1fr 1fr; } .showcase-filters { margin-top:30px; } .showcase-track { width:calc(100% + 18px); padding-right:18px; } .contact-section { grid-template-columns:1fr; gap:32px; padding-top:78px; padding-bottom:78px; } }
@media (max-width:640px) { body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); } .topbar,.hero,.section,footer,.industry-inner,.delivery-inner,.proof-strip { width:calc(100% - 28px); } .topbar { position:sticky; top:0; z-index:12; height:66px; background:rgba(245,243,237,.94); backdrop-filter:blur(12px); } .nav-cta { display:none; } .hero { padding-top:36px; padding-bottom:42px; } .hero h1 { font-size:40px; } .hero-summary { font-size:15px; line-height:1.85; } .term-tip { left:auto; right:0; transform:translate(0,4px); } .term:hover .term-tip,.term:focus .term-tip { transform:translate(0,0); } .hero-actions { display:grid; grid-template-columns:1fr 1fr; } .button { min-height:48px; padding:0 13px; font-size:13px; } .hero-notes { margin-top:31px; } .hero-photo,.hero-photo img { min-height:260px; } .hero-photo figcaption { width:215px; padding:14px 16px; } .proof-strip { padding:18px 0; } .proof-strip div { gap:9px 0; } .proof-strip span { padding:0 11px; font-size:11px; } .section,.industry-inner,.delivery-inner { padding-top:68px; padding-bottom:68px; } .section-heading h2 { font-size:33px; } .wide-heading > p { font-size:13px; } .service-grid,.industry-grid { grid-template-columns:1fr; margin-top:34px; } .service-grid article { min-height:0; padding:22px 20px; } .service-grid h3 { margin-top:23px; } .service-grid p { min-height:0; } .industry-grid article { min-height:235px; padding:22px 20px; } .industry-grid h3 { margin-top:26px; } .role-list article { grid-template-columns:42px 1fr; } .role-list h3 { font-size:20px; } .workline { grid-template-columns:1fr; margin-top:35px; } .workline article { min-height:0; padding:20px; } .workline h3 { margin-top:21px; } .responsibility-card,.tech-details { padding:23px 20px; } .responsibility-card h3 { font-size:25px; } .responsibility-card dl { grid-template-columns:1fr; gap:18px; } .showcase-filters { display:grid; grid-template-columns:1fr; gap:9px; } .showcase-filters label { display:block; } .showcase-filters select { width:100%; margin-top:6px; } .showcase-card { flex-basis:calc(100% - 26px); } .showcase-image { height:231px; } .showcase-image-copy { right:18px; bottom:17px; left:18px; } .showcase-image-copy h3 { font-size:24px; } .showcase-body { padding:20px 18px; } .showcase-body > p { min-height:0; } .flow-steps button { min-height:42px; font-size:11px; } .contact-section h2 { font-size:37px; } .contact-panel { padding:24px 20px; } footer { min-height:120px; align-items:flex-start; flex-direction:column; justify-content:center; gap:9px; } .lead-dialog { width:100%; max-width:none; max-height:100dvh; margin:0; } .lead-form { min-height:100dvh; padding:70px 20px calc(28px + env(safe-area-inset-bottom)); } .lead-form h2 { font-size:33px; } .form-grid { grid-template-columns:1fr; gap:0; } .mobile-dock { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); min-height:calc(64px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); color:#dce9e5; background:rgba(12,36,49,.97); box-shadow:0 -8px 26px rgba(7,17,26,.18); } .mobile-dock a,.mobile-dock button { display:flex; align-items:center; justify-content:center; min-height:64px; color:inherit; border:0; background:transparent; font:600 12px var(--sans); } .mobile-dock button { color:#f0d49b; } .install-prompt { position:fixed; z-index:21; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); left:12px; align-items:center; gap:11px; padding:12px 13px 12px 15px; color:#edf5f0; background:#163c50; box-shadow:0 16px 40px rgba(4,13,21,.28); } .install-prompt:not([hidden]) { display:flex; } .install-prompt p { flex:1; margin:0; font-size:12px; line-height:1.45; } .install-prompt button { min-height:36px; border:1px solid #91b4bd; color:#f2d39b; background:transparent; font-size:12px; font-weight:700; } .install-prompt #install-action { padding:0 12px; } .install-dismiss { width:36px; padding:0; font-size:20px !important; } }

/* 案例把“场景—改动—测算”放在一张卡里；数字是可复算的示例，不作为结果承诺。 */
.case-disclosure { max-width:790px; margin:26px 0 0; padding:15px 18px; color:#61757b; border-left:3px solid #b88747; background:#ecece5; font-size:13px; line-height:1.8; }.case-disclosure strong { color:#31586a; }
.showcase-card { flex-basis:min(548px,calc(100% - 55px)); }.showcase-body { padding:25px; }.showcase-body > .case-persona { min-height:0; margin:0 0 9px; color:#b17d3a; font:10px var(--mono); letter-spacing:.06em; }.showcase-body > .case-story { min-height:0; margin:0 0 18px; color:#49646d; font-size:14px; line-height:1.85; }
.case-contrast { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid #d3dad4; background:#d3dad4; }.case-contrast > div { min-height:112px; padding:13px 14px; background:#f3f3ee; }.case-contrast > div:last-child { background:#e7efeb; }.case-contrast span { display:block; margin-bottom:7px; color:#7e7570; font:10px var(--mono); letter-spacing:.08em; }.case-contrast > div:last-child span { color:#2b6b68; }.case-contrast p { margin:0; color:#536b70; font-size:12px; line-height:1.7; }
.case-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:16px; border-top:1px solid #d5ddd6; border-bottom:1px solid #d5ddd6; }.case-metrics div { min-width:0; padding:13px 10px 13px 0; }.case-metrics div+div { padding-left:10px; border-left:1px solid #d5ddd6; }.case-metrics strong { display:block; color:#1e5369; font:600 17px/1.3 var(--serif); letter-spacing:-.035em; }.case-metrics span { display:block; margin-top:4px; color:#718084; font-size:10px; line-height:1.45; }.case-assumption { min-height:0 !important; margin:11px 0 16px !important; color:#7b8988 !important; font-size:10px !important; line-height:1.65 !important; }
.showcase-body .showcase-flow { margin-top:0; }.showcase-body .showcase-order { margin-top:19px; }
@media (max-width:640px) { .case-disclosure { margin-top:20px; padding:13px 14px; font-size:12px; }.showcase-card { flex-basis:calc(100% - 26px); }.case-contrast > div { min-height:124px; padding:12px; }.case-metrics strong { font-size:15px; }.case-metrics div { padding-right:7px; }.case-metrics div+div { padding-left:7px; }.case-metrics span { font-size:9px; } }