#home { background:#fff; color:#181818; overflow:hidden; }
#home * { box-sizing:border-box; }
#home h1, #home h2, #home h3, #home p { margin:0; letter-spacing:0; word-break:keep-all; }
#home h1 { max-width:620px; font-size:58px; line-height:1.08; font-weight:800; }
#home h2 { font-size:38px; line-height:1.2; font-weight:800; }
#home h3 { font-size:20px; line-height:1.35; font-weight:800; }
#home p { color:#5c5c5c; font-size:17px; line-height:1.75; }
.home-wrap { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.home-kicker { display:block; margin-bottom:16px; color:#1769aa; font-size:12px; font-weight:800; letter-spacing:0; }
.home-copy { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.home-btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 22px; border:1px solid #181818; color:#181818; font-size:14px; font-weight:700; text-decoration:none; }
.home-btn:hover { background:#181818; color:#fff; }
.home-btn-light { border-color:#fff; color:#fff; }
.home-btn-light:hover { background:#fff; color:#111; }
.home-visual { padding:96px 0 84px; background:#f6f7f8; }
.home-visual-grid { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:58px; }
.home-visual .home-copy p { max-width:520px; }
.home-placeholder { position:relative; min-height:360px; background:#e8ebee; border:1px solid #d8dde2; overflow:hidden; }
.home-placeholder::before { content:""; position:absolute; inset:24px; border:1px solid rgba(24,24,24,.1); pointer-events:none; }
.home-placeholder img { display:block; width:100%; height:100%; object-fit:cover; }
.home-visual-box { min-height:430px; background:url("../img/differpedia_bg.jpg") center/cover no-repeat; }
.mock-window { position:absolute; background:#fff; border:1px solid #cbd3da; box-shadow:0 18px 45px rgba(24,24,24,.08); }
.mock-window-main { left:68px; top:76px; width:62%; height:210px; }
.mock-window-sub { right:48px; bottom:58px; width:42%; height:150px; }
.mock-line { position:absolute; height:10px; background:#1769aa; opacity:.85; }
.mock-line-a { left:96px; top:126px; width:210px; }
.mock-line-b { left:96px; top:154px; width:150px; background:#9aa8b4; }
.home-about { padding:88px 0; background:#fff; }
.home-split { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; }
.home-text { display:grid; gap:18px; }
.home-services { padding:86px 0; background:#f7f7f7; }
.home-section-head { max-width:720px; margin:0 auto 34px; text-align:center; }
.service-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.service-grid article { min-height:250px; padding:32px; background:#fff; border:1px solid #e5e5e5; }
.service-grid article p { margin-top:18px; font-size:15px; }
.service-mark { margin-bottom:42px; color:#1769aa; font-size:13px; font-weight:800; }
.home-optimize { padding:92px 0 100px; background:#1b2229; color:#fff; }
.home-optimize h2, .home-optimize p { color:#fff; }
.home-optimize p { max-width:540px; opacity:.78; }
.home-optimize .home-kicker { color:#8fc8ff; }
.home-optimize-box { min-height:390px; background:#252f38; border-color:#35414c; }
.home-optimize-box::before { border-color:rgba(255,255,255,.12); }
.opt-card { position:absolute; background:#f4f6f8; border:1px solid #cad2d9; }
.opt-card-a { left:54px; top:64px; width:52%; height:220px; }
.opt-card-b { right:58px; top:108px; width:34%; height:118px; }
.opt-card-c { right:86px; bottom:62px; width:44%; height:80px; background:#dce5ec; }
@media (max-width:560px){
	#home h1 { font-size:38px; }
	#home h2 { font-size:29px; }
	#home p { font-size:15px; }
	.home-wrap { width:calc(100% - 28px); }
	.home-visual { padding:58px 0 54px; }
	.home-visual-grid { grid-template-columns:1fr; gap:34px; }
	.home-placeholder { min-height:280px; }
	.home-visual-box { min-height:320px; }
	.mock-window-main { left:34px; top:58px; width:68%; height:160px; }
	.mock-window-sub { right:28px; bottom:40px; width:48%; height:110px; }
	.mock-line-a { left:58px; top:100px; width:150px; }
	.mock-line-b { left:58px; top:124px; width:112px; }
	.home-about { padding:58px 0; }
	.home-split { grid-template-columns:1fr; gap:30px; }
	.home-services { padding:58px 0; }
	.home-section-head { margin-bottom:24px; text-align:left; }
	.service-grid { grid-template-columns:1fr; }
	.service-grid article { min-height:auto; padding:26px; }
	.service-mark { margin-bottom:28px; }
	.home-optimize { padding:58px 0 64px; }
	.home-optimize-box { min-height:300px; }
	.opt-card-a { left:28px; top:54px; width:62%; height:158px; }
	.opt-card-b { right:26px; top:96px; width:42%; height:92px; }
	.opt-card-c { right:42px; bottom:50px; width:52%; height:62px; }
}
